Difference between revisions of "150 zdrojů poznání CSS"
From Znalosti
(Založena nová stránka s textem „<h3>CSS Resources</h3> <p>If you’re new to CSS, it may seem like an overwhelming language to learn, but once you get into it, it’s quite manageable and…“) |
m |
||
| Line 3: | Line 3: | ||
<p>For the seasoned pro, it can be handy to have a list of all the selectors and properties since there are so many to remember and especially since CSS is a large part of Bootstrap and web design in general.</p> | <p>For the seasoned pro, it can be handy to have a list of all the selectors and properties since there are so many to remember and especially since CSS is a large part of Bootstrap and web design in general.</p> | ||
<p>If you want to start learning about CSS or you want to brush up on your existing skills, here are some great resources:</p> | <p>If you want to start learning about CSS or you want to brush up on your existing skills, here are some great resources:</p> | ||
| − | + | * [http://www.w3.org/wiki/CSS_basics CSS Basics] (W3C Wiki) | |
| − | + | * [http://www.w3schools.com/css/ CSS Tutorial] (W3Schools) | |
| − | + | * [http://www.sitepoint.com/author/hgiraudel/ Hugo Giraudel’s Articles on CSS, SCSS and SASS] (SitePoint) | |
| − | + | * [https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started Getting started with CSS] (MDN, Mozilla) | |
| − | + | * [http://www.w3.org/wiki/Headers_footers_columns_and_templates Headers Footers Columns and Templates] (W3C Wiki) | |
| − | + | * [http://html.net/tutorials/css/ CSS Tutorial, 16 Lessons] (HTML.net) | |
| − | + | * [https://friendlybit.com/css/beginners-guide-to-css-and-standards/ Beginner’s Guide to CSS] (Friendly Bit) | |
| − | + | * [http://www.westciv.com/style_master/academy/css_tutorial/ Complete CSS Guide] (Westciv) | |
| − | + | * [http://www.nngroup.com/articles/effective-use-of-style-sheets/ Effective Use of Style Sheets] (Nielsen Norman Group) | |
| − | + | * [http://www.csstutorial.net/ Learn All About CSS] (CSS Tutorial.net) | |
| − | + | * [http://www.htmldog.com/guides/css/beginner/ CSS Beginner Tutorial] (HTML Dog) | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<p>For those who are fans of learning by doing, these are for you:</p> | <p>For those who are fans of learning by doing, these are for you:</p> | ||
| − | + | * [https://developer.mozilla.org/en-US/demos/tag/tech:css3 CSS3 Demos] (MDN, Mozilla) | |
| − | + | * [http://www.cssplay.co.uk/ Experiments with Cascading Style Sheets] (CSS Play) | |
| − | + | * [https://premium.wpmudev.org/blog/social-media-css-sprites/ Adding Social Media Icons to WordPress with CSS Sprites] (WPMU DEV) | |
| − | + | * [http://alistapart.com/article/boom Printing a Book with CSS] (A List Apart) | |
| − | + | * [https://premium.wpmudev.org/blog/responsive-design-css3/ Using CSS3 Media Queries for a Responsive WordPress Design] (WPMU DEV) | |
| − | + | * [http://www.w3.org/Style/Examples/011/firstcss Starting with HTML and CSS] (W3C) | |
| − | + | * [http://www.markschenk.com/cssexp/index.html Pushing CSS to the Limits] (CSS/Exp) | |
| − | + | * [http://www.csszengarden.com/ The Beauty of CSS Design, Examples] (CSS Zen Garden) | |
| − | + | * [https://premium.wpmudev.org/blog/css-animations/ Score Quick Style Wins with These CSS Animation Tools for WordPress] (WPMU DEV) | |
| − | + | * [http://www.webreference.com/authoring/style/sheets/headlines/index.html Making Headlines With CSS] (Webreference) | |
| − | + | * [http://archive.oreilly.com/pub/a/network/2000/07/21/magazine/css_anarchist.html The CSS Anarchist’s Cookbook] (O’Reilly Web Dev Center) | |
| − | + | * [http://www.lynda.com/CSS-training-tutorials/447-0.html? List of CSS Tutorials] (Lynda.com) | |
| − | + | * [http://htmldog.com/guides/css/ CSS Beginner, Intermediate and Advanced Tutorials] (HTML Dog) | |
| − | + | * [http://premium.wpmudev.org/blog/custom-fonts-css/ Adding Custom Fonts to WordPress with @font-face and CSS3] (WPMU DEV) | |
| − | + | * [http://learn.shayhowe.com/html-css/building-your-first-web-page/ Learn to Code HTML and CSS] (Shay Howe) | |
| − | + | * [http://learn.shayhowe.com/advanced-html-css/performance-organization/ Advanced HTML and CSS] (Shay Howe) | |
| − | + | * [https://premium.wpmudev.org/blog/custom-css-wordpress/ How to Add Custom CSS to Your WordPress Site: 3 Methods Explored] (WPMU DEV) | |
| − | + | * [http://mri.developer.dynamicweb-cms.com/blog/2012/09/getting-started-with-sassy-css-%28scss%29.aspx Getting started with Sassy CSS (SCSS)] (Mikkel Rickys) | |
| − | + | * [https://premium.wpmudev.org/blog/make-your-images-pop-with-super-easy-and-sexy-css-styling/ Make Your Images Pop with Super Easy and Sexy CSS Styling] (WPMU DEV) | |
| − | + | * [https://premium.wpmudev.org/blog/emulate-wordpress-front-end/ How to Customize the WordPress Text Editor to Look and Function Like Your Front-End] (WPMU DEV) | |
| − | + | * [http://mashable.com/2011/06/14/compass-css-guide/#AgRFcKesqGqh Get Started With the Compass CSS Framework] (Mashable) | |
| − | + | * [https://premium.wpmudev.org/blog/improving-the-look-and-feel-of-your-author-comments/ Improving the Look and Feel of Your Author Comments] (WPMU DEV) | |
| − | + | * [https://premium.wpmudev.org/blog/add-icons-wordpress-menus/ How to Add Icons to Custom WordPress Menus – Without Plugins] (WPMU DEV) | |
| − | + | * [http://premium.wpmudev.org/blog/customize-login-page/ How to Completely Customize the WordPress Login Page] (WPMU DEV) | |
| − | + | * [http://learnlayout.com/">Learn CSS Layout] (Learn Layout) | |
| − | + | * [https://premium.wpmudev.org/blog/style-external-links-wordpress-like-wikipedia/ How to Style External Links in WordPress Like Wikipedia] (WPMU DEV) | |
| − | + | * [http://premium.wpmudev.org/blog/back-to-top-button-wordpress/ Add a Dynamic “Back to Top” Button to Your WordPress Site] (WPMU DEV) | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<p>If you learn best in a structured environment, here are some free and premium courses:</p> | <p>If you learn best in a structured environment, here are some free and premium courses:</p> | ||
| − | + | * [http://www.westciv.com/courses/index.html Self-Paced Web Design Courses, HTML and CSS] (Westciv) | |
| − | + | * [https://teamtreehouse.com/library/topic:css CSS Courses and Workshops] (Team Treehouse) | |
| − | + | * [http://webdesign.tutsplus.com/courses/30-days-to-learn-html-css 30 Days to Learn HTML and CSS] (Tuts+) | |
| − | + | * [https://www.udemy.com/css-css-3-crash-course/ CSS and CSS3 Beginners Crash Course] (Robin Nixon) | |
| − | + | * [https://www.udacity.com/course/intro-to-html-and-css--ud304 Intro to HTML and CSS: Not Your Typical Intro to Web Dev] (Udacity) | |
| − | |||
| − | |||
<p>If you’re looking for sites you can quickly reference when you’re stuck, here are some favorites:</p> | <p>If you’re looking for sites you can quickly reference when you’re stuck, here are some favorites:</p> | ||
| − | + | * [https://css-tricks.com/almanac/ Selectors and Properties List] (CSS-Tricks) | |
| − | + | * [https://developer.mozilla.org/en-US/docs/Web/CSS/Reference CSS Reference] (MDN, Mozilla) | |
| − | + | * [https://jigsaw.w3.org/css-validator/ CSS Validation Service] (W3C) | |
| − | + | * [http://reference.sitepoint.com/css CSS Reference] (SitePoint) | |
| − | + | * [http://www.w3.org/community/webed/wiki/CSS/Properties Properties List] (W3C Wiki) | |
| − | + | * [http://www.w3.org/community/webed/wiki/CSS/Selectors Selectors List] (W3C Wiki) | |
| − | + | * [http://meiert.com/en/indices/css-properties/ Properties Index] (Meiert) | |
| − | + | * [http://archive.oreilly.com/pub/a/network/2000/07/21/magazine/css_tool.html Using CSS as a Diagnostic Tool] (O’Reilly Web Dev Center) | |
| − | |||
| − | |||
| − | |||
<h3>SASS Resources</h3> | <h3>SASS Resources</h3> | ||
<p>Simplyfying your CSS with SASS means you can style your site faster. Here’s several guides to help you get there:</p> | <p>Simplyfying your CSS with SASS means you can style your site faster. Here’s several guides to help you get there:</p> | ||
| − | + | * [http://sass-lang.com/guide SASS Language Guide: Basics] (SASS official site) | |
| − | + | * [http://code.tutsplus.com/series/mastering-sass--net-19077 Mastering SASS] (Tuts+) | |
| − | + | * [https://css-tricks.com/snippets/sass/ SASS Snippets] (CSS-Tricks) | |
| − | + | * [https://css-tricks.com/sass-style-guide/ SASS Style Guide] (CSS-Tricks) | |
| − | + | * [http://www.sitepoint.com/whats-difference-sass-scss/ What’s the Difference Between SASS and SCSS?] (SitePoint) | |
| − | + | * [http://www.1stwebdesigner.com/learning-sass/ Learning SASS: A Beginner’s Guide to SASS] (1st Web Designer) | |
| − | + | * [http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-sass The Absolute Beginner’s Guide to SASS] (Andrew Chalkley) | |
| − | + | * [http://code.tutsplus.com/tutorials/using-compass-and-sass-for-css-in-your-next-project--net-6520 Using Compass and SASS for CSS in your Next Project] (Tuts+) | |
| − | + | * [http://torquemag.io/developers-guide-learning-sass-twenty-minutes-less/">A Developer’s Guide to Learning SASS in 20 Minutes or Less] (Josh Pollock) | |
| − | + | * [http://www.sitepoint.com/sass-mixin-placeholder/">SASS: Mixin or Placeholder?] (Hugo Giraudel) | |
| − | + | * [http://www.webcreatorbox.com/en/tutorials/sass-mixin-en/">Useful SASS Mixin Snippets] (Web Creator Box) | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<p>Here are some tutorials to practice what you learn:</p> | <p>Here are some tutorials to practice what you learn:</p> | ||
| − | + | * [http://thesassway.com/beginner Beginner Guides and Tutorials] (The SASS Way) | |
| − | + | * [http://thesassway.com/intermediate Intermediate Guides and Tutorials] (The SASS Way) | |
| − | + | * [http://thesassway.com/advanced Advanced Guides and Tutorials] (The SASS Way) | |
| − | + | * [http://leveluptuts.com/tutorials/sass-tutorials SASS Tutorials] (Level Up Tuts) | |
| − | + | * [http://www.zingdesign.com/the-sass-and-compass-tutorial-for-absolute-beginners/ The SASS and Compass Tutorial for Absolute Beginners] (Zing Design) | |
| − | |||
| − | |||
<p>Seeing an expert show you the ropes through video is the next best thing to having them right in the room with you. Here’s some of the best SASS video tutorials and courses on YouTube:</p> | <p>Seeing an expert show you the ropes through video is the next best thing to having them right in the room with you. Here’s some of the best SASS video tutorials and courses on YouTube:</p> | ||
| − | + | == Sign up for more WordPress wisdom == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<p>Guides and tutorials are fantastic, but if you need more information and guidance, a course may be more your speed:</p> | <p>Guides and tutorials are fantastic, but if you need more information and guidance, a course may be more your speed:</p> | ||
| − | + | * [https://www.codeschool.com/courses/assembling-sass Assembling SASS] (Code School) | |
| − | + | * [http://www.lynda.com/CSS-tutorials/Responsive-CSS-Sass-Compass/140777-2.html Responsive CSS with SASS and Compass] (Ray Villalobos) | |
| − | + | * [https://www.sitepoint.com/premium/courses/step-by-step-sass-2772 Step by Step SASS] (Lisa Catalano) | |
| − | + | * [http://www.lynda.com/CSS-tutorials/CSS-LESS-SASS/107921-2.html CSS with LESS and SASS] (Joe Marini) | |
| − | |||
| − | |||
<h3>LESS Resources</h3> | <h3>LESS Resources</h3> | ||
<p>SASS is generally more popular, but there are lots of diehard LESS fans out there.</p> | <p>SASS is generally more popular, but there are lots of diehard LESS fans out there.</p> | ||
<p>These helpful guides and tutorials should provide you with all the info you need to learn LESS from scratch or brush up on your skills. Either way, you should be able to decide which side of the fence you’re on.</p> | <p>These helpful guides and tutorials should provide you with all the info you need to learn LESS from scratch or brush up on your skills. Either way, you should be able to decide which side of the fence you’re on.</p> | ||
| − | + | * [http://webdesign.tutsplus.com/articles/get-into-less-the-programmable-stylesheet-language--webdesign-5216 Get Into LESS: The Programmable Stylesheet Language] (Daniel Pataki) | |
| − | + | * [http://verekia.com/less-css/dont-read-less-css-tutorial-highly-addictive/ Don’t Read this LESS CSS Tutorial (Highly Addictive)] (@verekia’s blog) | |
| − | + | * [https://scotch.io/tutorials/getting-started-with-less Getting Started with LESS] (Nicholas Cerminara) | |
| − | + | * [http://www.hongkiat.com/blog/less-basic/ LESS CSS – Beginner’s Guide] (Hongkiat) | |
| − | + | * [http://tutorialzine.com/2015/07/learn-less-in-10-minutes-or-less/ Learn LESS in 10 Minutes (or Less)] (Tutorialzine) | |
| − | + | * [http://www.sitepoint.com/a-comprehensive-introduction-to-less/ A Comprehensive Introduction to LESS] (SitePoint) | |
| − | + | * [https://www.ostraining.com/blog/coding/less/ The Absolute Beginners Guide to LESS] (OSTraining) | |
| − | + | * [http://www.smashingmagazine.com/2010/12/using-the-less-css-preprocessor-for-smarter-style-sheets/ Using the LESS CSS Preprocessor for Smarter Style Sheets] (Dmitry Fadeyev) | |
| − | + | * [http://www.smashingmagazine.com/2011/09/an-introduction-to-less-and-comparison-to-sass/ An Introduction To LESS and Comparison To SASS] (Jeremy Hixon) | |
| − | + | * [https://css-tricks.com/sass-vs-less/ SASS vs LESS] (Chris Coyier) | |
| − | + | * [http://www.iostream.eu/less-css-tutorial/">LESS CSS Tutorial – The Beginners Guide to a CSS Preprocessor] (iOSStream) | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<h3>Bootstrap Resources</h3> | <h3>Bootstrap Resources</h3> | ||
<p>There may not be many guides and tutorials in this list, but don’t let size fool you because these resources are worth their weight, er, file size in gold.</p> | <p>There may not be many guides and tutorials in this list, but don’t let size fool you because these resources are worth their weight, er, file size in gold.</p> | ||
<p>They include everything you need to know to start creating responsive sites with Bootstrap:</p> | <p>They include everything you need to know to start creating responsive sites with Bootstrap:</p> | ||
| − | + | * [https://blog.udemy.com/bootstrap-tutorial-a-guide-for-beginners/ Bootstrap Tutorial: A Guide for Beginners] (Udemy blog) | |
| − | + | * [http://groupdocs.com/blog/using-bootstrap-with-less-css-tutorial Using Bootstrap with LESS CSS – Tutorial] (Atanas Ruzhin) | |
| − | + | * [http://www.helloerik.com/bootstrap-3-less-workflow-tutorial Bootstrap 3 LESS Workflow Tutorial] (HelloErik) | |
| − | |||
| − | |||
<p>If you need a detailed guide that’s close by at all times, these books are great choices:</p> | <p>If you need a detailed guide that’s close by at all times, these books are great choices:</p> | ||
| − | + | * [http://www.amazon.com/Learning-Bootstrap-Modern-Elegant-Responsive/dp/1782161848 Learning Bootstrap – Modern, Elegant and Responsive Web Design Made Easy] (Aravind Shenoy) | |
| − | + | * [http://www.amazon.com/Getting-Started-Bootstrap-Code-Playground-ebook/dp/B00J6N75ZA Getting Started with Bootstrap 3.3] (Ryan Flores) | |
| − | + | * [http://www.amazon.com/Step-Bootstrap-Quick-Responsive-Development/dp/1499655622 Step By Step Bootstrap 3: A Quick Guide to Responsive Web Development Using Bootstrap 3] (Riwanto Megosinarso) | |
| − | + | * [http://www.amazon.com/Bootstrap-Essentials-Snig-Bhaumik/dp/178439517X Bootstrap Essentials] (Snig Bhaumik) | |
| − | |||
| − | |||
<p>If you find learning through articles and books isn’t as helpful as having a teacher guide you through the material, here are some courses you may find helpful:</p> | <p>If you find learning through articles and books isn’t as helpful as having a teacher guide you through the material, here are some courses you may find helpful:</p> | ||
| − | + | * [http://webdesign.tutsplus.com/courses/bootstrap-30-essentials Bootstrap 3.0 Essentials] (Tuts+) | |
| − | + | * [http://codecollege.ca/courses/bootstrap-to-wordpress Bootstrap to WordPress] (Code College) | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<h3>People of Note</h3> | <h3>People of Note</h3> | ||
<p>There are so many wonderful web developers out there, it’s difficult to pick just a handful. That’s why I squeezed in a few more since following the right people on Twitter can bring you a constant stream of useful information.</p> | <p>There are so many wonderful web developers out there, it’s difficult to pick just a handful. That’s why I squeezed in a few more since following the right people on Twitter can bring you a constant stream of useful information.</p> | ||
| − | + | * [https://twitter.com/SaraSoueidan Sara Soueidan] – Front-end developer, writer and speaker. Author of the Codrops CSS Reference. | |
| − | + | * [https://twitter.com/anatudor Ana Tudor] – Developer and designer who also writes CSS posts for many sites such as CSS-Tricks. | |
| − | + | * [https://twitter.com/snookca Snook] – Designer, developer, writer and speaker who also wrote SMACSS. | |
| − | + | * [https://twitter.com/codrops Codrops] – Dedicated to providing useful tutorials, insightful articles, creative inspiration and free resources for web designers and developers. | |
| − | + | * [https://twitter.com/Real_CSS_Tricks CSS-Tricks] – A curated web design community surrounding CSS. | |
| − | + | * [https://twitter.com/LeaVerou Lea Verou] – HCI researcher, author of CSS Secrets (listed here) and on staff at the W3C. | |
| − | + | * [https://twitter.com/csswizardry Harry Roberts] – Speaker, author and consultant front-end architect for Google, UN, Etsy, Kickstarter, BBC and more. | |
| − | + | * [https://twitter.com/stubbornella Nicole Sullivan] – Web developer, principal engineer and engineering manager. | |
| − | + | * [https://twitter.com/hakimel Hakim El Hattab] – JavaScript coder and CSS tweaker as well as the co-founder of * [https://twitter.com/Slides @Slides]. | |
| − | + | * [https://twitter.com/mathias Mathias Bynens] – Web standards fanatic specializing in JavaScript, HTML, CSS, HTTP, performance, security, Bash, Unicode and OS X. | |
| − | + | * [https://twitter.com/ppk Peter-Paul Koch] – Mobile platform strategist, consultant, writer, conference organizer and speaker, blogger, trainer and browser compatibility expert. | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
<h3>Must-Have Resources</h3> | <h3>Must-Have Resources</h3> | ||
<p>In the world of the Internet, things change so fast before you can blink twice. That’s why I’ve compiled a special list of sites for you to bookmark so you can stay up-to-date on the latest and greatest.</p> | <p>In the world of the Internet, things change so fast before you can blink twice. That’s why I’ve compiled a special list of sites for you to bookmark so you can stay up-to-date on the latest and greatest.</p> | ||
| − | + | * [http://sass-lang.com/guide SASS Language Guide: Basics] (SASS official site) | |
| − | + | * [http://lesscss.org/ LESS CSS] (Official Site for LESS) | |
| − | + | * [http://compass-style.org/ Compass, a CSS Authoring Framework] | |
| − | + | * [http://bourbon.io/ Bourbon, a Mixin Library for SASS] | |
| − | + | * [http://www.w3.org/ World Wide Web Consortium] | |
| − | + | * [http://wordpress.tv/ WordPress.tv] | |
| − | + | * [https://codex.wordpress.org/Main_Page WordPress Codex] | |
| − | + | * [https://premium.wpmudev.org/blog/get-the-whip/ The WhiP] | |
| − | |||
| − | |||
<h3>Where to Learn Even More</h3> | <h3>Where to Learn Even More</h3> | ||
<p>When you’re ready to learn more and take the next step, you have many choices. These sites are all fantastic places to enroll in affordable courses to advance your knowledge and maybe even your career.</p> | <p>When you’re ready to learn more and take the next step, you have many choices. These sites are all fantastic places to enroll in affordable courses to advance your knowledge and maybe even your career.</p> | ||
| − | + | * [https://teamtreehouse.com/ Treehouse] – Quality courses on web design and development for individuals and businesses that are trusted by top companies. | |
| − | + | * [http://www.lynda.com/ Lynda.com] – The creator of LinkedIn founded this tech education site with courses ranging from photography and music to web development and business. Since top companies are already on board, it shouldn’t be difficult to find a job after completing courses here. | |
| − | + | * [http://www.sitepoint.com/ SitePoint] – There are tons of great guides for CSS and beyond here. It’s practically a one stop shop and a great reference for code. | |
| − | + | * [https://www.sitepoint.com/premium/ SitePoint Premium] – Formerly called Learnable, this is the home of Sitepoint’s courses on web design and development. It’s a trusted source for learning everything you need to get started or advance in your career. | |
| − | + | * [https://www.udemy.com/complete-web-developer-course/ Complete Web Developer Course] (Rob Percival) – A down to earth course on Udemy for beginners on web design and development. A former teacher, Rob Percival does an excellent job making programming easy to understand. | |
| − | + | * [https://www.codecademy.com/learn/web Codecademy HTML and CSS] – This is a quality HTML and CSS course.. What sets Codecademy apart from other course sites is their courses are interactive and they consider themselves to be modern in approach in comparison to the traditional school system in the US. | |
| − | + | * [https://www.coursera.org/ Coursera] – There are free web development and design courses available as well as affordable course bundles created by real universities such as Brown, Harvard, Standford and many more. For a fee, you can enroll in a course bundle and receive a certificate upon completion. While it’s not an equivalent to a degree, it still looks great on a resume since your education would be from a highly trusted and recognized source. | |
| − | + | * [https://www.udacity.com/ Udacity] – Google created this education site that provides both free and premium courses. You can also enroll for their nanodegree programs in web development and programming that are <em>almost</em> as good as a degree since it’s enough to qualify for a high-paying job at top tech companies around the world including Google. | |
| − | + | * [http://codepen.io/">CodePen] – A community for front-end developers to showcase their work, get feedback and build a test case for bug testing. There are also so many really cool examples of what CSS can do, it’s downright inspirational. | |
| − | |||
| − | |||
| − | |||
| − | |||
Revision as of 15:59, 6 July 2016
Contents
CSS Resources
If you’re new to CSS, it may seem like an overwhelming language to learn, but once you get into it, it’s quite manageable and pretty easy.
For the seasoned pro, it can be handy to have a list of all the selectors and properties since there are so many to remember and especially since CSS is a large part of Bootstrap and web design in general.
If you want to start learning about CSS or you want to brush up on your existing skills, here are some great resources:
- CSS Basics (W3C Wiki)
- CSS Tutorial (W3Schools)
- Hugo Giraudel’s Articles on CSS, SCSS and SASS (SitePoint)
- Getting started with CSS (MDN, Mozilla)
- Headers Footers Columns and Templates (W3C Wiki)
- CSS Tutorial, 16 Lessons (HTML.net)
- Beginner’s Guide to CSS (Friendly Bit)
- Complete CSS Guide (Westciv)
- Effective Use of Style Sheets (Nielsen Norman Group)
- Learn All About CSS (CSS Tutorial.net)
- CSS Beginner Tutorial (HTML Dog)
For those who are fans of learning by doing, these are for you:
- CSS3 Demos (MDN, Mozilla)
- Experiments with Cascading Style Sheets (CSS Play)
- Adding Social Media Icons to WordPress with CSS Sprites (WPMU DEV)
- Printing a Book with CSS (A List Apart)
- Using CSS3 Media Queries for a Responsive WordPress Design (WPMU DEV)
- Starting with HTML and CSS (W3C)
- Pushing CSS to the Limits (CSS/Exp)
- The Beauty of CSS Design, Examples (CSS Zen Garden)
- Score Quick Style Wins with These CSS Animation Tools for WordPress (WPMU DEV)
- Making Headlines With CSS (Webreference)
- The CSS Anarchist’s Cookbook (O’Reilly Web Dev Center)
- List of CSS Tutorials (Lynda.com)
- CSS Beginner, Intermediate and Advanced Tutorials (HTML Dog)
- Adding Custom Fonts to WordPress with @font-face and CSS3 (WPMU DEV)
- Learn to Code HTML and CSS (Shay Howe)
- Advanced HTML and CSS (Shay Howe)
- How to Add Custom CSS to Your WordPress Site: 3 Methods Explored (WPMU DEV)
- Getting started with Sassy CSS (SCSS) (Mikkel Rickys)
- Make Your Images Pop with Super Easy and Sexy CSS Styling (WPMU DEV)
- How to Customize the WordPress Text Editor to Look and Function Like Your Front-End (WPMU DEV)
- Get Started With the Compass CSS Framework (Mashable)
- Improving the Look and Feel of Your Author Comments (WPMU DEV)
- How to Add Icons to Custom WordPress Menus – Without Plugins (WPMU DEV)
- How to Completely Customize the WordPress Login Page (WPMU DEV)
- ">Learn CSS Layout (Learn Layout)
- How to Style External Links in WordPress Like Wikipedia (WPMU DEV)
- Add a Dynamic “Back to Top” Button to Your WordPress Site (WPMU DEV)
If you learn best in a structured environment, here are some free and premium courses:
- Self-Paced Web Design Courses, HTML and CSS (Westciv)
- CSS Courses and Workshops (Team Treehouse)
- 30 Days to Learn HTML and CSS (Tuts+)
- CSS and CSS3 Beginners Crash Course (Robin Nixon)
- Intro to HTML and CSS: Not Your Typical Intro to Web Dev (Udacity)
If you’re looking for sites you can quickly reference when you’re stuck, here are some favorites:
- Selectors and Properties List (CSS-Tricks)
- CSS Reference (MDN, Mozilla)
- CSS Validation Service (W3C)
- CSS Reference (SitePoint)
- Properties List (W3C Wiki)
- Selectors List (W3C Wiki)
- Properties Index (Meiert)
- Using CSS as a Diagnostic Tool (O’Reilly Web Dev Center)
SASS Resources
Simplyfying your CSS with SASS means you can style your site faster. Here’s several guides to help you get there:
- SASS Language Guide: Basics (SASS official site)
- Mastering SASS (Tuts+)
- SASS Snippets (CSS-Tricks)
- SASS Style Guide (CSS-Tricks)
- What’s the Difference Between SASS and SCSS? (SitePoint)
- Learning SASS: A Beginner’s Guide to SASS (1st Web Designer)
- The Absolute Beginner’s Guide to SASS (Andrew Chalkley)
- Using Compass and SASS for CSS in your Next Project (Tuts+)
- ">A Developer’s Guide to Learning SASS in 20 Minutes or Less (Josh Pollock)
- ">SASS: Mixin or Placeholder? (Hugo Giraudel)
- ">Useful SASS Mixin Snippets (Web Creator Box)
Here are some tutorials to practice what you learn:
- Beginner Guides and Tutorials (The SASS Way)
- Intermediate Guides and Tutorials (The SASS Way)
- Advanced Guides and Tutorials (The SASS Way)
- SASS Tutorials (Level Up Tuts)
- The SASS and Compass Tutorial for Absolute Beginners (Zing Design)
Seeing an expert show you the ropes through video is the next best thing to having them right in the room with you. Here’s some of the best SASS video tutorials and courses on YouTube:
Sign up for more WordPress wisdom
Guides and tutorials are fantastic, but if you need more information and guidance, a course may be more your speed:
- Assembling SASS (Code School)
- Responsive CSS with SASS and Compass (Ray Villalobos)
- Step by Step SASS (Lisa Catalano)
- CSS with LESS and SASS (Joe Marini)
LESS Resources
SASS is generally more popular, but there are lots of diehard LESS fans out there.
These helpful guides and tutorials should provide you with all the info you need to learn LESS from scratch or brush up on your skills. Either way, you should be able to decide which side of the fence you’re on.
- Get Into LESS: The Programmable Stylesheet Language (Daniel Pataki)
- Don’t Read this LESS CSS Tutorial (Highly Addictive) (@verekia’s blog)
- Getting Started with LESS (Nicholas Cerminara)
- LESS CSS – Beginner’s Guide (Hongkiat)
- Learn LESS in 10 Minutes (or Less) (Tutorialzine)
- A Comprehensive Introduction to LESS (SitePoint)
- The Absolute Beginners Guide to LESS (OSTraining)
- Using the LESS CSS Preprocessor for Smarter Style Sheets (Dmitry Fadeyev)
- An Introduction To LESS and Comparison To SASS (Jeremy Hixon)
- SASS vs LESS (Chris Coyier)
- ">LESS CSS Tutorial – The Beginners Guide to a CSS Preprocessor (iOSStream)
Bootstrap Resources
There may not be many guides and tutorials in this list, but don’t let size fool you because these resources are worth their weight, er, file size in gold.
They include everything you need to know to start creating responsive sites with Bootstrap:
- Bootstrap Tutorial: A Guide for Beginners (Udemy blog)
- Using Bootstrap with LESS CSS – Tutorial (Atanas Ruzhin)
- Bootstrap 3 LESS Workflow Tutorial (HelloErik)
If you need a detailed guide that’s close by at all times, these books are great choices:
- Learning Bootstrap – Modern, Elegant and Responsive Web Design Made Easy (Aravind Shenoy)
- Getting Started with Bootstrap 3.3 (Ryan Flores)
- Step By Step Bootstrap 3: A Quick Guide to Responsive Web Development Using Bootstrap 3 (Riwanto Megosinarso)
- Bootstrap Essentials (Snig Bhaumik)
If you find learning through articles and books isn’t as helpful as having a teacher guide you through the material, here are some courses you may find helpful:
- Bootstrap 3.0 Essentials (Tuts+)
- Bootstrap to WordPress (Code College)
People of Note
There are so many wonderful web developers out there, it’s difficult to pick just a handful. That’s why I squeezed in a few more since following the right people on Twitter can bring you a constant stream of useful information.
- Sara Soueidan – Front-end developer, writer and speaker. Author of the Codrops CSS Reference.
- Ana Tudor – Developer and designer who also writes CSS posts for many sites such as CSS-Tricks.
- Snook – Designer, developer, writer and speaker who also wrote SMACSS.
- Codrops – Dedicated to providing useful tutorials, insightful articles, creative inspiration and free resources for web designers and developers.
- CSS-Tricks – A curated web design community surrounding CSS.
- Lea Verou – HCI researcher, author of CSS Secrets (listed here) and on staff at the W3C.
- Harry Roberts – Speaker, author and consultant front-end architect for Google, UN, Etsy, Kickstarter, BBC and more.
- Nicole Sullivan – Web developer, principal engineer and engineering manager.
- Hakim El Hattab – JavaScript coder and CSS tweaker as well as the co-founder of * @Slides.
- Mathias Bynens – Web standards fanatic specializing in JavaScript, HTML, CSS, HTTP, performance, security, Bash, Unicode and OS X.
- Peter-Paul Koch – Mobile platform strategist, consultant, writer, conference organizer and speaker, blogger, trainer and browser compatibility expert.
Must-Have Resources
In the world of the Internet, things change so fast before you can blink twice. That’s why I’ve compiled a special list of sites for you to bookmark so you can stay up-to-date on the latest and greatest.
- SASS Language Guide: Basics (SASS official site)
- LESS CSS (Official Site for LESS)
- Compass, a CSS Authoring Framework
- Bourbon, a Mixin Library for SASS
- World Wide Web Consortium
- WordPress.tv
- WordPress Codex
- The WhiP
Where to Learn Even More
When you’re ready to learn more and take the next step, you have many choices. These sites are all fantastic places to enroll in affordable courses to advance your knowledge and maybe even your career.
- Treehouse – Quality courses on web design and development for individuals and businesses that are trusted by top companies.
- Lynda.com – The creator of LinkedIn founded this tech education site with courses ranging from photography and music to web development and business. Since top companies are already on board, it shouldn’t be difficult to find a job after completing courses here.
- SitePoint – There are tons of great guides for CSS and beyond here. It’s practically a one stop shop and a great reference for code.
- SitePoint Premium – Formerly called Learnable, this is the home of Sitepoint’s courses on web design and development. It’s a trusted source for learning everything you need to get started or advance in your career.
- Complete Web Developer Course (Rob Percival) – A down to earth course on Udemy for beginners on web design and development. A former teacher, Rob Percival does an excellent job making programming easy to understand.
- Codecademy HTML and CSS – This is a quality HTML and CSS course.. What sets Codecademy apart from other course sites is their courses are interactive and they consider themselves to be modern in approach in comparison to the traditional school system in the US.
- Coursera – There are free web development and design courses available as well as affordable course bundles created by real universities such as Brown, Harvard, Standford and many more. For a fee, you can enroll in a course bundle and receive a certificate upon completion. While it’s not an equivalent to a degree, it still looks great on a resume since your education would be from a highly trusted and recognized source.
- Udacity – Google created this education site that provides both free and premium courses. You can also enroll for their nanodegree programs in web development and programming that are almost as good as a degree since it’s enough to qualify for a high-paying job at top tech companies around the world including Google.
- ">CodePen – A community for front-end developers to showcase their work, get feedback and build a test case for bug testing. There are also so many really cool examples of what CSS can do, it’s downright inspirational.
