Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

YouTube

Front End Development Series

via YouTube

Overview

Prepare for a new career with $100 off Coursera Plus
Gear up for jobs in high-demand fields: data analytics, digital marketing, and more.
This course on front end development aims to teach learners how to convert web page mockups into fully functioning web pages using CSS, HTML, and JavaScript. The course covers topics such as basic HTML tags, semantic HTML, SASS, responsive design, accessibility, front-end performance, and automation tools like Grunt. The intended audience includes individuals looking to upgrade their front-end skills, make adjustments to HTML/CSS/JavaScript, or learn modern front end development practices and tools to increase their value in the workplace or work independently on projects. The course is suitable for beginners with no prior experience in HTML, CSS, or JavaScript, as it starts from the basics and progresses to more advanced topics essential for modern front end developers.

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.

Taught by

BuildAModule

Reviews

Start your review of Front End Development Series

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.