Best Free Front End Web Development Courses

Find the best online Free Front End Web Development Courses for you. The courses are sorted based on popularity and user ratings. We do not allow paid placements in any of our rankings.

Web Development By Doing: HTML / CSS From Scratch

Web Development From Scratch: Learn By Doing For Complete Beginners. HTML And CSS. Code Your First Website In 1 Hour.

Created by Bradley Berger - Learn Web Dev By Doing

"]

Students: 185672, Price: Free

If you're looking to get a start on learning the new, fun, and profitable skill of web development, then this course is for you. Instead of teaching tedious theory on how to code a website, you'll learn practical knowledge on how to do it. The best way to learn is by doing, and that's why you'll actually make a complete website from scratch. You'll learn two different methods, by writing the code from scratch, and using Dreamweaver, a tool that every web developer should have. You'll learn the advantages and disadvantages to using each method, and be able to see your work come to life!

Foundations of Front-End Web Development

Learn the skills to quickly start a career in Front-End Development today!

Created by Davide Molin - Fullstack Software Developer

"]

Students: 140838, Price: Free

A polite request

Please watch the presentation video BEFORE joining the course; If you don't like what you see (or my accent at the time of recording) please DO NOT enroll. I've seen many people enrolling (since, you know, it's FREE) and then leaving negative scores because they didn't fancy the accent of the instructor or because the course was "too basic" (even though it's basically written everywhere that this is a foundation course for absolute beginners).
So, don't be that guy/girl, and join only if you believe this course is right for you. If you don't like how the course is structured or its content please do  not hesitate to leave a negative score but in doing so add a comment explaining your reasons; This will help the instructor. A negative score without any comment or feedback is not useful to anyone and detrimental to other potential students.

This course was made in 2015 and, apart from a few tweaks in 2016 it hasn't seen further updates (that is one of the reasons why it's now offered for free). So, you won't find things like CSS Flexbox/Grid here. Though, its content is still super relevant nowadays and important in building a solid foundation in Front-End Development. No matter what latest technology you want to learn, you need the basics first and this is exactly what this course is for!

- What is this course all about?
 

Front End Development is a trending job, engaging, well paid and full of challenges and wonders. 

This course will teach you the skills to kick-start a career in Front End Development, assuming no previous knowledge of any of the topics presented. 

NOTE: a basic knowledge of how to use your computer and run programs is assumed.

This course is all about helping you changing your career path (or creating a new one) and acquire the necessary skills to jump into the job market as soon as possible. 

Are you tired of courses teaching you skills that you cannot easily convert into a salary ? If so, this is the course for you. 

Front End Development is an area of Web Development that includes all of the skills required to create the visual and interactive part of a Website. It's a complex mix of skills and technologies and one of the most fast growing and well paid IT sectors of the moment. 

A Front End Developer is the link between the graphic designer, responsible for creating the visual design of a Web Application and the Backend Developer responsible for creating the computational logic behind the application. The Front End Developer brings the application to life creating rich, compelling experiences and allowing the user to interact with the data behind the application. 

This comprehensive course is aimed at students with no previous experience with Web Development or programming at all;
 

The course was recorded on a Mac OSX machine; You can still benefit from this course if you're using Windows but you are required to have basic knowledge on how to use the Windows Explorer and create folders and files with it. You can easily avoid using the Windows command prompt (in the very rare videos that use the Terminal) and instead do what the video shows just using your WIndows Explorer (it's mostly creating folders and files).

- What will I learn taking this course?

We'll touch on all the foundational topics that form the toolbelt of a professional Front End Developer: 

  • Semantic HTML

  • CSS

  • Responsive Web Development

  • Javascript, Ajax and a dash of jQuery

  • Backbone.js!

  • The art of Unit Testing (brownie points during an Interview!)

We'll learn by doing, building projects and adding functionalities over time, as our knowledge expands. 

- What will I get from this course?

By the end of the course, you'll have all the tools and practical knowledge necessary to build visually rich Single page Web applications, try your luck with job interviews and kick-start your career as a Front End Developer! 

Try AngularJS: Beginner’s Guide to Front End Web Development

Built and managed by Google, AngularJS is one of the most powerful front-end frameworks in the world.

Created by Justin Mitchel - Coding Entrepreneur & Teacher - 568,000+ Students

"]

Students: 78241, Price: Free

