I'm Stuck In A Rut

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.

Hi,

Looks like your theme5 is pretty close to the “mockup” image. :slight_smile:

The menu and the buttons might be slightly tricky, but you’ve come to the right place for assistance.

It will take some time to digest your post. I hope someone can give advice for your last question sooner.

(Hope you don’t mind I tried you theme5 using your posted picture as Luke.)

2 Likes

[quote=“Erik_J, post:2, topic:257269”]The menu and the buttons might be slightly tricky, but you’ve come to the right place for assistance.
[/quote]

Yup. I got some pretty great answers last time I asked for help.

Not at all. It’s actually the same image I used.

Thanks

2 Likes

When it comes to flexbox the attached sheet has been gold for me. I’m sure it’ll help you too.flexboxsheet.pdf (955.8 KB)

2 Likes

Nice @c3williams, thanks for posting that “Flexbox Cheatsheet Cheatsheet”, good to have!

I think credit for it should go to Joni Trythall at http://jonibologna.com/

Off topic)
An Adobe Illustrator PDF, but with a look like it was made by a designer using Ms Powerpoint.

3 Likes

Indeed it should. I didn’t make it!

2 Likes

I just became “aware” of Codepen’s Project Editor and finished reading a considerably illuminating BEM tutorial so I think I should try and recreate the mockup image using flexbox this time (thanks @c3williams).

Maybe I get done before you, or somebody else, posts a review and the result is similar (that would be awesome :smile:) or I get stuck and I’ll be able to point out the problem areas more easily without needing you guys to download files.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.