Rework of project. Lots of questions

1

Hello, so i have finished this certification project:
https://codepen.io/SimonasZ/pen/XWmXwEM

I have noticed that it works terrible on other screens, and maybe my code was not the cleanest. So before moving forward i have decided to rework all of my projects, starting with this one. Need to develop a good understanding before jumping into JavaScript.

Link to new project https://codepen.io/SimonasZ/pen/qBOaoWm?editors=1100

Questions:

  1. Why does my Navbar menu is in wrong direction? It should go like -> About Projects Contact. In previous code i have used FLEX but i thought that it should be solved simplier.

  2. How can i add min-height for text in Navbar menu? Tried to wrap it in PARAGRAPH but it didnt help.

  3. What is the most logical way to keep Navbar menu (text) to be verticaly centered? As far as i googled it seems that vertical-align is a command that does not work.

  4. Other things that you could point out. Just starting to get understanding on how to start and develop a correct code.

2

Because you are floating each individual <a> to the right. So the first one goes to the farthest right, then the next floats right but stops before the first one, and the third one then floats right but stops before the second one.

3

Hi @bbsmooth , yes, i understand the point of that. But what are the solutions? I have read somewhere that adding a float:left (in this case in navbar) would solve the problem.
I could add text-align: right, but then im unable to center it vertical.

4

I’m not exactly sure what you want to do but I think the first step is to wrap all of the links in a <div> and then position the div the way you want it. Also, do not use ‘vh’ units on font sizes. The user should be able to control the text size regardless of the browser height/width.

5

I used ‘vh’ for units size, so it would change together with the screen size. But probably you’re right.
And i tried to avoid ‘div’ as i think there are solutions without it? Display: inline-block would do the same isnt? And “nav” tag is a block itself, so why to add another block with “div”?

6

There is nothing wrong with adding a <div> around those links to help with styling. Most nav menus use a list so they have a <ul> wrapped around the <li>s to help with styling. It really depends on what you are trying to do. If your design is responsive and you don’t need that extra <div> then that is great. Regardless, it sounds like you are looking for a challenge of not using a <div>, so I think you should accept that challenge head on and not ask for the answer here quite yet :slight_smile: