Foundations of Front-End Web Development

Learn the skills to quickly start a career in Front-End Development today!
Free tutorial
Rating: 4.4 out of 5 (5,572 ratings)
107,079 students
Foundations of Front-End Web Development
Free tutorial
Rating: 4.4 out of 5 (5,572 ratings)
107,079 students
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 kickstart your career as a Front End Developer!
After completion you'll have touched upon the comprehensive curriculum of a Junior Front End Developer. Try your luck, applying for jobs, getting feedbacks and improving on the solid foundations built during this course!
With the solid foundations acquired in this course, it will be much way easier to approach web articles and resources on Front End Development, armed with the necessary background and lingo to make the most out of them, learn effectively and quickly.
With the basics knowledge out of the way, the world is your oyster! Expand on the foundational knowledge acquired and specialize in further niches (AngularJs, EmberJs, Gaming, Full Stack Development).

Requirements

  • This course assumes no previous knowledge on any topic. Every topic will be approached from scratch.
  • At the end of the course the student will have all the basic foundations for approaching the job market as a Junior Front End Developer. Moreover, the foundational knowledge acquired will make much easier to learn additional topics and build on top of what have been learnt so far
Description

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! 

Who this course is for:
  • This course should be taken by anyone interested in learning the ropes for becoming a Front End Developer, one of the best trending and exciting areas of Web Development at the moment
  • This course should Not be taken by people interested in Server Side Development (PHP, Java, Databases..). This course focuses on all the technologies related to the Web browser environment (HTML/CSS/Javascript/Frameworks/Testing)