If the internet was created today, AngularJS's core functionalities would have been built-in on day one. That's the mindset the developers had when they were creating AngularJS... how would we create a framework that would fix all of the core issues with the beginning of the internet? 

Here's a simple concept: <h1></h1>

If you're familiar with HTML then you know this to be a heading tag which has default formatting on all web browsers. In short, it makes text stand out.

What if you wanted a tag like: <awesome-sauce></awesome-sauce>? Like just that tag? With it's own default formatting and function? With AngularJS this is downright simple. It's called a directive and something you'll learn in this series.

How about easy filtering of content in a list? Or ordering? These things can be done using other technology but AngularJS makes is super simple. 

This course is here to teach you the fundamentals of AngularJS to build a blog application complete with filtering, directives, searching, typeahead, ordering, ngResource, and much more.

Master the Basics of HTML5 & CSS3: Beginner Web Development

Start your journey towards becoming a bona fide web developer by learning these foundational concepts of coding

Created by MindMekka ® - Motivate. Educate. Elevate.

"]

Students: 75081, Price: Free

Whether it's someone that's looking for a career change…

An entrepreneur who needs a website for his business but lacks the funds needed for outsourcing…

Or just those seeking personal enrichment;

The fact remains that, in the world of today, web development skills and knowledge are becoming increasingly sought-after and, therefore, also increasingly valuable.

This course is meant for those brave individuals who wish to take their first steps into the world of Web Development. It's meant to give you a taste of this vast and interesting field so that you can accurately determine if this is something you wish to pursue.

Coding is the language of the future. Come join me in this course and let's start working on those ABC's…

Full Stack Website Development : Technologies All in One

An introduction for beginners to the development stack, learn about the technologies with a short demo to get started

Created by Setsoto Hlohlomi - IT System Administrator, MCSA and Developer

"]

Students: 28464, Price: Free

This is a beginner course to teach you about the development stack, front end, back end and full stack development. It is mostly theoretical with short demo's to get you strated. You will learn about the technologies required to become a web developer for each stack such as HTML, CSS, Javascript, PHP etc and also learn about the frameworks that make our lives easier such as Bootstrap, Angular JS as well as how to choose technologies for your project and keeping up to date with the latest versions.

PSD to HTML5: Making a Newsletter Template with Bootstrap 4

Learn by coding in this course designed for individuals who're interested to build a career in Front End Web Development

Created by Md Shahriar Mobarak - Full Stack Web Developer

"]

Students: 4122, Price: Free

In this course, I will make a newsletter sign up template from scratch using Bootstrap 4. The newsletter will be a professional one which you can use in the future for your own project. Everything will be shown step by step.

For the icon, I'll be using Font Awesome and for the code editor, I'll be using Visual Studio Code. Even if you are comfortable with any other code editor that's completely fine.

At first, I'll code the entire markup for the section and then tackle the style part.

Even if you don't have any coding experiences, you'll be able to pull off this course.

I hope you enjoy this course.

Css Positions For Beginners

Learn all about the CSS position property with examples

Created by Norhan Khafaga - Software developer

"]

Students: 1791, Price: Free

CSS positions are the properties that used to put the html elements in any place we want in the webpage. Position property allows developers create complex layout that can not be done by floats of even flex box.

The position property can help you manipulate the location of an element with the help of othe css properties.

Using this property you can choose whether to have the element be positioned according to the normal flow of the page (default), you can shift its position or “nudge” it while maintaining its position in the flow, you can position it relative to another element on the page, or you can position it relative to the viewport.

There are five position values an element can take : Static, Relative, Absolute, Fixed and Sticky.

,which each one has a different effect on the element.

All elements are by default positioned “statically” on a page. A static position defines the position of an element in the normal flow of the page. It is the default position of every element. When an element is referred to as a positioned element, it means that its position has been changed from being static, to one of four available values: relative, absolute, fixed, sticky.

There are new position values added in css3.

In this tutorial we will learn every thing about positions by practicle examples.

The examples we will create:

  • Fixed Sidebar

  • Social Media box.

  • Overlay for section.

  • Image card.

  • Menu bar with submenu.

  • Fixed Navigation bar.

  • Sales card.

  • Much More.

Students must have some basic knowledge in html and css in order to understand the examples.

There are a lot of css properties work with positions or in another word make the position proterty have their strength.

those properties are: top, bottom, left, right and z-index.

We will learn about those properties also.