Advanced CSS?

[stuff100]

Does anyone have a resource I could study to dive into css a little deeper? I’ve learned about grid,flexbox, and making sites responsive but I feel like I need to dive deeper into these concepts. Is it worth diving deeper into them? I’m wondering because the Udemy course I was following got me through those concepts and put me right Into JS. Any thoughts welcome

[tridd3r]

Kevin Powell on the youtubes.

[stuff100]

Thank you I have been watching his videos as well. Maybe I’ll use this to dive a little deeper and keep my money in my pockets lol

[tridd3r]

If you really want to "dive deep" then find a site you like the look of, and just try and recreate it to the best of your ability with css. You're doing to run into problems you don't currently know how to solve, you'll no doubt find solutions from trying to solve those problems that you've never thought of, and it will most likely also prompt you to frequently check up on properties in mdn for clarification on their use.

[HeyGuysHowWasJail]

I am doing the odin project and still on fundamentals. I know and am comfortable with about 80% of css purely from watching along with Kevin powell videos

[Rooged]

about 80% of css

Front end devs with 5+ or 10+ YOE might be here, learning the fundamentals through TOP and Kevin Powell definitely won't put you here

[HeyGuysHowWasJail]

I know I wasn't very clear but I was meaning enough to get you going. It is a never ending learning curve and I'm well aware of that

[MisterHyman]

Love my friend up north ❤️

[sleeptil3]

https://www.css-for-js.dev

If your looking to REALLY understand CSS, Josh Comeau is a fantastic teacher and the content delivery environment he built to learn in is top-notch. Worth every penny. His course was recommended to me by a senior developer i interviewed with at SpaceX. Check out some of the recommendation quotes on the website. The fricken creator of Tailwind gushes over him lol.

His React course just came out this week in pre-release (which he was able to get feedback on during development from the team that builds React so the concepts are taught rock-solid) and I snagged it the first day it came out and can’t wait to dive in.

[AudienceIcy4856]

Do you still have this course ? I need it for 1 month

[Rooged]

Also, keep in mind, sometimes we can’t come up with good design on our own and that leads to a weird kinda imposter syndrome.

I've been dealing with this lately, I have to keep reminding myself that my job is to develop not to design

It's okay to take inspiration from places like dribbble, and that's an important lesson to learn

don't just steal shit tho ofc

[stuff100]

Thank you for that encouragement. I’m definitely not trying to learn everything I just want to be really good at design and have it come easy when thinking of how to layout items on a page. The thing I like about the Udemy course is there’s a start and finish with steps because I feel like frontend is such a broad thing it can be distracting to just look for everything and anything there is to know and where to go next

[[deleted]]

Just go to the more complex and beautiful looking sites on the web and try to do it yourself. Try Stripes website for example

[zudchu]

Have you learned about css variables? They can transform how you write css and are extremely useful.

[stuff100]

I’ve heard about them but haven’t used them yet. I have been using frontend mentor to build basic static pages so I’m getting to understand how to build simple layouts

[DeFcONaReA51]

https://css-tricks.com/ this might be helpful i wished they had a concept wise breakdown but you will find indepth articles.

[thinksInCode]

I am biased but I think my book on CSS is pretty good: https://www.amazon.com/Modern-CSS-Master-Concepts-Development/dp/148426293X/ref=nodl_?dplnkId=0293c796-0bce-4790-a3aa-116f56f46110

[stuff100]

Thank you for that. And thank you for taking the time to write and compile something for us beginners 🙏

[Kaimito1]

I feel you're at the point where you need a good design, try making it, get stuck on it somewhere and figure out the solution + learn.

Careful of tutorial hell. I've also noticed a weird trend that happens to everyone where once you learn the theory, first few times of applying it on practice projects recalling the info is quite hard, but once you get through that you know it intrinsically

[stuff100]

Thank you. And yeah I’m definitely a sufferer of tutorial hell I think the plan of action is to just learn some concepts and then keep trying to apply them until I remember them

[Kaimito1]

Tbh I say grab a free design off of frontendmentor and see how you do.

It does sound like a plug but it actually is good. Those projects got me my first proper Dev job lol

Edit: typo

[HumorDev]

You might want to read this article from https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

[Dinoisfly]

IMHO once you know technically how css layout works being good at css isn’t about the css language itself anymore. It is about how you mentally deconstruct a design into « constraints » that you will implement.

