[Resolved] Favorite CSS books and sites

[Josef]

This is a meta question that may save you from answering many other questions:

Do you folks at GeneratePress have favorite books and web sites on CSS that you can recommend?

Thanks you all.

[Elvin]

Hi,

Not exactly sure about the rest of the team but personally I like reading documentations and article tidbits from these sites.

CSS Documentation & Article sites:
https://www.w3schools.com/css/
https://developer.mozilla.org/en-US/docs/Learn/CSS
https://css-tricks.com/

Note: CSS-tricks even has a article about your question here – https://css-tricks.com/where-do-you-learn-html-css-in-2020/

If you find video courses effective, try the CSS courses from Lynda and Udemy.

These are mostly for general CSS things but for specific problems/workarounds, I check github pages and stackoverflow results.

For practice, I use Codepen, JSfiddle, Local by flywheel (locally hosted site) or an actually WordPress sandbox/dev/staging site.

[Josef]

Thanks, Elvin! Much appreciated. I’ll leave this open for 24 hours, if that’s okay with you, in case any of your coworkers want to chime in.

Thanks again,

Josef

[David]

Hi there,

their all good resources that Elvin has provided. Of course theres a mega-tonne more tutorials and sites out there.

The hard part with learning CSS is most of the resources are specific to you writing HTML and CSS. When it comes to WordPress Themes and Plugins, someone else has already created the HTML and CSS – so understanding what CSS Selectors you use to add or change the styles of an element is really important.

This is good low to high level explanation of using Chrome Dev tools for debugging and prototyping:

https://developers.google.com/web/tools/chrome-devtools

Dev tools are your best friend and will help a lot in styling theme / plugin elements.

[Josef]

Thanks you for the tips, David!

I already know a bit of CSS, enough to know that it would be best if I try to use it in a way that didn’t conflict with the way, the idioms, of how WordPress and GeneratePress use it.

I have avoided the Chrome devtools until now because it seemed daunting to figure out. But I’ll make the effort with the documentation you linked.

Thanks again,

Josef

[David]

Glad we could be of help

[Josef]

Thanks for all your good tips, GP folks.

[Author]

Posts