Front End Development Series

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Explore modern front-end development practices and tools in this comprehensive video series. Learn to convert a web page mockup into a fully functioning web page using HTML, CSS, and JavaScript. Master essential skills like creating semantic HTML, writing sustainable CSS with SASS and SMACSS, implementing responsive design with media queries, and improving collaboration with package managers. Dive into accessibility concerns, front-end performance optimization, and automation tools like Grunt. Suitable for beginners and those looking to upgrade outdated skills, this series covers everything from basic HTML tags and CSS properties to advanced topics like responsive images and headless CMS integration. Gain highly sought-after, portable skills applicable to various back-end systems and increase your value in the workplace or independence in personal projects.

Syllabus

Why the "Front End Development" series exists and what we'll be covering.
What front end development means.
Getting set up with our mockup and resource pack.
What HTML is and a simple HTML example.
A simple CSS example and what HTML attributes are.
How to structure an HTML document and how DOCTYPE works.
How CSS can be used to make any element look like any other element.
Why to use meaningful HTML tags, also known as semantic HTML.
How to choose an HTML tag that matches the meaning you want to convey.
How every HTML element is a box.
A review of our design, what typography means and how to choose a starting point.
How to create an image from part of a Photoshop design.
A comparison of w3schools.com and developer.mozilla.org as HTML references.
Why to use HTML and CSS instead of images.
The advantages and disadvantages of spending the time to do things right.
How to choose an HTML heading level.
How to use the font-family CSS property.
Why to use CSS selectors instead of adding styles inline.
How to resume from this point (part 1, step 7).
How to decide which element a CSS style should be applied to when there are multiple options.
How to work with border properties in CSS.
How to use the text-align CSS property.
How padding, margin and the box model work.
How to use a class to apply CSS styles to a single element.
How classes work and why creating class names and selectors is so challenging.
How CSS selectors work and how to learn more about them.
How to identify sections in our design.
How the HTML section tag works.
How to use compound CSS selectors and set a background color.
How to calculate the combination of margin and padding to get the right white space.
How to use the padding shorthand properties and adding padding to our section.
What SMACSS is and how we'll use it throughout this series.