Created my first "nav bar" would appreciate it alot if anyone could look at the code and point out my faults

Hi, I just started learning a few days ago, and am going at a steady pace. So recently after going through some lectures and FCC I decided to code for a nav bar, now I am completely new to coding, my background is a doctor. So, I’d really like it and appreciate it if anyone would look at how my nave bar looks and how is the code for it.
thanks!
file is in the link.
https://www.filehosting.org/file/details/758921/My%20navbar.zip

How about sharing a codepen.io link of your code?

1 Like

Sure, here you go.

I just made my pen account.

This is a great start, really nice design by the way, however now would be a good time to look into scaling your navigation bar to make sure that it looks good regardless of the size of the screen. As of now if the screen size changes you run into a couple of problems, a good fix for this would be to include some media queries to make sure that as the screen size change both functionality and presentation stay the same (or are optimized for the screen size i.e. a drop down menu for smaller hand-held devices).

Thank you! For the response. Yes I am looking into that I have watched one lecture on it. I’ll be reviewing and implementing that in a day or two.
How is my code structure?

For your first navbar this was much better than my first navbar. If I was to suggest one thing I would keep home in the left part of your navbar. Other than that, this is awesome, very clean.

Code structure looks good, just a word of warning many of your styling is done using tag selectors meaning that they will apply all across your page for those specified tags. To avoid any unwanted design problems try making classes for your <li> <a> and <ul> elements, as I am pretty sure you’ll have at least one or two of each throughout the page.

Hello! You could improve your nav bar a little bit by deleting “font-weight” style and putting this line into a styles: transition: 1s;

So that your new code looks like this:


a:hover {
	background-color: cyan;
	color:#333;
}

a {
        transition: 1s;
	text-decoration: none;
	color: #fff;
}

Okay, I’ll try that. That’s a new property. I’ll see what it does? :stuck_out_tongue:

1 Like

Yes, I am wary of that I just had a nav bar in my mind right now. Thank you!

Code structure looks good. Use of the semantic “header” tag. Visually the design is simple and clean. Just a few tips:

  1. You noticed that nasty whitespace around your navigation bar? I had the same problem and after some investigating with chrome tools I found that it was the <body> tags fault. In addition to your own css styling, browser add their own style rules to your page by default. Some browsers add default margins and padding to certain elements.

The best way to fix this is to use a “css reset”. The generally counteract the default browser style. Another way to fix your particular problem, and this is the one I would go with for now, is to set your body tags margin to “0”:

body {
  margin: 0;
}

I would recomend you use a “css reset” for anything more than simple experiments and practice code.

  1. You could be more semantic with the navigation. Instead of using a div to wrap your “h1” and “ul” tags, why not use a <nav> to do the same. Its more semantic. Some People prefer to nest their navigation bar in the header element while others prefer to leave them as siblings of the header element (i.e. at the same nesting level) this seems to be more a matter of preference and up to your discretion. But Keep trying to make your code as semantic as you can manage. It really is important, your code looks better and easier to follow as it get bigger.

I was having trouble with the white around my bar, thanks! I’ll look into that. Okay points noted. Thanks! Again.

1 Like