Practical CSS for No-Coders

Practical CSS for No-Coders

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 1h 56m | 334 MB

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.

Table of Contents

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

Applying CSS to Your Page with Selectors
4 Writing your first comment and element selector
5 Writing a class selector
6 Grouping selectors
7 Descendent selectors
8 Challenge Working with selectors
9 Solution Working with selectors

CSS Colors and Images
10 Identify a color scheme
11 Formatting color in CSS
12 Background and text color in CSS
13 Understanding images in CSS
14 Working with background images in CSS
15 Challenge Style this web page
16 Solution Style this web page

CSS Boxes, Sizes, and Type
17 Understanding type in CSS
18 Applying type formatting with CSS
19 Understanding and applying size in CSS
20 Understanding the box model in CSS
21 Working with border, padding, and margin in CSS
22 Challenge Add styling to this page
23 Solution Add styling to this page

More Advanced CSS Concepts and Properties
24 Styling links with CSS
25 Understanding inheritance in CSS
26 Debugging CSS with borders and background colors

27 Next steps