I kind of “finished” my product landing page but it looks very messy.
I think I got confused with all the positioning (when should I use position relative / position absolute / margins to position an element?)
Should I use flex to position content inside divs? (like h2 on top, text in the middle and button at the bottom?)
Should I use px or % to set a width? Or even vw/vh or em? Should I also use it for heights?
The worst part was the responsiveness. My logo resizes in a weird way and everything was positioned absolute or with margins looks terrible once your resize the window.
I don’t know which lesson I should focus on so I can practice because it looks really bad. And I may practice positioning and margins or flex but I never know what are the best uses of these rules.
I also feel that I have tons of styles overriding themselves and I lost track of what does what.
Flexbox is a very good way to make flexible web pages. Use flexbox for anything related to putting elements in columns or rows.
The most common container in CSS is a div
Padding is used to make a space between the edge of a container (Parent) and the content of that container (Children). margin is used to create space around the edge of an element.9
Hi @tsarinaspades, @michaelnicol gave good advice and I don’t have anything to add to it.
You didn’t say if you had any problems understanding flexbox but if so, I found the following to be a big help for me in understanding it. https://flexboxfroggy.com
And at the bottom of that page is very small font is a link to Grid Garden
I understand how flexbox works. I just don’t know when to use it exactly (for boxes I know but for simple text I’m not sure (like text inside a box)).
Also I never know how I should separate elements between eachother. It’s like I don’t know if I should use margins or position relative if I want my first element to sit further below another element.
As you can see my codepen, it’s pretty messy. The flexbox works perfectly, it’s more about spacing things or aligning them.
I think I understand what you mean now. Like for text inside a box how would you add a little padding between lines to make it easier to read…like using line-height: 1.5em;
Someone wrote a good explanation the other day regarding questions like yours. I’ll look for it and link it if I find it.
Think of an HTML like a sideways skyscraper. This would be like the <body> or <main>
The floors would be containers/ ways to divide up the HTML into main sections. This could be a footer, navigation bar, etc.
Things inside of those floors can be sub-containers which represents rooms. This could also be another div or list element.
Everything I have mentioned so far is a block element. They are designed to contain other elements, like how a block <ul> contains a inline <li>.
Items inside of the rooms/ sub-containers can be inline elements like text, images, links, etc. This would be like the decoration in a room, on a floor, in a skyscraper.
Use flexbox to manipulate those floors/ containers on an HTML. You can flex them into rows, columns, or give it the ability to wrap or not.
If you look at my profile picture, it is next to this body of text that includes my name. I could use flexbox to put them into a row using a container that surrounds both.
Hopefully this made sense
Notes
Please hit the reply button or I do not get notified.
Imagine you have to make a nested-grid; say, each box has to be 25% of the device’s width, and then INSIDE that box, there are to be 4 elements. You can make each of the boxes inline-flex and then each of the elements inside the boxes will have flex-item properties.
Basically, a inline-block is a flexbox inside of another flexbox grid.
Now lets replace your <ul> with a div and put 4 boxes in it (like with the <li>'s). Each of those 4 boxes would then be using inline-block if you were to use flexbox again.
Since the Nav bar is the first layer, I suggest using display: flex.