So I just finished my landing page and thought I would go through my learning experience. It took me a couple full days to get to grips with some concepts. Take a look and let me know what you think.
https://codepen.io/opezzini/full/EqYqRG
Nav Bar
I started with isolating the nav bar and figuring out how the example page worked. Doing research is seems a couple other guides and tutorials use float or display:inline. This forced me to research these principles. Looking at the FCC example, I like the flexibility of flexbox as it doesn’t seem as “janky” as the other two options.
The Rest
The rest of the page was a case of familiarising myself with flexbox functions, This was a very handy guide! Through trial and error I go the page to mostly look the way I want and I am a little more confident in page layouts using them.
Questions
-
I initially coded the nav bar neglecting position: fixed; I then added it in later but now it causes covers some of the top screen. I have fixed this with a top margin for wider screens but as soon as crop into iPhone sizes it starts creep over. This also means the nav bar links lok like they take you to the wrong section due to the top being covered. Does anyone have any suggestions on how to fix this?
-
How taxing are flexboxes on the browser? I feel like you can do a lot with them and can see myself putting flexboxes within flexboxes to build sections of my site but I’m not sure if thats the best way to approach. I have seen that for modern day CSS you should be using Grids for overall page layout and flexboxes within that.
-
Typically whats the smallest dimension that you should build your site for?