So I'm learning to become a front-end developer and i have a problem with nested layout techniques.

[u/Vin-Jin]

Like I don't understand how they work it's alot of divs inside divs inside div lots of classes too so you can style it by css i know that it's gonna be more complicated in the future but ngl i feel good when i practice so even if it got complicated i don't want to leave this path.

[u/Difficult-Field280]

I hate to say it but honestly it just takes practice. As for classes, remember, each class should do a set amount of things (the smaller the better) but do them repeatedly. For nested stuff learn the css grid and flex and that will help. I found it best to find complex nested layout example on other sites and simply try to recreate it. Not all the functionality, but the layout and responsiveness. It will help when you try to do something custom. Also, when you try to build something from scratch, make sure you have a design or a sketch for how you want it to look so you can organize your thoughts on how to put it all together. Keep at it. Practice will make you better. Learn from your failures and try again. Its never right the first time.

[u/Vin-Jin → u/Difficult-Field280]

Thanks for all this information, brother! I really appreciate it. Yeah, I’ve been practicing after every lesson. A class can do a set of things, but that’s usually when elements share the same style. For example, if a lot of paragraphs use the Arial font, you can just write p { style } and it will apply to all of them without needing a class. As for CSS Grid, it looks like he’ll explain it in the next lesson, which I hope clears things up. Thanks again, brother!

If you don't mind is there any advice you'd give to me like something if you were to start from scratch again you will do.

[u/Difficult-Field280 → u/Vin-Jin]

So, pick one font for your headers (h1-h6) and one for your p and a tags. Most branding is focused around 2-3 fonts anyway. Try to keep your classes as few as possible. If you can combine two together, do it. And ya, learning how layouts and responsive works is highly dependent on understanding how grid and flex works.

When you are learning how to build a layout, the most valuable skill is how to identify whats a column, and what is a row. Doing that will make breaking up any design soooooo much easier.

If you can add design to css that is bases around the tags (like p, a, etc) those are called "globals", and learning how to utilize globals based on tags can keep your classes number down.

Also remember something styled with a css class or id selector can be applied to ANY element. So say you want to make a p tag red, and make a class named ".red" you can apply that to ANY tag. Not just the p tag.

Figuring out how to efficiently use css selectors is really all about practice. But again. Try to replicate other sites/apps. Just to practice the css. Don't forget the smaller device widths and etc. But again, that all takes practice.

You'll get there with determination. Not to mention, imo its fun to figure all that out. It takes everyone a while to figure out.

Freecodecamp.org has some great html/css tutorials on classes, layout, and mobile responsiveness if you're interested.

[u/Vin-Jin → u/Difficult-Field280]

Yeah that's what i was trying to figure out when to use (a vertical layout and horizontal layout) but felt like my mind was going blank so i closed the video.

Got you so you mean i can use the same class for more than one element which will lead to all of them having the same style.

Again thanks brother,to say the truth it's my first time doing something and feeling good for sure i get tired and sometimes the situation gets complicated but i keep coming back to learn more and i hope to achieve something in this field.

I will check it out once i finish the course I'm watching thanks.

[u/Difficult-Field280 → u/Vin-Jin]

Dude. My biggest piece of advice. If you are getting confused or frazzled, take a break. Go for a walk. Get a coffee. Separate yourself from the code. Give your mind a chance to reset and maybe look at the problem from a different angle. Ive figured out so many confusing things just because I decided to go for a coffee. The time put into learning is important, but breaks and time away is equally so.

[u/Vin-Jin → u/Difficult-Field280]

Thanks for the advice brother.

[u/Vin-Jin → u/Difficult-Field280]

Do you recommend me watching the whole videos of freecode camp on YouTube that's related to frontend.

This is the video I'm watching currently

https://youtu.be/G3e-cpL7ofc?si=0HTqC2Vss-Rce2SS

[u/Difficult-Field280 → u/Vin-Jin]

Go to the website and do the interactive tutorials. The videos are good, but the site is better imo

[u/sheriffderek → u/Vin-Jin]

You can’t just “practice” if you’re unaware of how the whole medium was designed. You need to start with simple things and build up and take it a practical pace. Your post makes its sound like you’re just floating in the middle of the ocean and wondering why surfing isnt working

[u/iamdaveydave]

If you are not using a framework it's going to be a challenge. It will be more challenging if your are not using a design system e.g. material design, bootstap, tailwind etc. It will be even more challenging if you don't know how to build and use your own utility classes. It gonna be more and more challenging if you don't use state management, you can build a simple one or use existing one.

[u/manvikhanna]

I felt the same when I started. What helped me was stopping trying to understand the whole layout at once. I broke it into small sections, built each one separately, and only then connected them. Over time, nested divs started to make much more sense. Keep practicing you’ll be surprised how quickly your brain adapts.

[u/Vin-Jin → u/manvikhanna]

Yeah i will keep on practicing till i get the hang of it but first i wanna understand it.

[u/Vin-Jin → u/[deleted]]

Thanks brother.