This is one problem that keeps on coming back to me every time I try to move on from the console.log/alert(...) blank-page JS to JS that works on a fully styled and complete project.
I know the HTML and CSS but I just can’t seem to get how to make it all work in sync without having to rename every tag’s class, wondering if that class name is the right one, having to fix in a new div/section wrapper in there and another and another only to start all over again.
For example, here’s an image I saw and felt it would make a good practice project because I thought it wasn’t going to be too hard for a novice.
To say I was wrong would be an understatement. I spent days:
- trying to get the BEM names right
- trying to arrange the CSS into sections
- putting in as many wrappers within wrappers … within wrappers just to “semantically” style a HTML element via CSS
- constantly worrying if I was getting the vertical rythm right
- starting over
- wondering why I seemed to be wasting my time and why it was so hard
And after all that and more I came up with this mess:
index - baseline with classes (itr 1).html (3.4 KB)
index - baseline.html (2.1 KB)
index.html (3.0 KB)
theme.html (1.2 KB)
theme2.html (2.7 KB)
theme4.html (3.5 KB)
theme3.html (2.9 KB)
trial n’ error.html (3.4 KB)
theme5.html (3.6 KB) This is the one that “works”
buttonslinks.css (627 Bytes)
grid.css (368 Bytes)
grid5.css (432 Bytes)
main.css (932 Bytes)
reset.css (1.2 KB)
theme.css (1.4 KB)
theme5.css (1.5 KB)
typography.css (105 Bytes)
My intention was not really to turn this into a code review but I don’t know how to explain it properly without showing you guys an example. I hadn’t learned flexbox yet so that’s why I didn’t use it.
So while surfing the net searching for yet another tutorial a few days ago after I had dumped yet another site recreation project ago until further notice, I came across this gem - 10 CSS3 Projects: UI and Layout. It checked all the boxes concerning flexbox, UI in general and the projects seem to intensive enough for me to glean some kind of best practices knowledge on how to make the HTML and CSS work without having to go back and forth numerous times. Unfortunately, it’s a free trial that requires a credit card and I’m unfortunate enough to be an 18yo in a place that doesn’t use credit cards and they’re not accepting the local cards.
I’ve also tried following the Design + Code my Personal Website in 12 hours tutorial and after 3 folders and numerous retries trying to do it my way, do the flexbox better than he did, and trying not to care about BEM, the project has been postponed until further notice.
Long story short, do you have any tutorials, advice, explanation, todos, not todos, etc.?
Thanks.
) or I get stuck and I’ll be able to point out the problem areas more easily without needing you guys to download files.