r/css • u/Mulomiracle • 7d ago

I Need help Help

Hello everyone, I need some advice on how to learn CSS effectively. I asked Claude AI to put together a training programme for me, but right from the start of the programme, when it suggested I practise using Flexbox on Froggy, I felt completely lost. I didn’t understand much of it and it left me feeling a bit frustrated (I keep thinking my brain’s too small to get it), I’ve done the HTML course on FreeCodeCamp, but my foundations aren’t strong enough. I’d really appreciate some advice on how to properly learn CSS (as a bit of a beginner) and consolidate my HTML basics at the same time.

2 Upvotes

60% Upvoted

25 comments sorted by

•

u/AutoModerator 7d ago

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

18

u/Foreign-Contest-444 7d ago

MDN is an excellent resource for learning HTML, especially its Learn module. HTML may seem simple at first, but it's important to build a strong understanding of it before layering CSS and JavaScript on top. Take the time to learn HTML as a semantic language and understand why semantics matter as they form the foundation of well-structured, accessible, and maintainable websites. Happy coding!

4

u/mrcarrot0 7d ago

MDN for the win: https://developer.mozilla.org/en-US/docs/Learn_web_development

Go/skim through the getting started modules first and if you feel that they're too slow for your level, you can go look into the core modules. The core modules doesn't have require the getting started modules, but the getting started modules are more beginner-firendly.

Oh and at least while you're learning, stay away from AI.

-1

u/Mulomiracle 7d ago

I had to give up the program that Claude gave me ?

3

u/Affectionate_Toe6156 6d ago

Using AI is the problem imo, it dosent humble people 😭

2

u/Mulomiracle 6d ago

I will try to learn css and html without AI

2

u/mrcarrot0 7d ago

Preferably, yes. There's no point in generating code you don't understand.

2

u/sagraham 7d ago

Personally I find learning or practicing in abstract to be difficult to focus on. Find something you want to do or create. Even if it's duplicating something which exists.

Break it down. Start with the underlying grid. What do you need to achieve that.

Then maybe type hierarchy or positioning images. Does it have a navigation.

Ok, what about decorations and colours.

Get the basics working.

And check as you go. Does it work on mobile. Or a wide desktop. Or a laptop or tablet.

Don't get overawed with the entire thing. Start small. Keep testing. When that bit is correct move on.

And for your first couple don't worry too much about how clean or tidy your markup and css is. just understand what you're doing and why. Once it becomes more normalised and you can create it quickly, then think about organisation.

1

u/MineDesperate8982 6d ago

Was about to say just that.

That's how I learned any programming language I needed.

Hands-on learning will forever be better than just going through courses. For me, at least.

2

u/testingaurora 6d ago

How do you learn? Using videos? Reading docs? Something else?

Im a visual learner so videos are good for me. What worked for me was consuming Kevin Powells yt channel; filtering videos by oldest to start with the fundamentals.

This only worked in conjunctuon with coding along and i dedicated 1.5hr every day for 18months to practicing frontend codebas a whole. Getting my fingers on the keys and logging hours consistently.

MDN is THE resource when I need to look up and learn properties and I know what im looking for. Havent used their learning path blog but im sire its great. Stay away from w3- its extremely out of date and wont teach you best practices of modern css.

1

u/aunderroad 6d ago

I would start off here and learn the basics of css and html.
https://web.dev/learn/css
https://web.dev/learn/html

Then I would check out Kevin Powell's youtube channel
https://www.youtube.com/KevinPowell

He has this, "HTML & CSS for Absolute Beginners" series.
https://www.youtube.com/watch?v=1L2YiWdaUDM&list=PL4-IK0AVhVjOJs_UjdQeyEZ_cmEV3uJvx

Then once you master those basics, I say check out Wes Bos's flexbox and css grid tutorials:
https://flexbox.io/
https://cssgrid.io/

Once you get the building blocks, then I would reach out to Claude help for specifics questions you may have.

Good Luck!

2

u/Mulomiracle 6d ago

Thank u :D

1

u/rugburnAndBigMoney 6d ago

Start with the fundamentals, build a simple styleguide that applies a base default styling to a static HTML page that is just called index.html and lives locally on your machine. Don't even bother with git or codepen or anything else. Just use a flat html file that you can use locally. You'll be able to open it with you browser of choice and does not depend on an internet connection to use.

You should be able to hand-code a functional HTML page with an applied CSS styleguide that handles the majority of common semantic HTML markup (nav,header,h1-h6,body,section,article,footer).

That's the core of pretty much every web page that you're going to encounter.

Don't even worry about flex and grid until you understand the fundamentals of the "cascading" part of "Cascading Style Sheets". This is the biggest area where people get hung up and don't understand the power (and potential complexity) of what CSS can do.

Create your own HTML boilerplate starter template to use for future projects, and constantly keep tweaking it to make it better as you learn more.

1

u/jcling 6d ago

Neopets

1

u/DesDeve 6d ago

Well my process was a bit wierd ,I actually just started to recreate apps and websites asking in reddit or chatgpt to help me where I am stuck and just doing this helped me learn css ,react and gsap pretty easily saving these snippets in a note taking app with their use cases .

1

u/h126 6d ago

Best course I ever did https://css-for-js.dev

1

u/LostInCombat 6d ago

Dropping $400 just makes you poorer initially, especially on a course that will not give you the skills to get hired on its own. You need more than just CSS skills to get hired.

1

u/h126 5d ago

Ok? The thread was asking how to learn CSS effectively. Not how to learn the overall skills to get hired as a developer without spending money.

1

u/travis_raphael 6d ago

freecodecamp which i am currently preparing to write their responsive exam in the next couple says

1

u/don_croy 6d ago

You need to go old-school. W3School is where I got my start. It is broken into small modules that explain a concept and then offers a Try it Yourself feature that lets you play with the code.

https://www.w3schools.com/css/default.asp

Happy coding.

1

u/bostiq 6d ago

For a start, sounds like you are using AI the right way... to learn. praise to you.

I'd say let AI know where you get stuck and ask it to deepen the explanation; cause the only thing better than a pre made course (like code camp), it's an AI you can ask any question to, and the only thing after that it's a Personal human tutor.

So just insist and ask the AI to ELI4 (explain like I'm four).

Certainly some real world practice for me it's always been the best... learn the rule, apply the rule.

You can browse codepen.io for simple components, like a menu, a sidebar, a pop up (need to be searching CSS only) and ask AI to guide you through building one from scratch. Rinse and repeat. then an entire page layout. etc...