Technical documentation passing 12/16

#1

I’m having trouble with the navbar and layout parts of the project. I already typed out the codes, but the navbar is overlapping on the main section.

I think a grid could help and so could giving each link its own box.

Edit: Thanks to JanEricWalther for helping fix the nav problems. Now for the layout.

#2

Hi,
the navbar is just a typo, it asked for an id of navbar, but you used nav-bar.
Also you should put the nav inside of the body as it’s part of the visible page.

As for the alignment: It’s kind of hard for me to read your mark up as it’s formatted weirdly. I would probably use flexbox to align the nav and the main section as row.

Hope that helps.

#3

Thanks, that helped the nav part quite a lot!

#4

Hi, there are a couple of issues with your page. I will go through them one by one and then suggest what to do next.

  • Codepen has a code analyser. Use it! It is the little triangle pointing downwards in the upper right corner of the editor window. It can help you find first problems. You should always use that first and correct your mistakes
  • Check your code with w3c to make sure your sections, divs etc open and close correctly. Your code had lots of mistakes with that. Copy your code and paste it here: https://validator.w3.org/#validate_by_input

A bit more detailed things now:

  • there is a div wrapped around nav from line 5-17. Why?
  • There is another div in line 3-4 without any function, it seems, and the same kind is right after the <body> tag - which is also in the wrong place!

Important: In codepen, you don’t need <html>, <header>, <body>, because your code is wrapped into another html page. You can start right away as if you were in <body>.

  • I don’t know if the <h2> around the <li> is sensible. I would style the list elements with css, because it might confuse assisted readers.

I corrected your sections. There were a lot of wrong open/close issues with divs, headers and sections. You can see that when posting your page to w3c (above). I did not read them though.

Now the CSS file:

  • You cannot use html tags like <header> in css. I took all out.
  • I did not read through all your css, I only adjusted the two main boxes.
  • as per the structure proposed, your site has two core boxes: nav and main
  • people suggest that you shouldn’t apply flex on <body> - I don’t see a reason why not (even the holy grail does it!).
  • so we set <body> as display: flex; flex-direction: row; with two elements in it. these two elements should be displayed side by side.
  • now nav and main become flex-children of body. that means we need to see how they fit next to each other!
  • i am styling them in a way that only nav has a fixed width (that is a choice - you could do it differently). then main will take the remaining space, because we did not define anything.
  • with the media query, we are making sure that when the viewport is narrower than 700px, the flex-direction of the body will change. now main and nav are no longer row-oriented (side by side), but on top of each other. and so that it looks a bit better, we also change the width of nav to 100% (whatever that is - the maximum available).

I typed it here for you:
https://codepen.io/beiti/pen/PoqOrqJ

I am not sure how you went about writing this pen. My suggestion: Get the technical requirements done before you do styling before you do content. :slight_smile: that way you have less to read through and verify and check!

Good luck, feel free to ask and don’t just copy my solution!! Look at it and notice the differences so you learn something! :slight_smile:

Sebastian.

2 Likes
#5

Sebastian- I’m pretty new at coding. I looked at your solution and I did notice a few things. I prefer to do the technical code before style, but I was trying to see where things were.
I mostly had the div to put it into a green box in an effort to try and see where the nav element was, same with the pink link text. I thought div box container was needed, but if it’s not, I have no problem deleting it.
As for h2 around li, I mostly had it because the text for the links was tiny.

#6

Everyone has to start somewhere! Good effort! :slight_smile: Go ahead and keep on learning.

Using div to put a box around something isn’t a terribly stupid idea. You can make that easier, though - because you can style every html element. If you wanted to achieve something like that, use your css file and add a box to nav:

nav {
   border: 1px solid green;
}

It will show you the element’s border in green (or use another color! :wink: ).

The h2 around li: You should style elements with CSS. It is good practice to keep content + structure on the one side, and the design on the other side. Imagine a person that is blind and uses a special software to translate your website into braille. That person would be presented a very long heading of the 2nd level (h2!) that contains links. Would be quite confusing, wouldn’t it?

Instead, give each li a class - e.g. like this: <li class="nav-link">...</li> and style them with css:

.nav-link {
   display: block;
   padding: 5px;
   font-size: 24pt;
   background: orange;
   /* and whatever else you like */
}

Good luck and heads up! :slight_smile:
Sebastian.

#7

I see! I’ll fix those up and hopefully I can pass that test.

#8

You will pass that test! Keep on thinking and trying.

I often create micro-examples in codepen if I want to explore a function of css or html better.
E.g., I have a very limited (and ugly!) css flexbox playground, but it is enough for me to see the flow of flex-children and understand how they behave on different levels of depth.

All the best,
Sebastian.

#9

That’s a really good idea! I should try something like that. I have made templates with all of my passed test projects so that in the future, I don’t have to start from scratch. I can just plug away as needed. And as I learn, I can add to them and replace things as needed.
I also got rid of h2 around the li because I don’t think I need it now.

1 Like
#10