Nathan Sebhastian

Posted on Feb 11, 2019 • Edited on Feb 13, 2019

I used Bootstrap too often and I wonder how can I write good CSS without it?

#discuss #beginners #css

Hi everyone! I'd like to discuss with you all about learning CSS properly w/o using frameworks.

What tutorials or roadmap do you think will help developers who used Bootstrap learn how to make their own CSS?

Some background: I'm a JS developer experienced in React and Express, but for the last few years all my work conveniently used Bootstrap to scaffold its CSS. Now I wonder how can I learn to create nicely spaced forms and responsive layout without it?

Furthermore, Bootstrap has free CSS snippet resources like Bootsnipp. Is there a similar website but for framework-less CSS?

I'm familiar with media query, margin, padding and all CSS basics, but putting them all together to make a simple responsive website is something I had forgotten.

Thanks for your help. DEV rocks!🤟

Update: thank you all for your suggestions and comments, I've also been looking for this stuff and has been able to come up with some interesting links:

Tania Rascia's post on making your own responsive website and navigation component. A bit outdated with jQuery in there, but still relevant nonetheless.

One of the things I've been wanting to do for a long time is indeed learning about Flexbox and Grid, but I never got to wrap my head around Flexbox.

This tutorial by Ohans Emmanuel seems promising, and it even has a course on educative.io.

Will try his tutorial and report back again here later.

Top comments (9)

Antonio Radovcic • Feb 11 '19

Try to learn Flexbox and CSS-Grid first, it should give you the tools to tackle most layout problems. Then I'd continue with typography and animations.

Eugene Vedensky • Feb 11 '19 • Edited

There's more than a couple CSS tutorials that I would recommend.

In particular, it may be a bore, but Jonas Schmedtmann's advanced css and scss course covers more than just the basics; more importantly, the course goes over CSS architecture and how to compose reusable components from scratch. It does gloss over the basics, but what do you expect from an advanced course.

This course along with my own personal projects really helped me make better, more meaningful CSS decisions as a developer rather than making decisions in what seems like a vacuum.

udemy.com/advanced-css-and-sass/

Kelli Blalock • Feb 11 '19

I was going to recommend Jonas Schmedtmann's Advanced CSS course but you already did. It's amazing!

Kelli Blalock • Feb 11 '19

He also has this course that you can take before the advanced one if needed... I haven't taken it but I'm tempted to. udemy.com/design-and-develop-a-kil...

Eugene Vedensky • Feb 12 '19

That's a good one too. It really goes to show that being a 'full stack' developer tends to leave a tremendous deficit in other areas of expertise.

rojoca • Feb 12 '19

Have a look at tailwindcss which is a utility based css framework that is sort of between bootstrap and writing custom CSS. Each tailwind class only applies a single CSS rule which seems counter-productive at first but lets you build out something that looks good really quickly without going back and forward between html and CSS. Here's what it looks like:

<div class="flex flex-row items-start m-4">
    <button class="border border-red rounded text-red bg-white mr-4 px-4 py-2">One</button>
    <button class="border border-green rounded text-green bg-white px-4 py-2">Two</button>
</div>

This turns out to be a great way to learn CSS as you apply it directly to your markup in a more obvious and explicit way than writing the rules yourself.

Additionally, you start with some good default styles that are easy to customise, including media-queries, colour palettes, and REM based text, padding, and margin sizing.

nepeckman • Feb 12 '19

I second the recommendation for tailwind. I've started using it, and I have learned so much more about CSS. It gives you sensible defaults for things like fonts, colors, and padding, and makes applying those rules super easy.

Ryan Smith • Feb 12 '19 • Edited

I think the best way is to practice it by implementing a design and referencing docs as you go (I prefer MDN's docs). This is good practice without being concerned with creating a design that you like.

CSS can be a different kind of difficult from other languages because the syntax is fairly simple to get started with, but having a deeper understanding and knowing the quirks takes experience. I think the biggest challenges are positioning, the box model, and display (block, inline, inline-block) properties. I feel these are the things that cause a lot of frustration with CSS because the time is not taken to review and reference these.

This is my general workflow when doing an HTML/CSS page. I think this allows me to more easily focus on one step at a time and eventually end up with a complete styled webpage.

I like to create the whole structure for a page in only HTML to make sure I understand all of the elements that need to be present and the normal document flow of these elements.
- Trying to do both HTML/CSS at the same time is something I have seen other developers try, but I think that is difficult when trying to build a full page.
After that, I use CSS to position things where I like them.
- This allows me to focus on only where things are in order to not overload myself with how they look.
After all of that is done, then I apply the styling to make it look nicer.

The first few times doing it is difficult and it may not always look exactly how you pictured it, but I think it quickly gets easier. Each time you hit a problem and have to research and tinker with it, you level up your CSS skills.