Completed
How to create an image from part of a Photoshop design
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
