Practical CSS for No-Coders

Course details

If you’re using a no-code tool to build your website, you may find it looks a bit generic. How can you make the site uniquely your own? CSS comes to the rescue! CSS (Cascading Style Sheets) is responsible for anything pretty on the web, including colors, fonts, layouts, and much more. Just a little bit of CSS code can give you the customizations you need, and web design and development instructor Jen Kramer shows you exactly how to do it. Jen introduces you to CodePen, a tool used for working with HTML and CSS within a web browser, then goes over what CSS does and how it’s structured. She explains how to use selectors to apply CSS to your page, then dives into CSS colors, images, boxes, sizes, and type. Plus, Jen covers more advanced CSS concepts and properties, like styling links, understanding inheritance, and debugging your creation.

Concepts

Introduction

Styling the web for no-coders
Working in CodePen
What is CSS and how is it structured

Applying CSS to Your Page with Selectors

Writing your first comment and element selector
Writing a class selector
Grouping selectors
Descendent selectors
Challenge - Working with selectors
Solution - Working with selectors

CSS Colors and Images

Identify a color scheme
Formatting color in CSS
Background and text color in CSS
Understanding images in CSS
Working with background images in CSS
Challenge - Style this web page
Solution - Style this web page

CSS Boxes, Sizes, and Type

Understanding type in CSS
Applying type formatting with CSS
Understanding and applying size in CSS
Understanding the box model in CSS
Working with border, padding, and margin in CSS
Challenge - Add styling to this page
Solution - Add styling to this page

More Advanced CSS Concepts and Properties

Styling links with CSS
Understanding inheritance in CSS
Debugging CSS with borders and background colors

Conclusion

Next steps