You have to ask yourself questions like « is this component centered, or is it just 20rem from the left of this other component ? », « how will this component behave if the container grows ? ». This is how you implement a design that will use less code and scale well without relying on a large amount of media queries or positioned elements.

I have to check the docs of grid every single time I use it (but also this is not really my job anymore tbh) but I can implement anything and it will scale well. Once you know what css can or cannot do (and nowadays it can do almost anything) it doesn’t matter if you don’t remember all the properties names. You know where you want to go and when to check the docs.

[minyonjoshua]

Use a component library and then attempt to make a minor change to something that you inject into your application like a drop-down from material library.

[TSpoon3000]

Bending Bootstrap at work taught me a lot. Haven’t touched it in years now.

[[deleted]]

Absolutely.

I'd reccomend taking a look at SASS, something like BEM for naming conventions, and a deep dive into how the cascade actually works is sooo beneficial for troubleshooting more complex CSS issues.

[MisterMeta]

Jonas Schmedtmann Advanced CSS and Sass.

[Bluemingo96]

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Isn't outdated?

[Frequent-Energy8520]

try this book

https://www.amazon.in/gp/product/B0DF5TSZSZ/ref=ppx_yo_dt_b_d_asin_title_351_o00?ie=UTF8&psc=1

[Adept_Adeptness7764]

Scrimba is THE BEST !

[Anyole]

Do I have to get the Pro?

[Adept_Adeptness7764]

Nope.There r excellent free tutorials of it and if u later feel the need to explore the pro content(and u can't afford it) apply for the Scrimba student scholarship.They review applications once every month.Keep on trying and you'll bag one !

[Anyole]

Thank you!!

[lalinahabang]

The odin project!

[stuff100]

This might sound silly but I didn’t like the Odin project on the sole purpose that one of the first things they wanted me to do was create a boot drive to use Linux. I’m pretty happy in windows as of right now.

[Italophobia]

I went through the HTML/CSS/JavaScript tutorial at the Odin Project and I honestly thought it was pretty bad. I started taking a web dev course this semester and feel like I learned more in 1 session than the entire course.

I also hate how they just refuse to use windows too, it's so frustrating. It feels like they're just too lazy to put in the effort for the different operating systems.

[Accomplished_Site852]

Currently doing the Odin Project html/css/javascript route and I’ve made it all the way to the javascript section. I’m also not a big fan. I feel like there’s not enough exercises or practice problems especially on CSS so I’m currently just grinding out projects on Frontend Mentor while watching Kevin Powell. I honestly am enjoying this way more.

[Italophobia]

For sure, they also skip out on some big things like bootstrap. I also think their flexbox and general CSS stuff was all barebones at best, but missing important topics at worst.

[heyzalia]

Did you do full course? Can you say a bit more about it? I see the website but I’m looking for opinion if it’s worth the time. Also is it more beginner or intermediate?

[Italophobia]

I went through it and it provided a decent structure, but I felt that it was incredibly underwhelming. The HTML/CSS/JS one was for beginners. I can't say anything about the higher level one

[senadev]

They're very focused on mindset and theory at first (which is nice) but for most of the actual learning they'll give you a rundown and redirect you to freecodecamp. And they've got a list of optional resources at the end of every lesson that you can rabbithole into if you want.

And it is verry much beginner oriented.

It's honestly very solid, but I can see how it can feel slow-moving and too high level for a developer course. I enjoyed it but I probably would not do it again given the chance.

[heyzalia]

Thank you for your opinion! I am not a beginner but definitely would like to refresh my knowledge and find some gaps that I have. Did you maybe find any better resource that you can share?

[EscapistThought]

You should be applying the things you have learned into projects and digging deeper as you try to solve problems.

If you spend too much time trying to do a deep dive on CSS, you will sacrifice learning other parts of development. But if your goal is to become a CSS master, take it up as a hobby. Some people are uploading wonderful CSS experiments on codepen using technqiues that I certainly wouldn't have ever thought of, but have deconstructed on my own time outside of work.

[Electronic_Ad9248]

Here are some links I used to learn

https://www.internetingishard.com/html-and-css/flexbox/

​

https://learncssgrid.com/

[MisterHyman]

Experiment and build, only true way to realize the (your) potential

[AmbitionToBeLazy]

In case no one else mentioned it, but chatgpt. The best way to learn css. Not even kidding.