Advice on CSS structuring of elements/pages

Hi There

I was wondering if anyone could please give me some advice on how to better understand the basic structuring and implementation of items on CSS, I seem to be having a hard time grasping the way the ‘how’ of structuring your elements, I’ve been working on the Survey project, and it’s becoming quite evident that I don’t know how to truly understand structuring in CSS, my hunch is to focus on flexbox and Grid, but I sort of feel like that may be cheating or I may be missing the underlying issue…

Any help would be greatly appreciated.

Much love!

Can you give us a link to your codepen for the project so I can take a look at what you have so far? Thanks!

Check out the MDN CSS Layout Tutorials. It gives you a good overview of layout tools available to you.

Think everything in terms of boxes. Every div. Every page can be made in terms of boxes.

And you use padding/margin/flexbox to achieve their positioning inside each parent box.

Hell,. even this message box…


---box-----------------------------------
| ------------  -----box------          |
| | image    |  | kerayfrm02 |          |
| -----------   --------------          |
|               -----box--------------- |
|               | my message          | |
|               ----------------------- |
|               -----box--------------- |
|               | img img img img     | |
|               ----------------------- |       
-----------------------------------------

Well that’s the thing, I deleted all my CSS so I could start over, as I felt I was just guessing my way through it all… but I do have my one and only project complete, you can take a look at that one, but I feel it would be the same mess as the other, but any feedback on how I could better structure not only my css, but my approach would be amazing!

https://codepen.io/entheogenick/full/LogwpL

Thank you, I’ll definitely be checking that out today! Greatly appreciated!

Thank you, I’ll try adapt this method of thinking and application, greatly appreciated

Well some immediate things I noticed:

Click the tidy html button. Your tags do not follow any coding standards. (ie spacing pattern)
You have <br> tags. Remove them all & only use CSS for spacing.
You have <p> <div> <br> tags as children of <ul>. Only <li> can be children of <ul>.

Okay cool, thanks for that, I’ll try and fix that all up, is there a link you could possibly share that could inform me of the standards to try adhere to?

Nothing is required., but many of the things shared in this link are pretty standard:

It’s primarily to make your code more readable.

No dude, I absolutely get it, the last thing I want is to be “One of those guys” that make other coders work more frustrating! Thank you so much for the link and for your help!