We got you started with HTML for Beginners and Getting Schooled Online. Now take your coding a step further with CSS. HTML is the bare-bones, outline of document structure and information. CSS is where the fun begins!
1. Shay Howe’s Advanced Guide to HTML & CSS: In HTML for beginners, we showed you Shay Howe’s Introductory Guide on HTML and CSS. This more advanced guide, expands on front-end web design and development. Presented in a clean organized way, the guide includes tips on detailed positioning, utilizing preprocessors, transitions, and animations.
2. DocHub: Initially created soley for CSS, DocHub is a handy documentation service for web developers to use as a reference guide. Due to the positive response it received from its users, DocHub expanded coverage to not only CSS, but also JavaScript, HTML, DOM, PHP, and jQuery.
3. Mozilla Developer Network CSS: A developer’s gold mine, filled with documentation, tutorials, tools for development, news, and help outlets. This is the network to learn and develop your CSS skill.
4. Team Treehouse: In need of some guidance? Check out Treehouse, an online method to learn web development and coding. Take a look at their deep-dive dig into CSS here. These classes have online instructors to help you build your foundation in CSS or any other web technology. As an affordable means to technology education, Treehouse offers the initial two weeks for free. After that, membership starts at $25 per month.
5. CSS-Tricks: Seeing as it’s a web-based community curated by Chris Coyier, a writer and web designer who helps others make their websites better, you best take note of his article on A Whole Bunch of Amazing Stuff Psuedo Elements Can Do.
6. SitePoint CSS: Here you get cutting edge tutorials, courses, and books for everyone from website professionals to newbies. Pour over CSS properties, rules, concepts, selectors, and visual examples. Also, be sure to check out this publication on CSS Architectures: New Best Practices to keep up to date and in the know!
7. Scalable and Modular Architecture for CSS (SMACSS): Deemed one of the most useful contributions to the front-end discussion in years, SMACSS is a must-read-and-use resource for anyone touching CSS. SMACSS documents a valid and consistent approach to developing a site when using CSS. All of the topics are based on CSS architecture and broken down by section, creating a rich resource that allows you to pick and choose on a need-to-know basis.
8. Web Safe Colors by Hue: A great tool for colors in CSS. These are the only colors that can be displayed reliably across all browsers and operating systems without fading or distortion. Also check out the table on VGA colors, a group of 16 colors that can always be rendered by name, see the table here. There is also a page of 500+ colors and their RGB and hexadecimal values that can be used in CSS.
9. Unsplash: Not a photographer? No problem! Unsplash offers free high-resolution photos that can be used in your CSS layout. You read that right: The photos are free of charge and free of copyright. Be sure to follow Unsplash as 10 new photos are added every 10 days.
10. Sass and LESS: An Introduction to Prepocessors: It is what it is, and that is awesome: A simple introduction to preprocessors. For those with a good handle on CSS, you can kick it up a notch and use a preprocessor to bend and twist your code in a way that isn’t bound by the limitations of CSS. Check out Sass (Syntactically Awesome Style Sheets,) a powerful preprocessor that is industry improved and completely compatible with CSS. Delve into more here.
Another valuable tip is simply looking at other websites and viewing the source code to see how things work. To do this using Google Chrome: Right Click and select, Inspect Element—violà !
There you have it soon-to-be CSS gurus! Remember to practice every day and cherish the ah-ha moments. If you have any helpful tips or tricks for learning CSS, let us know in the comments below!