Play all

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

Description:

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.

Front End Development Series

Add to list

#Programming #Web Development #Computer Science #Programming Languages #Javascript #HTML & CSS #Sass #Social Sciences #Sociology #Accessibility #HTML #Web Design #Responsive Design #Front-end Development #Semantic HTML

0:00 / 0:00