#PixelFix: Design & Code Fixes (Episode 1)

I’m so excited to introduce to you a new series on my channel. It’s called #PixelFix: Design & Code Fixes—where I help fix your designs and code problems. Make sure you watch the whole episode because some of the code and design issues that your fellow subscribers might have will also help you out too. If you want to be featured in a #PixelFix episode, make sure you’re subscribed to my email newsletter. You’ll join over 1,000 fellow design, code, and tech lovers. I’m still working out the details of this series. But, I’ll announce all the details to my mailing list first. You’ll also get a free HTML and CSS worksheet when you sign up! So without any further delay, let’s jump right in!

I received a lot of great feedback on my video Responsive Navigation Menu HTML5 & CSS3. If you haven’t watched it, go watch it now and then come back to this video.  I also had a few subscribers asking several questions regarding issues in their code. A fellow XO PIXEL YouTube subscriber, Jordan, reached out to me and wanted some help with his code. Here’s what Jordan wrote:

Jordan’s website design is great. I love how it’s minimalistic and simple. I also love the pink gradient background. As I was reviewing the code, I also saw areas where if he applied the suggestions that I’m about to share with you guys, his website will not only be responsive but it will provide an awesome user experience for his website visitors. Now, it’s time for the fun part—I’m going to first go over Jordan’s original code and then I’ll present my edited version of his code which helped make his menu and entire website responsive and semantic. Now, let’s #PixelFix this website!

Jordan’s Website Design

Looking at the homepage of Jordan’s website, I noticed that the navigation is placed below a large logo image. There’s also large text placed below the navigation and logo (as is with most websites) and the footer is placed at the bottom. Visually, everything is placed is the logical flow of most websites. This is important for your website visitors because it makes it easy for them to navigate your website. This is also good UX design.

The Problem

Now, when I try to re-size the website, that’s where the main problem lies. The links in the menu are overlapping instead of going into their responsive navigation as was shown in my tutorial. Time to check the code.

Jordan’s Code

The HTML

Here are some problems that I noticed with the HTML:

  1. Too many Google Fonts (slows down website & lacks visual balance)
  2. Wrapping the nav in the “wrapper” tag
  3. Wrapping logo image in an H1 tag
  4. No link for the menu’s “hamburger” icon
  5. No anchor tag in the menu list
  6. Using a footer div instead of footer tag

Here are some solutions to fix the HTML:

  1. Use maximum of 2 Google Fonts
  2. Move menu to very top and make t full-width outside of “wrapper” div
  3. Use a wrapper on the rest of the website (logo to footer)
  4. Wrap logo in div tag & give it the class “logo”
  5. Add anchor tags inside list tag
  6. Use only the “footer” tag

The CSS

Now, let’s take a look at Jordan’s CSS code so that we can see if we can address the stacking menu links problem and correct any other code problems for Jordan’s website.

Here are some problems that I noticed with the CSS:

  1. Starting the document with a declaration
  2. No Comments
  3. Using body tag tw ice
  4. Duplicating declarations
  5. Excess use of padding
  6. No global font declaration
  7. Excessive declaration use
  8. No media queries for the nav tag

Here are some solutions to fix the CSS:

  1. Start document with the selector “body”
  2. Use body tag to apply global styles
  3. Use comments
  4. Apply padding to the main containing div and tags
  5. Minimize declaration use
  6. Add media queries for nav tag

Final Website

Now that I’ve taken a closer look at Jordan’s code, I was able to apply the solutions that I provided above for both the HTML and CSS code. Be sure to check out my blog post on How To Write Clean & Organized CodeJordan’s website is fully responsive–his menu can now be viewed on both desktop computers and mobile phones. The logo is also notably displayed at it’s highest resolution because it’s scaled to its correct proportions. Jordan’s website now uses just two Google fonts, because we want to keep page loading time to be fast. We also want his website to have a high level of visual harmony. Overall, the website looks great, and it’s responsive.

I hope these tips and suggestions help you in your future website projects, Jordan!

Now It’s Your Turn!

If you have any questions or comments, leave them in the comments below! Subscribe to my YouTube channel for more great videos just like this one.

Marisa Blair is a front-end web developer and graphic designer based in Toronto. When she's not writing for her blog xopixel.com, she's making design & tech videos for her YouTube channel.

Leave a Reply

Your email address will not be published. Required fields are marked *

More On XO PIXEL