Completed
How classes work and why creating class names and selectors is so challenging
Class Central Classrooms beta
YouTube videos curated by Class Central.
Classroom Contents
Front End Development Series
Automatically move to the next video in the Classroom when playback concludes
- 1 Why the "Front End Development" series exists and what we'll be covering
- 2 What front end development means
- 3 Getting set up with our mockup and resource pack
- 4 What HTML is and a simple HTML example
- 5 A simple CSS example and what HTML attributes are
- 6 How to structure an HTML document and how DOCTYPE works
- 7 How CSS can be used to make any element look like any other element
- 8 Why to use meaningful HTML tags, also known as semantic HTML
- 9 How to choose an HTML tag that matches the meaning you want to convey
- 10 How every HTML element is a box
- 11 A review of our design, what typography means and how to choose a starting point
- 12 How to create an image from part of a Photoshop design
- 13 A comparison of w3schools.com and developer.mozilla.org as HTML references
- 14 Why to use HTML and CSS instead of images
- 15 The advantages and disadvantages of spending the time to do things right
- 16 How to choose an HTML heading level
- 17 How to use the font-family CSS property
- 18 Why to use CSS selectors instead of adding styles inline
- 19 How to resume from this point (part 1, step 7)
- 20 How to decide which element a CSS style should be applied to when there are multiple options
- 21 How to work with border properties in CSS
- 22 How to use the text-align CSS property
- 23 How padding, margin and the box model work
- 24 How to use a class to apply CSS styles to a single element
- 25 How classes work and why creating class names and selectors is so challenging
- 26 How CSS selectors work and how to learn more about them
- 27 How to identify sections in our design
- 28 How the HTML section tag works
- 29 How to use compound CSS selectors and set a background color
- 30 How to calculate the combination of margin and padding to get the right white space
- 31 How to use the padding shorthand properties and adding padding to our section
- 32 What SMACSS is and how we'll use it throughout this series
