When I first looked at this, I was completely terrified. Thought it was impossible. After going back and doing the 7 flexbox exercises, the sense of confidence I have looking at it again is wild. It'll still be finicky for sure, but 100% doable.
I do feel like there are some things I'm quite shaky on - particularly around relative vs absolute sizing, what exactly the flex commands do (flex: auto, flex: 1, etc) - but probably an order of magnitude more confident at my ability to complete this project. Which is pretty cool!
And most of all, I think I'm coming out of this HTML/CSS section with much more confidence in how to actually build/lay out a website. Like, for the RG BLD Tools, I know how I would mock up the website I want. That might even be a good way of starting out - although that design would be very likely to change, I'm sure. But I know how to make it look the way I want - the next stage would just be figuring out how to use JS to make it do what I want.
Ok, spent a bit more time reading about flexbox, playing flex zombies, and I think I've got a decent sense of how things should work now. Definitely going to come back to flex zombies, but for now let's take our first stab at this thing.
- Set up basic sections in HTML (header, splash, information, quote, call to action, footer)
- Header
- Splash
- Information
- Quote
- Call to action
- Footer
Not much to report. Header set up without too much fuss.
Pretty straightforward - an image placeholder and some links. Aaand done, not much to write home about :)
This one will be a mite more complicated, but not the end of the world.
Think its going to be 2 items in the row, with first in a column layout.
Having pretty major issues with this - have asked about it on the Odin discord, and will come back to it when I hear more/when I'm out of other things to do. For now, onto 3!
So, I stopped doing the sections part-way through. I definitely learned a phenomenal amount doing this, though, including:
- stronger understanding of flexbox, and particularly width/height stuff
- merits of organising stacked components vertically vs horizontally
- the fact that semantic HTML exists (VERY stoked to use this in the next project)
- better to use outline instead of border, to avoid creating finnicky sizes of elements
- better understanding of box model (specifically, margin doesn't inherit the CSS of the element creating it)
- heuristics around when to use % units vs px units
- not to mention, the existence of a whole bunch of other units as well - still have a video I need to check out in this regard
- how to surround elements with a border to much more easily visualise boundaries and how boxes are interacting
I'd be remiss not to mention that a user in a coworking stream I frequent was kind enough to field a NUMBER of my questions, and has not only helped to resolve some difficult/confusing issues, but given me guidance around design and problem-solving approaches.
I think I spend a lot of the learning journey trying to figure out what "best practice" is, or mentally debating the merits of different approaches. So being able to get informed answers to my questions around that is REALLY helpful.
Probably more as well, but that's good for now. Definitely coming out of the HTML/CSS fundamentals sections so far with the sense that I could actually build the layout of a website - which was probably 50% of what was scaring me about building a website in the first place.
On to CSS now - I'm excited!