"CSS sucks!!", "How can I get better at CSS?", "I get stuck on little CSS issues for a long time". Do any of these expressions describe your view ...
For further actions, you may consider blocking this person and/or reporting abuse
Great article. Although my css is good enough to start bootstrap, I think I'll continue to learn more so that when I begin with frameworks I can customize then however I want it. Thanks for sharing this
I just decided to recode my portfolio from scratch. One of the best learning decisions I have ever made, mostly because I learned a lot about css. Thanks for the article.
I'm glad you like it.
I recall coming back to some old code I'd written for a personal site (actually, my mom's small-business website) and I had used some CSS framework and realized that the worst part of coming back to this was re-learning all the dependencies. I stripped it down and it is now sooo much easier to dip into for a small adjustment.
Nice!!! Sometimes, frameworks make stylesheets less maintainable. And in many cases, we might not even need them. CSS has improved so much that a lot of things we relied on these frameworks for can easily be implemented with pure CSS.
Yup, I complain about over engineering constantly. I swear it's because I'm not lazy... there is a saying about lazy programmers.
CSS is incredibly difficult to work it, or maybe it is from my lack of design sense. Anytime am asigned a front end task I cringe and my design always almost get rejected . most us of know the syntax of CSS but have no sense of design which makes it look like you don't know CSS at all.
If I get you right, you design using CSS. Combining CSS with design is actually a lot difficult. I think you should try creating a design first. You can use a design tool like Figma or Sketch. If the design is accepted, then you can implement it with CSS. Separating design and implementation makes frontend much easier.
Makes sense
I would implore you to please remove the link to w3schools and replace it with MDN.
w3schools is notorious for slightly bad information. The problem is that despite having most of its content mostly correct, the finer details are often incorrect and lead to a lot of misled developers wasting time unnecessarily.
Personally, I found w3shools helpful and I can't say they've misled me in any way.
Though the content on topics there are not always in depth, they can serve as a quick reference.
Thanks for suggesting MDN, I'll add it right away. :)
MDN is honestly amazing. I really like their approach.
Can you give some examples of this? I believe you but I feel like it's gotten better over time and the reputation is slightly worse than the reality as it stands today.
But I'd love some examples to get a better idea of the gripes people are still having with that site.
Quick example that I just googled:
"HTML h1 to h6 tag"
The
<h1>and<h6>tags are not "more" or "less" important.The numbers indicate their rank which are used for outlining a document:
per the spec:
These little details might not seem important at first, but imagine what happens to your JavaScript when you get some little details wrong.
I had this same conversation 9 months ago.
The problem with "getting better" is that if you go from being "terrible" to being "bad" it's still "getting better" but not "good".
w3schools has the problem of not being a primary source. Many developers take the information and assume that it's valid because it's got "w3" in the name (despite not having any affiliation with the w3c). As the web changes, the information on w3schools goes from being moderately useful to being misleading.
Thanks for this article. While its definitely great to learn css from scratch, I believe CSS libraries also help you learn a lot. Take bootstrap for example. When I started coding I had no idea about bootstrap or responsive web. Using bootstrap cdn and chrome dev tools, I learnt how to write responsive designs, I learnt what makes up the special classes they use. I now know what is contained in a row, I can write a modal, media queries and do other stuffs by learning from chrome dev tools. I feel this is for intermediate developers though
I agree with you. You can learn by studying these libraries.
Great article! I've been hard stuck on CSS for a while now, and this is super motivating :)
I'm glad it does. Thanks :)
Nice post, been having a bad relationship with vanilla css, I just got some udemy courses on css tho, hoping to reduce my over reliance on bootstrap and materialize css
Nice choice Femi. I know your relationship with CSS will get better after the course.
Nice article I love it. Is exactly where I'am stuck with some css since like you said at the end "Don't get overwhelmed by the number of things you have to learn. New features are being added to CSS regularly. "
and what I most like about is that you are an Electronic field exploring this field, just like me. Again, excellent article helped me getting focus again. Thanks
This is super wonderful advice. Auto-bookmark material.
Thank you Ben :)
I just started using CSS frameworks (materializecss, foundation etc..) in the last two months. But it was after doing the due diligence that you addressed in this article. I can't imagine using the frameworks without understanding CSS and SASS. I really don't know how anyone would get the power out of the frameworks without a strong foundation in CSS. Thanks for posting, the more aesthetic projects and tools are the more likely they will be used and gain traction.
The apt part of this write - "Ditch the Libraries". Very True.
Awesome post Sarah. Helped me a lot!
Great article, Sarah!
I completely agree with you on ditching libraries. On that point: what’s your opinion on resets or things like normalize.css?
I think they are necessary to remove built-in browser styling and make your pages appear the same across all browsers.
Overall, this was an excellent article, but I'd like to point out a couple things.
First, a class like title seems a bit pointless when header tags should be used for that purpose. Two options would be using h1 as post-title and h2 as card-title in a parent/child sort of relationship OR using h2.post and h2.card if both are children of the same parent. Of course, if you're truly adventurous and find an edge case where header tags are inappropriate for your titles, you may just create 3 classes: title (containing styles that are the same for all titles), post (for styles unique to the post titles), and card (for styles unique to the card titles). Then all you have to do is assign multiple classes to the elements.
span="title post"
Second, over the years I've found plenty of buggy code, bad advice, and broken semantics on W3Schools. I've also found that anything I may have once looked for in W3Schools can be found in MDN, and that MDN gives accurate, updated information, marks experimental features and depreciated features accordingly, gives references to the W3C's standards, and includes a chart showing which browsers do and do not support the code shown on that page. If it were me, I'd just boot W3Schools out of the list of resources.
Aside from those two little things, this article is nothing but good advice ... for any language, really. I've got nothin' but ♡ for it.
"Nothing beats practice". APT
Well written, good read.
I love this article. It's helpful.
Thank you Sarah.
This was an excellent read and I feel motivated to become more confident in the CSS I write! Thank you for sharing. 💪🏾
Great article Sarah... I found the motivation that I was needing to start reviewing it.
Some front-end coding challenges to practice.
codier.io and frontendmentor.io/
😊
Great read! You spoke my mind here.
So true,frameworks don't give the kind of flexibility vanilla CSS gives.