<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<!--
Hello Camper!
For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding!
- The freeCodeCamp Team
-->
<div id="page-wrapper">
<header id="header">
<div class="logo">
<img id="header-img" src="https://upload.wikimedia.org/wikipedia/commons/4/46/Keyboard_NIHAR.png" />
</div>
<nav id="nav-bar">
<ul>
<li><a class="nav-link" href="#Models">Models</a></li>
<li><a class="nav-link" href="#Demo"> Demo </a></li>
<li><a class="nav-link" href="#Pricing"> Pricing </a></li>
</ul>
</nav>
</header>
<section id="hero">
<h2>Handcrafted, home-made masterpieces</h2>
<embed src="https://www.youtube.com/watch?v=CKSBdR_UiJE" autostart="false" height="30" width="144" />
</div>
Ok guys I’ve know advanced quite a lot in the HTML and CSS
However for the CSS of the nav bar, I don’t know how to insert some space (padding ?) at the bottom of the fixed position nav bar so that I can scroll the webpage without interfering with the nav bar.
Your navbar is fixed and has a size. The section you’re going to wants to go to the top but, you have a navbar there. You may want to think about adding some padding to the top of the section you’re going to.
I’ve added some padding-top to my #Models section, so now it’s better, but still when I scroll down the webpage my navbar still interferes with the content.
Any idea how could make sure that I can scroll down properly? Right now I’m stuck…
Hi @Theoask, your html looks fine. It’s the css that needs some work.
First: each flexbox in a webpage is a normal box but with flexible items in it. So, if you want the items in the nav to be flexible, you have to give the direct parent the display:flex;
You can put one flexbox inside another. So you could use flexbox to arrange the items in your header, but also to arrange the items in your nav. Just make sure you turn the right box into a flexbox.
Another thing: most boxes take the size of their content. No less, but also no more. If the items in a box are small, without padding, then the whole box will be small and the items will be close together.
That’s something you don’t want in the navigation of a page. So make sure the list items are large enough to see and to click on with a mouse or finger (tablet). Use padding to do that. The padding area is clickable! A margin isn’t!
It really helps to put this code on top of the css while you’re working on it. Makes you see what you’re doing.
It’s just the effect of an element taken out of the normal flow. The other elements don’t know it’s there. It’s like none of them is able to notice the header.
You’ll have to tell the other elements, in this case the box around the main part of your page, to put some extra space between themselves and the top of the page.
Without the fix, they would just keep a little bit of space between them and the header.
Ok. I’ve set the width of the header, but in pixels its hard tio find the right value. Should I use another type of measurement, such as percentages or rem ou other?
How can i use “media” syntax so that automatically reshapes the boxes and elements resize to the good size (responsive design) on tablets and smartphones?
Should I use “media” syntax on each individual container or boxes or just on the header?
Maybe a “wrap” property I read too ?
But right now I’m still trying to figure out how to add some margin to the other elements than header so that the nav bar scrolls the right way, without interference
I’ve struggled with flexbox for a long time while learning it in places like this.
And then I used it in a real website. I’ve never in my whole life made so many mistakes in such a short period of time, never learned so much and never enjoyed making mistakes before building that website.
I googled everything problem I encountered. Learning to code is like learning to become a carpenter. You have to practice.
Flexbox isn’t easy, neither is position, grid or the cascade itself. But if you keep using them, you’ll get there.
In case you’re interested, here is the website I rebuild. It was old and I modernised the html, or most of it. And I’ve written a new css. It wasn’t responsive before, the whole thing was more than eight years old. Some of the pages were styled by turning them into a table.
So it was lots of work, but lots of fun also.
It looks better, but still needs a lot of work in the css.
I can’t help you with font awesome as I’m not familiar with that.
I think what you really right now is to sit back and think what you want in each box on that page. Don’t think about techniques like flex, but just about the layout.
Do you want the items next to each other or on top of each other? How much space do you want between items? Do you want the items to almost touch each other with a small margin, or do you want them to be on either side of a wide box? Is it important that the different items are on one line? Or not. (think of the header: logo and nav are on one line, but is that important?)
Figure out which boxes there are and which one is an item in another one. And decide how you want all those items to behave inside the box that is their parent element.
Flex is only useful if you have a box with more items and you need to arrange them.
Float comes in handy if you only need stuff to be on one or either side of a box.
And grid will help you to create a whole layout with rows and columns, but if you’re not familiair with it, don’t use it for now.
The best tool in web development is often a pencil.
Just draw a sketch on paper with the boxes. And draw a sketch of the most important boxes, like the header. And then ask yourself which technique is going to help you to get everything in place.
