Foundations of Front-End Web Development

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

4.40 (10123 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Foundations of Front-End Web Development
223,719
students
21 hours
content
Jan 2021
last update
FREE
regular price

What you will learn

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).

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! 

Content

Introduction

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

HTML Foundations

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

Semantic HTML

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

CSS

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

HTML and CSS Workshop: From a PSD to HTML/CSS!

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

Javascript quickstart

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

The browser environment: the DOM

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 quickstart

jQuery primer
Using jQuery - browser events
Using jQuery - the DOM
Quick recap
HTTP REST JSON
Ajax primer
Same Origin Policy
Update 2016: Recent changes in Chrome Security Policy
Ajax workshop (part 1)
Ajax workshop (part 2)
Ajax workshop (part 3)

Advanced Javascript: Backbone.js

Introducing Backbone.js
Backbone.Model
Quick recap on Backbone.Model
Backbone.Collection
Backbone.View
Backbone.View and UI events
Backbone.Router

BackboneJS Workshop: Foogle play store

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

Responsive Web Development

Introduction to Responsive Web Development
Responsive books and categories
Refactoring the cateogories panel
Responsive book detail

Testing your code like a Pro!

Introduction to Unit Testing
Mocha installation and setup
Testing the Model
Testing the View - initialization
Testing the View - rendering
Testing the Router

Epilogue

Closing thoughts

Screenshots

Foundations of Front-End Web Development - Screenshot_01Foundations of Front-End Web Development - Screenshot_02Foundations of Front-End Web Development - Screenshot_03Foundations of Front-End Web Development - Screenshot_04

Reviews

Athena
November 15, 2023
Some links and scripts were a bit outdated by the time I joined the course. Nevertheless, Mr. Molin's approach was refreshing and beginner-friendly.
Sanjay
October 20, 2023
Its a very good course,so far.Impressive dialogue delivery by the instructor.Its clear that Instructor has good grasp on subject and to deliver that smoothly and effeciently.
Oumer
September 6, 2023
I was finding front end development courses and I didn't get good tutorials, but after I start this I see amazing progress on my web development skill.
Bryan
August 30, 2023
I'm liking it so far. The instructor does a good job at explaining everything in an easy to understand way. I also like the size and content of every segment.
Suraj
July 29, 2023
yeah!it was superb i am actually looking for more courses like this or from you man! where to find them?
Keven
July 25, 2023
Amazing knowledge for a start-up like me. I don't have an IT background, but slowly I understand this.
Hiroko
July 8, 2023
This course is very helpful if you are familiar with CSS and HTML. By the end of this course, you will certainly have gained knowledge of PHP. Excellent work, Brad.
Chris
June 29, 2023
all what i can say is that this course has totally satisfy me the explanation and grammar used are incredible.
Rushikesh
June 18, 2023
this is a good course for web development students, there is so simple and easy to understand for me this is a very perfect course to learn how to build the websites for your.
Gopinath
June 6, 2023
This is an amazing course for me who is a commerce student and who didnt know ABCD about web designing. Truly appriciate David Molin for the excellent way of teaching. Will recommend to my freinds.
Nisar
June 1, 2023
Yes It is great course I love it. the way of teaching is very impressive, detailed, and to the point. everything is crystal clear. God bless the tutor with strength for doing more work for teaching. Forever reward !
Alison
May 12, 2023
I'm feeling a bit lost, but not a confident computer user - first time on a mac and coudln't open the folders. I like the tone and pace of the presentation, happy to continue.
Héctor
May 2, 2023
todo bien todo correcto, considera los sistemas operativos mas usados y sugiere buenas herramientas de trabajo
Kristen
March 8, 2023
This was a very challenging course, but it really gave me the foundation I need to proceed with being a Front End Developer. I will likely take other courses to build my skills.
Fahad
March 6, 2023
It is good course for beginners especially for those who live in continental areas. the accent of tutor is easy to understand for them

Charts

Price

Foundations of Front-End Web Development - Price chart

Rating

Foundations of Front-End Web Development - Ratings chart

Enrollment distribution

Foundations of Front-End Web Development - Distribution chart
311538
udemy ID
10/1/2014
course created date
9/28/2019
course indexed date
Bot
course submited by