CSS for Beginners: 10 Ways to Learn to Code
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.
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!
Back in January, we introduced you to a feel-good cause to inspire your New Year's resolution: a walking challenge to help raise funds for the amazing cancer fighters at The Leukemia & Lymphoma Society. I took part in the challenge with the Brit + Co team and ended up walking 105+ miles in January — it was awesome.
This spring, there's a new challenge on the horizon, The Leukemia & Lymphoma Society's Big Climb. The ask: On May 15, 2021, you can step up to take cancer down by committing to climb 1,311 steps, walking 3.2 miles, or doing 440 chair step-ups at home as part of the Big Climb. If you need some motivation to bring movement back into your daily routine — look no further!
As always, it's free to sign up, but climbers are encouraged to set a fundraising goal to help beat cancer. We'll be organizing another Brit + Co team to step up, and I hope you'll join us too! Keep scrolling for a peek at where I'll be completing the challenge in my Los Angeles neighborhood around the hidden Silver Lake Stairs. Happy climbing!
Never underestimate the power of an accountability buddy! I asked my in-laws, my partner, and a few friends to join me so we can keep each other motivated and accountable in completing the challenge — virtual high-fives all around! Also, my dog Fox is a great climber, too.
An aesthetically pleasing backdrop is a huge motivator for me! I'm fortunate to have all sorts of painted steps around my neighborhood to keep the challenge interesting, but you can also keep cool inside with at-home chair step-ups.
Don't forget to share your progress on social — #BigClimb!
Feel free to break the challenge up if you need to by tackling half the distance in the AM and half at sunset. Here's me 1,311 steps later and ready for a break — but, think I earned this one!