Course content
13 sections133 lectures20h 46m total length
  • Before starting! please read me.
    00:29
  • Welcome and overview of the technologies we'll deal with
    02:31
  • Chrome, the browser we'll use during this course
    01:36
  • Development tools: the Editor
    01:43
  • Installing Sublime Text 3 (Mac)
    01:58
  • Installing Sublime Text 3 (Windows)
    01:51
  • Installing Sublime Text 3 (Linux)
    01:49
  • Advanced Topic: Running Sublime from the command line (Mac OSX)
    04:17
  • Advanced Topic: Sublime: Adding support for external plugins
    03:44
  • Prologue: how a webserver works
    03:55
  • What is HTML
    02:57
  • Structure of a HTML page
    02:42
  • Structure of a HTML tag
    05:33
  • HTML and Tags: got it ?
    5 questions
  • Let's start coding! our first html file!!
    04:49
  • Let's move it to the cloud with jsBin!
    08:26
  • The Html page, the Head and the Body
    07:00
  • Page Title, Headers and paragraphs
    12:52
  • Div and Span, block and inline elements
    12:43
  • Quick recap and an introduction to the DOM
    01:37
  • Inline and Block level Elements
    4 questions
  • More semantic tags: section, article, header and footer
    11:57
  • Navigating relationships with the anchor tag
    09:44
  • Form tags
    14:34
  • Form tags - continued
    11:07
  • Presenting a list of elements: the list tags
    03:09
  • Working with tabular data
    05:58
  • Displaying Images
    06:53
  • More semantic with Nav and Aside
    04:31
  • HTML Workshop: mini website
    16:18
  • Semantic tags
    4 questions
  • What is CSS
    02:28
  • Inline, internal or external styles
    12:07
  • CSS properties and measures
    02:13
  • The ID and Class attributes
    05:48
  • Id and class selectors
    07:54
  • The element selector
    02:35
  • The attribute selector
    06:16
  • Why do we need more selectors ?
    08:10
  • Relationship selectors
    11:48
  • Pseudo-class selectors
    16:21
  • The specificity rule
    12:24
  • Tree proximity ignorance
    01:14
  • An !important exception to the rule
    08:21
  • Text and Font properties
    18:40
  • Color properties
    11:44
  • A note on inheritance
    02:05
  • Element boundaries: borders, margins, padding and corners
    09:12
  • The CSS Box Model
    07:56
  • How inline and block level elements deal with dimensions
    09:58
  • CSS Box positioning
    14:28
  • Quick recap on box positioning
    22 pages
  • Floating elements
    07:27
  • Clearing floats
    08:28
  • Quick recap on floating and clearing
    7 pages
  • Resources for this section
    00:25
  • Start and custom Fonts
    15:11
  • Header
    18:58
  • Header (part 2)
    17:19
  • Footer
    11:06
  • Main visual
    10:29
  • Claims
    18:46
  • Portfolio
    18:58
  • Addendum: Fixing errata in Porfolio lecture
    00:33
  • A few final touches
    04:30
  • A programming language for the Web
    02:46
  • A note about Javascript and HTML rendering in the browser
    01:20
  • Our first running code
    11:48
  • Variables: a place to put things in
    06:49
  • Variable declaration and value
    04:20
  • Basic data types and operators
    19:41
  • The type of a variable
    03:11
  • Functions
    03:10
  • Functions in practice
    17:20
  • Library and API
    01:36
  • The Return statement
    00:51
  • Variable scope
    13:55
  • Let's talk about Objects
    19:54
  • The Object context
    08:08
  • Assignments by value or reference
    10:58
  • Another way to create an Object (or to skin a cat)
    14:21
  • The function Prototype
    13:30
  • The function Prototype workshop
    10:36
  • Strings.. revisited
    07:53
  • Function Callbacks
    09:42
  • Arrays and implicit iteration
    19:59
  • Conditional statements
    09:06
  • Explicit iteration with the for loop
    12:57
  • Javascript and the DOM
    09:29
  • Let's create some HTML using Javascript!
    10:18
  • DOM Events
    03:44
  • DOM Event handling exercise (part 1)
    16:47
  • DOM Event handling exercise (part 2)
    13:04
  • There's room for improvement
    03:26
  • jQuery primer
    05:34
  • Using jQuery - browser events
    10:24
  • Using jQuery - the DOM
    13:26
  • Quick recap
    03:59
  • HTTP REST JSON
    02:23
  • Ajax primer
    05:59
  • Same Origin Policy
    03:50
  • A note about the next lecture
    00:20
  • Update 2016: Recent changes in Chrome Security Policy
    08:03
  • Ajax workshop (part 1)
    14:59
  • Ajax workshop (part 2)
    17:58
  • Ajax workshop (part 3)
    15:17
  • Introducing Backbone.js
    03:18
  • Backbone.Model
    17:24
  • Quick recap on Backbone.Model
    03:44
  • Backbone.Collection
    09:48
  • Backbone.View
    18:12
  • Backbone.View and UI events
    12:05
  • Backbone.Router
    19:13
  • Project briefing
    05:11
  • Markup and style - the header
    19:13
  • Markup and style - the sidebar
    10:07
  • Markup and style - books list
    14:11
  • Markup and style - book detail
    18:51
  • Coding the router
    15:38
  • Coding the books list (part 1)
    17:59
  • Coding the books list (part 2)
    15:35
  • Coding the books list (part 3)
    18:10
  • Coding the book detail
    15:02
  • Book detail - Debugging edge case scenarios (zip)
    14:37
  • Underscore templating
    16:33

Instructor
Owner at CodingShack Ltd.
Davide Molin
  • 4.4 Instructor Rating
  • 5,572 Reviews
  • 107,095 Students
  • 1 Course

Davide has been passionate about Art, Technology, computers and all tech stuff since he was a kid.

He self-learned programming in C and landed his first job in the nineties, then C++, Object Oriented Programming and then Java and Web Application development in 1999. In 2005 he fell in love with Javascript and Ajax and in 2009 he switched completely to Front End Development full time.

He's been working as a full time developer since 1995, working for companies like Electronic Arts, Mind Candy, Beamly, SAP and global consultancies in different Countries.

He's a firm believer that everything can be learned, if committing enough time and passion into it.

He often enjoys reminding people that you can become a successful developer even without a background in maths (he doesn't have one, nor a degree, having studied Advertising).

He firmly believes that passion and practice are key factors in becoming a successful Web Developer.

He's currently the owner of CodingShack Ltd in London, UK, offering Front End Development consultancy services in London and online training.

When he's not working, playing or dozing in front of his Mac, you can find him enjoying the company of his lovely wife, reading SciFi novels, playing with his favorite Flight Simulator (X-Plane!) and reading/practicing TaiChi/QiGong.