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,360 ratings)
103,938 students
Foundations of Front-End Web Development
Free tutorial
Rating: 4.4 out of 5 (5,371 ratings)
103,973 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)
Curriculum
13 sections133 lectures20h 46m total length
  • Before starting! please read me.
  • Welcome and overview of the technologies we'll deal with
  • Chrome, the browser we'll use during this course
  • Development tools: the Editor
  • Installing Sublime Text 3 (Mac)
  • Installing Sublime Text 3 (Windows)
  • Installing Sublime Text 3 (Linux)
  • Advanced Topic: Running Sublime from the command line (Mac OSX)
  • Advanced Topic: Sublime: Adding support for external plugins
  • Prologue: how a webserver works
  • What is HTML
  • Structure of a HTML page
  • Structure of a HTML tag
  • HTML and Tags: got it ?
  • Let's start coding! our first html file!!
  • Let's move it to the cloud with jsBin!
  • The Html page, the Head and the Body
  • Page Title, Headers and paragraphs
  • Div and Span, block and inline elements
  • Quick recap and an introduction to the DOM
  • Inline and Block level Elements
  • More semantic tags: section, article, header and footer
  • Navigating relationships with the anchor tag
  • Form tags
  • Form tags - continued
  • Presenting a list of elements: the list tags
  • Working with tabular data
  • Displaying Images
  • More semantic with Nav and Aside
  • HTML Workshop: mini website
  • Semantic tags
  • What is CSS
  • Inline, internal or external styles
  • CSS properties and measures
  • The ID and Class attributes
  • Id and class selectors
  • The element selector
  • The attribute selector
  • Why do we need more selectors ?
  • Relationship selectors
  • Pseudo-class selectors
  • The specificity rule
  • Tree proximity ignorance
  • An !important exception to the rule
  • Text and Font properties
  • Color properties
  • A note on inheritance
  • Element boundaries: borders, margins, padding and corners
  • The CSS Box Model
  • How inline and block level elements deal with dimensions
  • CSS Box positioning
  • Quick recap on box positioning
  • Floating elements
  • Clearing floats
  • Quick recap on floating and clearing
  • Resources for this section
  • Start and custom Fonts
  • Header
  • Header (part 2)
  • Footer
  • Main visual
  • Claims
  • Portfolio
  • Addendum: Fixing errata in Porfolio lecture
  • A few final touches
  • A programming language for the Web
  • A note about Javascript and HTML rendering in the browser
  • Our first running code
  • Variables: a place to put things in
  • Variable declaration and value
  • Basic data types and operators
  • The type of a variable
  • Functions
  • Functions in practice
  • Library and API
  • The Return statement
  • Variable scope
  • Let's talk about Objects
  • The Object context
  • Assignments by value or reference
  • Another way to create an Object (or to skin a cat)
  • The function Prototype
  • The function Prototype workshop
  • Strings.. revisited
  • Function Callbacks
  • Arrays and implicit iteration
  • Conditional statements
  • Explicit iteration with the for loop
  • Javascript and the DOM
  • Let's create some HTML using Javascript!
  • DOM Events
  • DOM Event handling exercise (part 1)
  • DOM Event handling exercise (part 2)
  • There's room for improvement
  • jQuery primer
  • Using jQuery - browser events
  • Using jQuery - the DOM
  • Quick recap
  • HTTP REST JSON
  • Ajax primer
  • Same Origin Policy
  • A note about the next lecture
  • Update 2016: Recent changes in Chrome Security Policy
  • Ajax workshop (part 1)
  • Ajax workshop (part 2)
  • Ajax workshop (part 3)
  • Introducing Backbone.js
  • Backbone.Model
  • Quick recap on Backbone.Model
  • Backbone.Collection
  • Backbone.View
  • Backbone.View and UI events
  • Backbone.Router
  • Project briefing
  • Markup and style - the header
  • Markup and style - the sidebar
  • Markup and style - books list
  • Markup and style - book detail
  • Coding the router
  • Coding the books list (part 1)
  • Coding the books list (part 2)
  • Coding the books list (part 3)
  • Coding the book detail
  • Book detail - Debugging edge case scenarios (zip)
  • Underscore templating

Instructor
Owner at CodingShack Ltd.
Davide Molin
  • 4.4 Instructor Rating
  • 5,371 Reviews
  • 103,973 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.