Subscribe to stay in the know when I publish new articles, find interesting things on the web, and more!

[Subscribe](https://ryanfurrer.beehiiv.com/) to The RF Newsletter and be notified whenever I send out a new issue.


Like what you've read?

Clean white desk with laptop, mouse, and phone.

![](/images/another-modern-reset-cover.jpg)

[View it on GitHub](https://github.com/TheRyanFurrer/css-reset)

What is a CSS Reset and why is it useful?

In its simplest form, a CSS Reset is a stylesheet used to remove any unwanted default styling a browser might apply to your HTML elements. Many people - myself included - choose to use CSS Resets to add their *preferred* default styling to their projects so there is some form of consistency and continuity between their projects.

While browsers have pared down their default stylings and brought them more in line with one another, a CSS Reset can still offer you a handful of benefits. We’ll dig more into those as we move along in my CSS reset, but first, let us take a look at the reset in its entirety. Today's blog will be a bit lengthy but stick with me.

<hr />

**NOTE**

This CSS Reset is a conglomerate of cherry-picked properties for my use case from [Andy Bell's CSS Reset](https://piccalil.li/blog/a-modern-css-reset/), [Josh Commeau’s CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/), and some properties I found from [Kent C. Dodds' website](https://kentcdodds.com/).

<hr />

## The Entire Reset

[View it on GitHub](https://github.com/TheRyanFurrer/css-reset)

```
/*
  This CSS Reset is a conglomerate of Andy Bell's, Josh Commeau, and some properties I found from Kent C. Dodds' website.
*/

/*
  Andy's Custom CSS Reset
  https://piccalil.li/blog/a-modern-css-reset/
*/

/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/

/*
  Kent C. Dodds
  https://kentcdodds.com/
*/s

/*-----Universal Styles-----*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/*-----Core Styles-----*/
html {
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

body {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 1440px;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

main {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

footer {
  border-top: 1px solid black;
  margin-top: 1.5rem;
  padding-top: 3rem;
  padding-bottom: 1.5rem;
}

body > footer {
  position: sticky;
  top: 100vh;
}

/*-----Element Styles-----*/
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  line-height: 1.15;
}

small {
  font-size: 80%;
}

b,
strong {
  font-weight: bolder;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

a:is([class]) {
  text-decoration: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

/*-----Browser Inconsistancy Fixes-----*/
button,
input,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/*-----Media Queries-----*/
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```

## Part 1: Universal Styles

```
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding: 0;
}
```

If you only chose to include these two stylings, you would be set up for success, to be sure - this would be a perfectly acceptable simple and minimal CSS Reset. It makes sizing elements easier and removes all margin and padding on all elements by taking advantage of the universal selector, `*`.

## Part 2: Default Body Styles

```
html {
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 1440px;
	padding: 0 1rem;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

main {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

footer {
  margin-top: var(—size-5);
  padding-top: var(—size-8);
  border-top: var(—border-size-1) solid var(—bg-tertiary);
  padding-bottom: var(—size-5);
}

body > footer {
  position: sticky;
  top: 100vh;
}
```

This part is a bit lengthy so let’s break it down further.

```
html {
  text-size-adjust: none;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  height: 100%;
}
```

First, we set `text-size-adjust` and its accompanying browser pre-fixes to none.  When Apple released the first iPhone, and you would rotate your device when viewing a site, the text size would enlarge to make things easier to see. This made sense before responsive websites; however, it is archaic and unnecessary. That being said, Apple still makes it happen. `text-size-adjust` disables it from occurring.

Next up is `html:focus-within` - this enables smooth scrolling without an issue pointed out in this article on CSS-Tricks. I highly encourage you to [read and understand](https://css-tricks.com/fixing-smooth-scrolling-with-find-on-page/) why using `html { scroll-behavior: smooth;}` is not currently advised.

Lastly, adding `height: 100%;` to our `<html>` and `<body>` tags allows us to use percentage-based heights on elements on our page. I always wondered by this did not work as you’d expect, and as [Josh explains](https://www.joshwcomeau.com/css/custom-css-reset/#digit-percentage-based-heights), “…the *height* of an element is calculated based on its *children*.”

I don’t use `vh` on mobile sites because all the browsers are different and often show/hide elements based on what direction the user is scrolling; as such, using `vh` can cause unexpected effects.

<hr />

```
body {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 1440px;
	padding: 0 1rem;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}

main {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
}

footer {
  margin-top: var(—size-5);
  padding-top: var(—size-8);
  border-top: var(—border-size-1) solid var(—bg-tertiary);
  padding-bottom: var(—size-5);
}

body > footer {
  position: sticky;
  top: 100vh;
}
```

This part is a bit magical for me; we’ll break this down piece by piece again. You may see some reused styles, such as `display: flex;` - that is because, in my reset, I don’t like to do much nesting or truncating so that I can easily see what is happening if I need to fix any issues.

```
body {
  display: flex;
  flex-direction: column;
  line-height: 1.5;
  margin: 0 auto;
  max-width: 1440px;
	padding: 0 1rem;
  text-rendering: optimizeSpeed;
  -webkit-font-smoothing: antialiased;
}
```

Since I work from a mobile-first approach, as I encourage most to do, I make my content into a column from a meta-level using `display: flex;` and `flex-direction: column;`. Though this is how the page is typically rendered, I’ve run into some weird things in the past and prefer to add two lines of code to ensure it looks how I expect.

Next, I add some defaults that I prefer:

`line-height: 1.5;` - a basic default recommended for better reading experiences and accessibility. This is unnecessary for large font and headings, which you’ll see get over-written later.

`margin: 0 auto;` - centers all visible content on the page. This is necessary when you take into account the following style.

`max-width: 1440px` - I find that a page width of 1440px works well for me as it limits how far people have to move their heads to see both ends of your website. However, as much as people enjoy massive ultra-wide displays, I don’t think having the header navigation spanning 34” is helpful, nor is it good looking.

`padding: 0 1rem;` - this adds padding to the left and right sides of the body, which is great for mobile browsing. Otherwise, you’d have no space between the content and where the screen ends.

`text-rendering: optimizeSpeed;` - The browser emphasizes rendering speed over legibility and geometric precision when drawing text. It disables kerning and ligatures.

`-webkit-font-smoothing: antialiased;` - I can’t explain this any better than [Josh](https://www.joshwcomeau.com/css/custom-css-reset/#digit-font-smoothing); however, know it only applies to computers running macOS.

<hr />

## Part 3: Inner-Element Styles

```
/*-----Element Styles-----*/
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  line-height: 1.15;
}

small {
  font-size: 80%;
}

b,
strong {
  font-weight: bolder;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

a:is([class]) {
  text-decoration: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}
```

### Improving Accessibility and Improving Styling

```
ul[role='list'],
ol[role='list'] {
  list-style: none;
}
```

This removes the `list-style` on any `ol` or `ul` with an attribute of `role=‘list'`. While this rule wouldn’t be necessary if CSS didn’t remove the semantics and a11y of lists with the `list-style` removed, we at least have a solution with this rule applied. You can read more about this in Scott O’Hara’s article [“Fixing” Lists](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html).

### Improving Working with Images

```
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
```

This rule is relatively straightforward - it makes any image render as a block element and removes its ability to break outside of its container by settings its `max-width` to 100%.

### Baseline Text Styles

```
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

h1,
h2,
h3 {
  line-height: 1.15;
}
```

The first rule encourages the browser to break lines on words rather than insert hyphens, and “…will only create a break if an entire word cannot be placed on its own line without overflowing...” - As per the [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap). This - in my opinion - is a stylistic choice rather than a *must-have*.

The second rule above reduces the `line-height` of heading elements `<h1>`, `<h2>`, and `<h3>`. As per the [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#accessibility_concerns), only the *main paragraph content* must have a `line-height` of 1.5. While still maintaining accessibility, headings may have a slightly smaller `line-height` as the larger font sizes associated with them create more white space, thus possibly leading to header lines being spread too far apart.

### Preferred Styles

```
small {
  font-size: 80%;
}

b,
strong {
  font-weight: bolder;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

a:is([class]) {
  text-decoration: none;
}

input,
button,
textarea,
select {
  font: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}
```

The rules above are preferred styles that also do away with any browser inconsistencies. We’ll go through these quickly as they are relatively straightforward.

```
small { 
	font-size: 80%;
}
```

Sets `font-size` of any text inside the HTML `<small>` tag to 80% of the regular size for that element. For example, if we have a `<p>` tag with a regular size of `1rem` or `16px`, the `<small>` size is `0.8rem`, or `12.8px`.

```
b, strong { 
	font-weight: bolder; 
}
```

Old Microsoft Edge (before it was Chromium-based) and Safari render the `<b>` and `<strong>` tags differently from other browsers, this rule sets a standard boldness (`font-weight`) to display any text wrapped in those tags.

```
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
```

Prevent `<sub>` and `<sup>` elements from affecting the `line-height` in all browsers.

```
a:not([class]) {
  text-decoration-skip-ink: auto;
}

a:is([class]) {
  text-decoration: none;
}
```

The first rule assigns default styles (`text-decoration: underline;`) to any `<a>` without a class. The second rule applies `text-decoration: none;` to any `<a>` *with* a class. This is incredibly useful in reducing the number of times you might need to repeat these rules to get the styling you’d like.

The critical thing to remember when using these rules and get the most out of them - to [keep your code DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself#:~:text=%22Don't%20repeat%20yourself%22,data%20normalization%20to%20avoid%20redundancy.)) - is to *never* apply a class to an anchor tag where you’d like to maintain default styling.

```
input,
button,
textarea,
select {
  font: inherit;
}
```

This rule tells the `<input>`, `<button>`, `<texture>`, and `<select>` elements to use or *inherit* the same font as their parent element. By default, these will use a different font which, for me, is unwanted.

```
button {
  background: none;
  border: none;
  cursor: pointer;
}
```

The above removes the default `background` and `border` of buttons and ensures the cursor becomes a 👆🏻 to suggest something will happen when you click it.

<hr />

## Part 4: Fixing Browser Inconsistencies

```
/*-----Browser Inconsistancy Fixes-----*/
/* Correct the inability to style clickable types in iOS and Safari */
button,
input,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/* Remove the inner padding in Chrome and Safari on macOS */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/* Correct the cursor style of increment and decrement buttons in Safari */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Remove the inner border and padding in Firefox */
::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* Restore the focus styles unset by the previous rule */
:-moz-focusring {
  outline: 1px dotted ButtonText;
}
```

The CSS rules above I saw on [Kent C. Dodds’](https://kentcdodds.com/) new site and thought, “If he’s got them, they are there for a reason,” and thought I’d throw them in my CSS reset. They all do something to “fix” browser styling, “correct,” or make different browsers consistent with the others. Most of these apply to Safari on iOS and macOS, which I’d argue are the new Internet Explorer.

Read the comments in the code above to learn more about each rule.

<hr />

## Part 5: Increasing Accessibility

```
/*-----Media Queries-----*/
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```

The above media query is something I consider a *must-have* for all projects. This is because it respects users that prefer reduced motion when viewing websites, mobile apps, and operating systems - basically, any piece of software.

Some people have reported experiencing bouts of motion sickness and vertigo when they see too much motion in software partially caused by [vestibular disorders](https://www.a11yproject.com/posts/understanding-vestibular-disorders/).

<hr />

## Wrapping Up

Phew, that was a lot!

So there you have it, a CSS Reset that is a conglomeration of the resets of two well-known developers, [Andy Bell](https://piccalil.li/blog/a-modern-css-reset/) and [Josh Comeau](https://www.joshwcomeau.com/css/custom-css-reset/), and some borrowed code from Kent C. Dodds’ [new site](https://kentcdodds.com/).

While the code snippets I used from Kent’s website are more for fixing browser inconsistencies (a lot for Safari), Josh’s CSS Reset focuses a lot on making the browser easier/better to build in, while Andy’s does the same, and then some.

It is important to note that there is no single correct way to do a CSS Reset, which is why you can see that while the two of them share similarities, they are different enough that I feel they achieve slightly different things in the end. This could, of course, be reflective of each developer’s style, or there may be additional tools such as frameworks or CSS Libraries that we do not see.

Feel free to [view the reset on GitHub](https://github.com/TheRyanFurrer/css-reset) and use it in your projects! Or you may wish to modify it to your liking. As I update the reset, the GitHub repo will also be updated. I'd love to hear your thoughts on this, so feel free to reach out to me on [Twitter](https://twitter.com/TheRyanFurrer) or via my [portfolio](https://theryanfurrer.dev/contact.html).

[View it on GitHub](https://github.com/TheRyanFurrer/css-reset)


Another Modern CSS Reset

![](/images/portfolio-cover-image-v3.svg)

## The Why

I had previously built a decent portfolio, but with the "re-branding," which I recently, made, along with my re-focus on learning code, I thought it wise to create a new home on the Internet. Something I was proud of to house my work while learning more and prepare to apply for my first web development job.

I already want to make changes to my site, but I \* have to \* concentrate elsewhere if I want to actually get a job in this area. Further refinements can be made in the future, but I can't let myself be distracted. In the end, it is useless to have a *nice* portfolio, but nothing to fill it with.

I say this because I don't think I'll ever feel 100% complete with my portfolio, but I can get it to the point where I'm content to share it with the world - so I've done exactly that.

## Portfolio Versions

### v1 - Published February 2019

This was built about a month after I started learning HTML and CSS. It's nothing special, but it was the first web page I had built in full. None of the projects were ever completed, but this was the first thing I was excited to code. (link no longer available)

### [v2](https://ryan-furrer-v2.netlify.app/) - Published in August 2019

v2 was built about 6 months after the "completion" of v1. I learned a lot in this time, which, I believe, can be observed in the design language. Looking at it now, I see many things that need refinement, but I remember being pleased with the way this one came together at the time.

### [v3](https://the-ryan-furrer-v3.netlify.app/) - Published July 2021

v3 was recently completed and announced to the world on 7/2/21, which is *quite* some time since August 2019. A lot has happened over the years, and I will not make excuses for my insufficient progress... I was simply not disciplined enough to do the work that needs to be done to change careers as I want.

## The Tech Stack

*   HTML
    As with everything I build from scratch, I like to focus on using semantic HTML, as it helps greatly with accessibility and organization. If you're not using semantic HTML in your projects, you're not helping anyone.

*   CSS (SCSS)
    I *love* using [SCSS](https://sass-lang.com/) and it's definitely my preferred method for writing CSS these days. If you're not familiar with SCSS, it "...is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax."

That said, if you are new to front-end work, please do your due diligence and learn regular CSS before anything else in the CSS world. It is powerful and is a prerequisite, in my opinion, for any CSS frameworks, stylesheet languages like SASS, etc.

*   JavaScript (future endeavors)
    While I am still learning JavaScript, I have a few ideas on how to implement it in my site. A theme-switcher is #1, but also some fun easter eggs!

*   Deployed on Netlify
    I *love* [Netlify](https://www.netlify.com/) for so many reasons, but the #1 reason is how simple and quick it is to get a new project deployed onto the web. There are other options, like [Vercel](https://vercel.com/), but for now I am loyal to Netlify.

## The Design

When designing my portfolio, I knew that I wanted something clean, but not necessarily minimal. I love minimalist designs, but I didn't want that to limit my portfolio. I also knew I wanted to refine the card design I used on [Coding Catchup v2](https://coding-catchup-v2.netlify.app/).

![](/images/blog-026\_02.gif)

So first I thought about what colors I would like to use...

### The Colors

My original goal was to identify a brand color for me and one for my tech blog Coding Catchup. I chose purple for myself as an evolution of the indigo color that I featured in the previous version of my portfolio.

v2 main color: `#646FCB`
v3 main color: `#AD96E9`

As for Coding Catchup, I've had my eyes on this sort of green-blue color for a while and decided to run with it.

v1 main color: `#3FC8A7`
v3 main color: `#96E9D8`

![](/images/blog-026\_03.png)

Little did I realize these two colors actually work well together, and the Coding Catchup green is now featured on my portfolio site as an accent color. I think of this as a type of harmonious binding in my two main projects - I like it!

### The Content

Content, layout and structure are pretty straightforward. As a single-page app, I simply have to link to different IDs on the page, like Projects, About and Contact Me.

I chose to place my projects first, so it's the first thing (technically second thing) that someone notices when visiting my site. In the Projects section, there are cards containing information about each of my projects. At the time of writing, I am featuring 3 Projects: [Coding Catchup](http://codingcatchup.com/), the [Portfolio](http://theryanfurrer.dev/) itself, and my [Wedding](http://furrever.wedding/) website.

Next up is the “About” section where visitors can learn more about me - pretty self-explanatory! I’m not good at writing about myself, so this will undergo some revisions for sure.

Lastly, is the “Contact Me” section. This is simply a contact form connected via Netlify Forms, which again makes it *so simple*. Netlify even has integrated spam protection, which, while I am sure it won't stop every bit, is good enough for me at the moment.

## The Assembly

### Content First

As I worked through this, I had a basic design in mind, so it was easy for me to insert all HTML and style later. Having said that, it hurts me to continue adding content when my navigation bar still looks like a standard list. But I trusted the process, and frankly, it was pretty fast... not that the site is huge lol.

After putting all the content together, it was time to make it look better.

### Styling Second

Again, coming into this with an idea of a design and color scheme helped immensely. Hell, I had already picked out my colors and fonts, so I got to work creating my SCSS variables, linking to Google Fonts for [Poppins](https://fonts.google.com/specimen/Poppins?query=popp) and [Open Sans](https://fonts.google.com/specimen/Open+Sans?query=open+sa), and prettying up my new portfolio. Oh, and I of course created a CSS Reset using [Andy Bell's](https://piccalil.li/) [Modern CSS Reset.](https://github.com/andy-piccalilli/modern-css-reset)

When styling the site, as with most other projects, I started with the mobile site and then built larger from there. For me, I prefer starting small and building out for a few reasons.

1.  Mobile traffic is *much* higher than desktop traffic, so I had to make sure everything looked good there first.

2.  Mobile layouts are typically clear and straight forward. It's just a column of content, whereas larger screens, including tablets, laptops and desktops, allow you to have a little more fun with your designs and layouts.

From there, I made sure everything was responsive and looked good across as many devices and browsers worth checking. Currently, the site is simple, with only one media query for screen size breakpoints.

### Finishing Touches

The last thing I've done was add what I like to think of as finishing touches - things that merely make for a nicer experience. These are things like the :hover styles on links, navigation items, my logo, etc., but also the outline on my projects and the contact form. Just some things to add a sense of polish to the site.

Although I am not 100% satisfied with it, I have to build new projects to be featured on my site! In my opinion, the portfolio should grow with the developer, and so far I think v3 shows I've grown... even a little.

## Extras

After the main site was built, there were just a few things left to do, these included:

*   Build a success page users see after submitting a message via the form.

    This was done easily with the Netlify docs on their [form setup](https://docs.netlify.com/forms/setup/). It isn't anything fancy, but at least it matches the rest of the site's styles.

*   Create a "Links" page

    Again, a very simple page that I wanted to create to easily have all my links in one place. There are services out there that allow you to do this without code, like [bio.link](http://bio.link/), but I wanted it to match the look and feel of the rest of the website, and it's easy enough to do it myself.

*   Forward subdomains to respective pages

    Again, it's simple, but something that makes it easier to remember different links and seems a little more professional - in my opinion.

    I have 3 domains currently forwarded:

    *   [blog.theryanfurrer.dev](http://blog.theryanfurrer.dev/) points to [codingcatchup.com](http://codingcatchup.com/)

    *   [links.theryanfurrer.dev](http://links.theryanfurrer.dev/) points to [theryanfurrer.dev/pages/links.html](http://theryanfurrer.dev/pages/links.html)

    *   [timeline.theryanfurrer.dev](http://timeline.theryanfurrer.dev/) points to my [Polywork](https://www.polywork.com/theryanfurrer) profile

*UPDATE 1/30/21*
[*blog.theryanfurrer.dev*](http://blog.theryanfurrer.dev/)\* no longer works as my blog is now hosted at [*theryanfurrer.blog*](https://www.theryanfurrer.blog/), thus no need for redundancy.\*

## Wrapping up

That's all I've got for now. I hope you enjoyed reading about my process, and I hope you choose to return for more! Feel free to contact me via [my website](https://theryanfurrer.dev/contact.html) or on [Twitter](https://twitter.com/TheRyanFurrer) if you have any questions or want to say hello.

There is always more work to be done, but only so many hours in the day! My next project (at the moment) is an e-commerce site built with React. This is new for me, but I am enjoying it so far. Subscribe for more weekly updates, project summaries, and tech articles, and/or follow me on Twitter!


Designing and Developing My Portfolio - v3

![](/images/blog-027-3e51e7b3.png)

 to the fifth installment in my weekly summary series, where I give quick recaps of what I worked on the previous week to keep myself accountable.

First, let's go over my weekly schedule:

## Current Weekly Schedule

*   **Monday - Thursday**: Study from 6:00pm - 8:00pm-ish. Sometimes I go until 9pm depending on how I feel.

*   **Friday**: Study from 1:00pm - 4:00pm. I like to give myself more time to study when I can, and working half-days on Fridays for my current job leaves a significant time for extra coding.

*   **Saturday**: Study from 7:30am - 9:30am. I give myself at least 2 hours on Saturdays, even though I often get more time in.

*   **Sunday**: Day off This is my day to recover, get energized and prepare for the coming week!

All this works with my personal goal of studying / coding 2 hours a day. I would like to do more, but I don't have the mental bandwidth to do more, usually, throughout the week.

I don't always stick to this schedule, but I try my best to do so. Now then, let's get to it!

## Sunday, July 18th

Sunday I published the 2nd issue of the [Coding Catchup Newsletter](https://www.getrevue.co/profile/theryanfurrer/issues/coding-catchup-issue-2-693885) with help from [Revue](https://www.getrevue.co/)! While I am still deciding what format I'd like to use with my newsletter, I believe the 2nd issue was much better than merely republishing my blog posts as an email - I think I can provide more value than that - what do you think?

## Monday, July 19th

Monday was a productive day, which was a nice way to kick off the week! I signed up for [Cloudinary](https://cloudinary.com/) to host the images on my [wedding website](https://furrever.wedding/), so it is easier to serve the most appropriately sized images for anyone visiting the site. This should help site performance and save data for those on mobile phones.

I also added my wedding site as a featured project to my [portfolio](https://theryanfurrer.dev/#projects). I think it's a complete site that shows off what I can do, and I'm proud of it!

I finished up my night by studying React for 40 minutes on [Udemy](https://www.udemy.com/course/react-redux/?utm_source=adwords\&utm_medium=udemyads\&utm_campaign=React_v.PROF_la.EN_cc.US_ti.7450\&utm_content=deal4584\&utm_term=\_.\_ag\_79286082406\_.\_ad\_532133511517\_.\_kw\_\_.\_de_c\_.\_dm\_\_.\_pl\_\_.\_ti_dsa-774930034049\_.\_li\_9004513\_.\_pd\_\_.\_\&matchtype=b\&gclid=Cj0KCQjwl_SHBhCQARIsAFIFRVWCGPE14FkrzGOZX8uKX5oB5C\_5RNlqElpY1QH08j-jzV9Ti2CUd-EaAu72EALw_wcB).

## Tuesday, July 20th

I originally planned to hit React hard, but due to my current work environment continually getting worse and my unhappiness increasing, I thought it wise to get my resume going. While I don't feel ready to begin applying to jobs, I could at least have the resume put together. I can fill in the details when I am ready to begin applying.

Thank you, [Joe Previte](https://twitter.com/jsjoeio), for being a huge help! He helped take it from overwhelming to doable.

## Wednesday, July 21st

I took another night to work on my resume. I used [Affinity Publisher](https://affinity.serif.com/en-us/publisher/) to design and develop it. If you are interested in learning more about how I did it, let me know!

![](/images/blog-027\_01.jpeg)

## Thursday, July 22nd

Finally, I completed my resume - except the part where it is complete lol. As I develop more resume-worthy projects, I'll update it to feature those, but for now I am pleased with how it looks. Before I closed my laptop, I started working on a new project I have in mind, but you will have to wait and see more in the future.

## Friday, July 23rd

Friday I put my previously mentioned project aside and began a different one - a fake eCommerce site that I'll be building with React. I started this while on a Discord call with a friend in the UK who also needs to build something new for his portfolio. While he is well-versed in [Angular](https://angularjs.org/) and a much more experienced developer than me, it was cool to build alongside someone like that.

We bounced ideas off one another, and I definitely picked up a thing or two I can transfer into my own practices. We're trying to make co-building a regular thing to help us ship more projects.

## Saturday, July 24th

Saturday, I continued working on that new React project. Anything new is exciting, and I want to keep building with it! I want/need to watch more of the Udemy course, but simply trying new things was fun. However, I also continued watching the React course, because that's how I'll learn faster, I believe.

## Moving Forward

This week, I truly believe I can make significant progress with React. Getting exposed to it has opened my eyes to how powerful it can be, but also how much there is to learn...which could be overwhelming. I'm doing my best to push forward and continue building, rather than letting myself be intimidated.

That's all I've got for last week! If you don’t already, I’d love you to follow my journey to becoming a web developer on [Twitter](https://twitter.com/TheRyanFurrer), where I’ve committed to and post updates daily! Come and say hi, I’d love to support you.


Weekly Summary: 7/18 - 7/24

![](/images/blog-025.png)

Welcome to the fourth installment in my weekly summary series, where I give quick recaps of what I worked on the previous week to keep myself accountable.

First, let's go over my weekly schedule:

## Current Weekly Schedule

*   **Monday - Thursday**: Study from 6:00pm - 8:00pm-ish.
    Sometimes I go until 9pm depending on how I feel.

*   **Friday**: Study from 1:00pm - 4:00pm
    I like to give myself more time to study when I can, and working half-days on Fridays for my current job leaves a significant time for extra coding.

*   **Saturday**: Study from 7:30am - 9:30am
    I give myself at least 2 hours on Saturdays, even though I often get more time in.

*   **Sunday**: Day off
    This is my day to recover, get energized and prepare for the coming week!

All this works with my personal goal of studying / coding 2 hours a day. I would like to do more, but I don't have the mental bandwidth to do more, usually, throughout the week.

I don't always stick to this schedule, but I try my best to do so.
Now then, let's get to it!

## Sunday, July 11th

Completed the code re-factoring of my [wedding website](http://furrever.wedding/). I normally don't like to do work on Sundays, but with last week being a light week of coding, I believed it was wise to add the extra day.

## Monday, July 12th

Putzed around with Gatsby plugins and failed to get one working that would allow me to embed tweets on [Coding Catchup](http://codingcatchup.com/) - I will try this again in the near future!

Published last week's Weekly Summary on [Coding Catchup](http://codingcatchup.com/) and [Dev.to](http://dev.to/)

Worked on a new blog post about building my [portfolio](http://theryanfurrer.dev/) - coming soon!

## Tuesday, July 13th

Studied React

Added more content to my [wedding website](http://furrever.wedding/) - a [honeymoon fund](https://www.honeyfund.com/)!

![](/images/blog-025\_01.png)

## Wednesday, July 14th

Studied React

## Thursday, July 15th

Brainstormed ideas for React projects.
While this could be an easy thing to do and simply commit to building the "go-to" projects like to-do lists, calculators, etc., I want to do more than that...

That being said, I also need to start building and cannot get caught in "tutorial or course hell." That is, merely consuming content on *how* to build things, but never actually doing it.

I also squeezed in some studying of React - I found a free resource by [Kent C. Dodds](https://twitter.com/kentcdodds) who created the acclaimed [Epic React](https://epicreact.dev/) so I thought I'd give it a shot. This is hosted on [egghead.io](http://egghead.io/) - "[The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)" - I only just started, but am expecting to get through it all early next week!

## Friday, July 16th

Friday was a light night - I had a hectic week and needed some downtime with my fiancée. Regardless, I still added some more content to my wedding website - this time it was the hotel information for our guests! I think the site is 99.9% complete and can't see myself making radical changes or adding a ton more to it. I had other wedding stuff to take care of this night, which added to the light night of coding.

Today also concluded my 2nd stint of working in [dip.chat](http://dip.chat/) - an accountability group for web developers built by [Joe Previte](https://twitter.com/jsjoeio/status/1416054213809901568?s=20). I cannot recommend dip.chat enough - or even just having an accountability-buddy - some way to keep yourself accountable has been *huge* for me these last 2 months.

## Saturday, July 17th

Finished writing up this blog post and scheduled it for publishing.
Wrote out my weekly newsletter, which I am still experimenting with. I am trying out a different format this week, rather than simply making the body of email contain this same blog post.

I also continued to work on my blog post about building my new portfolio. I ran out of time to study React, but there is always next week!

## Moving Forward

This week I am trying to dive deeper into React. I'm almost done reviewing what I had learned previously in my [Udemy course](https://www.udemy.com/course/react-redux/) so that I feel more confident moving forward in it. I am also racking my brain for websites/apps that I could begin building to create not only portfolio projects, but eventually turn them into real products.

As my former passion in my life, I want to build something for musicians. It would be so fulfilling for me to provide value for the friends and colleagues who have helped me along the way by eliminating a pain-point for them. We'll see what happens in the coming months!

If you don’t already, I’d love you to follow my journey to becoming a web developer on [Twitter](https://twitter.com/TheRyanFurrer) where I’ve committed to and post updates daily! Come and say hi, I’d love to support you.


Weekly Summary: 7/11 - 7/17

![](/images/blog-024.png)

Welcome to the 3rd installment in my "Weekly Summary" series where I provide quick recaps for what I worked on the previous week to help keep myself accountable.

First, let's go over my weekly schedule:

## Current Weekly Schedule

*   **Monday - Thursday**: Study from 6:00pm - 8:00pm-ish.
    I'll go until 9 depending on how I'm feeling.

*   **Friday**: Study from 1:00pm - 4:00pm
    I like to give myself more time to study when I can and working half-day Fridays for my current job is a great way to get in some extra time.

*   **Saturday**: Study from 7:30am - 9:30am
    I give myself at least 2 hours on Saturdays even though I can often get in more time.

*   **Sunday**: Day off
    This is my day to recoup, get energized, and prepare for the coming week!

This all works with my personal goal of studying/coding 2 hours per day. I would love to do more but I don't have the mental bandwidth throughout the week to do more, typically.

I don't always get to stick to this schedule but I try my best to do so.
Now then, let's get to it!

## Monday, July 5th

Monday I was off as Independence Day was observed and it's a national holiday in the US. I caught up on some emails/newsletters that were piling up in my inbox, posted last week's "Weekly Summary," and sent out my first newsletter via Revue! While this contained last week's "Weekly Summary" and I don't have much of

I also built our a link sharing page on my website that I have placed in my social media channels that links to my portfolio, blog, twitter, etc.

## Tuesday, July 6th

Friends from out of state were in town so I took the night off and enjoyed dinner and catching up with them. While no coding was done, I thoroughly enjoyed the White Castle we ate 😋

## Wednesday, July 7th

Wednesday was a bit tough for me...it was not the night I planned on having as I had to stop what I was doing to be there for my fiancée through a panic attack which also means being there for her the rest of the night.

Before that, however, I got in some studying React. Not a very productive night but things happen and you just have to adapt.

## Thursday, July 8th

Thursday was fun! I got new switches for my mechanical keyboard so I installed those before diving into studying React.

![](/images/blog-024\_01.jpg)

## Friday, July 9th

Friday was a fun day for me! I messed around in React and Gatsby a bit to learn it more in-depth. While I don't plan on using Gatsby for future projects on my portfolio, Coding Catchup is built on it so the more I learn the better, in my opinion.

I also created my own blog cover images to be more personalized. Though basic, I'd prefer using my own that I created in Affinity Designer. Previously I was using [CoverView](https://coverview.vercel.app/) by [Rutik Wankhade](https://rutikwankhade.dev/) which worked well, but I wanted to create something I had total control over.

## Saturday, July 10th

On Saturday I had to do some updating to my Wedding website, however, upon opening VS Code I saw how messy everything was. The HTML was not as semantic as I'd like and the SCSS was a garbled mess, so I chose to rewrite it from the ground up!

I spent Saturday only worrying about the mobile site as making it responsive wouldn't take too much.

## Moving Forward

I have to finish my wedding website, that is first and foremost, as our wedding is in October and invites are going out *very* soon. Other than that I plan on doing some more writing this week and actually diving deep into React again, life-permitting.

If you don’t already, I’d love for you to follow my journey to becoming a web developer on [Twitter](https://twitter.com/TheRyanFurrer) where I’ve committed to and post updates daily! Come and say hi, I’d love to support you.


Weekly Summary: 7/4 - 7/10

![](/images/blog-023.png)

Welcome to the 2nd installment in my "Weekly Summary" series where I provide quick recaps for what I worked on the previous week to help keep myself accountable. This is being posted a day later than usual as 7/4 was Independence Day for us Americans.

First, let's go over my weekly schedule:

### Current Weekly Schedule

*   **Monday - Thursday**: Study from 6:00pm - 8:00pm-ish.
    I'll go until 9 depending on how I'm feeling.

*   **Friday**: Study from 1:00pm - 4:00pm
    I like to give myself more time to study when I can and working half-day Fridays for my current job is a great way to get in some extra time.

*   **Saturday**: Study from 7:30am - 9:30am
    I give myself at least 2 hours on Saturdays even though I can often get in more time.

*   **Sunday**: Day off
    This is my day to recoup, get energized, and prepare for the coming week!

This all works with my personal goal of studying/coding 2 hours per day. I would love to do more but I don't have the mental bandwidth throughout the week to do more, typically.

Now then, let's get to it!

## Monday, June 28th

At the beginning of this week I committed to finishing my portfolio site so I could focus hard on learning React. I began by completing the header for my portfolio site and added the contact form which still desperately needed styling but I had to go to bed before I could get to it 😴

## Tuesday, June 29th

Tuesday was a *very* productive night despite not originally being able to focus or necessarily feeling like working after work. This included:

*   Adding polish to the header call-to-actions (CTAs)

*   Added Favicons

*   Checked over that all links worked as expected

*   Wrote summary about Coding Catchup project

*   Styled contact form and made it response

*   Added a success page visitors will be greeted with after sending me an email via the contact form and styled it to include links to the home page, my Twitter, or my Blog.

How did I get all this done despite not feeling like it? [The 5-minute rule](https://twitter.com/TheRyanFurrer/status/1410059609105178629?s=20).

![](/images/blog-023\_01.jpg)

## Wednesday, June 30th

Wednesday was an ambitious day for me as I was working on adding a couple of things:

1.  Skip-to-content link for accessibility

2.  Creating a hamburger menu for the mobile navbar

Overall I still got work done despite having to crunch it in between therapy and watching Initial D with my brother. JavaScript is not a strong point for me yet so I was a little intimidated making the mobile menu work as I'd never built one before.

Nevertheless, I was determined to get it done so I could learn.

## Thursday, July 1st

I completed my hamburger menu with ease! Was it the prettiest thing in the world? No. Was it the fanciest? No. Did it work? Yes.

Something I have continued to remind myself in building this portfolio is to go for progress, not perfection otherwise I'd never get it done and I'd never get back to learning React.

That said, I was planning on iterative updates to the menu to make it better as time went on and I learned more. I also started running lighthouse audits to see if I I was missing any major things like missing a meta tag in my head.  I also got the navbar to be responsive and not show the hamburger menu on desktop.

Lastly I submitted my mostly "finished" project to my peers in my [dip.chat](http://dip.chat) group for feedback and suggestions as they are all much more seasoned devs than me which leads me to Friday...

## Friday, July 2nd

The first thing I did was remove the "Skills" section from my website based on feedback from the people in my [dip.chat](http://dip.chat) group. I will 100% take their word for it and was not attached to it - I merely put it in there as I've seen others do the same.

In case you are interested to see what it looked like:

![](/images/blog-023\_02.jpeg)

Again, it's nothing I'm too worried about losing. What took more effort was un-doing the work I had done the night before in adding a mobile hamburger menu as I no longer needed it due to having more space in the navbar on mobile.

After that and some other tidying up I felt it was ready for exposure to the entire world so I moved this page to be my index.html and [Tweeted](https://twitter.com/TheRyanFurrer/status/1411129302662402052?s=20) about it!

![](/images/blog-023\_03.jpg)

If you'd care to check out my site please do - [The Ryan Furrer](https://theryanfurrer.dev/).

## Saturday, July 3rd

Did a couple of light changes to the site and wrote the first draft of this blog post and began working on a second. I also added a newsletter signup to [Coding Catchup](https://codingcatchup.com) so if you'd like be notified of new articles of mine via email, now you can be!

## Moving Forward

I am *very* excited to get back to learning React so I can begin really building with it. I also want to begin working more with APIs as I've barely dipped my toes into them.

If you don't already, I'd love for you to follow my journey to becoming a web developer on [Twitter](https://twitter.com/TheRyanFurrer) where I've committed to  and post updates daily! Come and say hi, I'd love to support you too.


Weekly Summary: 6/27 - 7/3

All Blog Posts

Keep up to date with new posts via my [newsletter](https://ryanfurrer.beehiiv.com/) or [Twitter](https://twitter.com/ryandotfurrer).


All Blog Posts

Blogging about web development one article at a time.

Another Modern CSS Reset

Another Modern CSS Reset

Designing and Developing My Portfolio - v3

Weekly Summary: 7/18 - 7/24

Weekly Summary: 7/11 - 7/17

Weekly Summary: 7/4 - 7/10

Weekly Summary: 6/27 - 7/3

Like what you've read?