Foundations of Front-End Web Development
- Description
- Curriculum
- FAQ
- Reviews
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!
-
1
Before starting! please read me. -
2
Welcome and overview of the technologies we'll deal withHi and welcome to the course!
In this lecture I'll give you an introduction to the topics that we'll go through during our learning journey,
By the end of this lesson, you'll have a clear idea of the many tools and technologies you'll come to master by the end of the course.
-
3
Chrome, the browser we'll use during this course
In this lecture I'll introduce the browser that we'll be using during all of our course for development, Google chrome and I'll explain why it's my program of choice for Front End Web Development.
-
4
Development tools: the Editor
In this lecture I'll introduce the editor that we'll be using during this course, Sublime Text.
A free copy of the editor (for personal use and evaluation purposes) can be downloaded from the following link:
-
5
Installing Sublime Text 3 (Mac)
In this lesson we'll see how to install Sublime Text 3 on a Mac OSX System
-
6
Installing Sublime Text 3 (Windows)
In this lesson we'll see how to install Sublime Text 3 on a MS Windows System
-
7
Installing Sublime Text 3 (Linux)
In this lesson we'll see how to install Sublime Text 3 on a Linux System (Ubuntu)
-
8
Advanced Topic: Running Sublime from the command line (Mac OSX)
In this lesson we'll see how to run Sublime Text 3 from the command line in a Mac OSX System,
-
9
Advanced Topic: Sublime: Adding support for external plugins
In this lecture we'll learn how to expand the functionalities of Sublime Text 3 using Package Control, that will give us access to a huge number of third party plugins.
-
10
Prologue: how a webserver works
In this lecture we'll see how a webserver works and how a few files on a computer can be turned into a web site
-
11
What is HTML
In this lecture, you'll learn what HTML is and what's its use in modern web application development.
-
12
Structure of a HTML page
In this lecture, we'll take a look at how a HTML page is structured and how it's evaluated by the browser when loaded and parsed.
-
13
Structure of a HTML tag
In this lecture we'll learn what an HTML tag is and what are its purpose and structure
-
14
HTML and Tags: got it ?This quiz will help you verify your understanding of what HTML is for, how an HTML page is structured and how tags can be used in a HTML document.
-
15
Let's start coding! our first html file!!
In this lecture we'll apply what we've seen so far and we'll learn how to write our first HTML file!
-
16
Let's move it to the cloud with jsBin!
In this lecture, we'll learn how to use the free online service JSBIN to experiment with HTML in real time, within the browser!
-
17
The Html page, the Head and the Body
In this lecture, we'll learn about the structure of an HTML page and we'll take a first look at the first two main section, HEAD and BODY.
External Resources for this lecture:
-
18
Page Title, Headers and paragraphs
In this lecture, we'll learn about the page title tag, the header tag and the paragraph tag.
JSBIN session for this lecture: JSBIN session
External Resources for this lecture
-
19
Div and Span, block and inline elements
In this lecture we'll learn what DIV and SPAN are and what they are used for. Through them we'll learn the difference between a block level element and an inline element.
JSBIN session for this lecture: JSBIN session
-
20
Quick recap and an introduction to the DOM
In this lecture we'll recap what we've seen so far and we'll expand on the browser Document Object Model.
-
21
Inline and Block level Elements
-
22
More semantic tags: section, article, header and footer
In this lecture we'll take a look at some more semantic tags available in the current version of HTML: Section, Article, Header and Footer.
in the downloadable resources you'll find the compressed html file used for this lecture (index.html.zip)
External Resources:
-
23
Navigating relationships with the anchor tag
In this lecture we'll take a look at one of the most popular HTML markup language Tag of all time: the Anchor tag.
In the downloadable resources you'll find the compressed files used in this lecture (anchor-tag.zip)
-
24
Form tags
In this lecture we'll learn how to use form tags, that allow us to collect information from the user and send it to the server.
In the downloadable resources you'll find the compressed html file used for this lecture (form.html.zip)
External Resources
-
25
Form tags - continued
In this lecture we'll continue exploring how HTML forms work and how form data get transferred from the browser to the server when clicking on the submit button.
In the downloadable resources you'll find the compressed html file used for this lecture (form.html.zip)
-
26
Presenting a list of elements: the list tags
In this lecture we'll take a look at the HTML list tag.
External Resources
-
27
Working with tabular data
In this lecture we'll take a look at how to present tabular information in our page using the table HTML tag.
In the downloadable resources you'll find the compressed html file used for this lecture (tables.html.zip)
-
28
Displaying Images
In this lesson we'll see how to add cool images to our web page!
Remember to uncompress the images.zip file to your experiments folder, where we have all our html files.
-
29
More semantic with Nav and Aside
In this lecture we'll learn how two additional HTML5 tags, Nav and Aside, can be used to add more meaning to our markup when creating navigation bars and tangential content (like sidebars) in our page.
In the downloadable resources you'll find the compressed html file used for this lecture (navaside.html.zip)
External Resources
-
30
HTML Workshop: mini website
In this lecture we'll put together what we've seen so far and we'll create a small minisite with a homepage and a contact us page.
-
31
Semantic tags
-
32
What is CSS
In this lecture we'll learn what CSS is and how it's used to apply styles and color to a markup document
-
33
Inline, internal or external styles
In this lecture we'll take a look at how a set of CSS rules (also called stylesheet) can be applied to a webpage.
In the downloadable resources you'll find the compressed project files used for this lecture (css-1.zip)
-
34
CSS properties and measures
In this lecture will take a quick look at the major categories of CSS properties we'll deal with and what units of measure are used to express their values.
-
35
The ID and Class attributes
In this lecture will introduce the ID and CLASS markup attributes, detailing their purpose and how they differ between each others
JSBIN Session: JSBIN session
-
36
Id and class selectors
In this lecture we'll take a look at how ID and CLASS attributes can be targeted and used by CSS selectors.
JSBIN Session: JSBIN Session
-
37
The element selector
In this lecture we'll take a look at what element sectors are and how we can use them to style our markup.
JSBIN session: JSBIN Session
-
38
The attribute selector
In this lecture we'll take a look at the attribute selector and we'll see how it can be used for CSS styling.
JSBIN Session: JSBIN Session
External Resources
-
39
Why do we need more selectors ?
In this lecture we'll see what the shortcomings are with the CSS selectors that we've seen so far and why we need more specialised selectors to overcome these limitations.
In the downloadable resources you'll find the compressed html file used in this lecture (relationships-part1.html.zip)
-
40
Relationship selectors
In this video we'll take a look at relationship selectors; CSS has a way to select elements based on their relationships.
In the downloadable material you'll find the compressed html file used for this lecture (relationships.html.zip).
Icons made by Freepik from www.flaticon.com is licensed under CC BY 3.0
-
41
Pseudo-class selectors
In this lecture we're going to take a look at pseudo class selectors, used to specify a special state for the element to be selected.
External Resources
JSBIN for experimenting with pseudo classes: JSBIN Session
-
42
The specificity rule
In this lecture we'll learn and understand how the browser determines which rule to apply when more than one rules match the same element.
External Resources
-
43
Tree proximity ignorance
In this lecture we'll learn that CSS rules are not influenced by HTML elements proximity when computing specificity values
-
44
An !important exception to the rule
In this lecture we'll see how rules can be overridden, no matter how specific they are.
Overriding rules this way is something you won't do usually (and you should really avoid doing that if possible, since it makes maintenance of your CSS really difficult) but it's an useful tool to have in your toolbelt for those emergency situations when no other options are available.
JSBIN for this lecture: JSBIN session
-
45
Text and Font properties
In this lecture we'll have a look at the CSS properties that affect the way text gets rendered in your web page.
JSBIN for this lecture: JSBIN session
-
46
Color properties
In this lecture we'll take a look at how color properties can be used in CSS to affect the color of the various elements of our User Interface.
JSBIN as starting point for the lecture: JSBIN Session
JSBIN at the end of the lecture: JSBIN Session
External Resources
-
47
A note on inheritance
In this lecture we'll discuss how properties are inherited by descendants of an element.
In particular we'll see how text-related properties are generally inherited, while box-related ones not.
Properties than can be inherited are: color, font, letter-spacing, line-height, list-style, text-align text-indent, text-transform, visibility, white-space and word-spacing
Properties that cannot be inherited are background, border, display, float and clear, height and width, margin, min- and max-height and -width, outline, overflow, padding, position, text-decoration, vertical-align and z-index.
JSBIN for this lesson: JSBIN session
External Resources
-
48
Element boundaries: borders, margins, padding and corners
In this lecture we'll take a look at some of the properties available that define shape and boundaries of an element.
In the downloadable materials you'll find the compressed html file used for this lecture (boundaries.html.zip)
External Resources
-
49
The CSS Box Model
In this lecture we'll talk about the way elements size are computed by the browser, using a default box model (called content-box) and how to change it to a more convenient type (border-box) to better control the size of our HTML elements on the page.
In the downloadable materials you'll find the compressed html file used for this lecture (boxmodel.html.zip)
External Resources
-
50
How inline and block level elements deal with dimensions
In this lecture we'll take a look at how inline elements and block level elements work with dimension properties.
JSBIN session for inline element: JSBIN session
JSBIN session for block element: JSBIN session
JSBIN session for align: JSBIN session
Attributions: icon "new" has been provided by http://www.webdesignerdepot.com/
-
51
CSS Box positioning
In this lecture we'll take a look at the CSS position property, that determine the way an element get positioned in the webpage.
JSBIN session for positioning elements: JSBIN session
JSBIN session for positioning example: JSBIN session
-
52
Quick recap on box positioning
In this lecture we'll recap briefly what we've seen so far about the CSS position property and how it affects elements.
JSBIN example on fixed positioning:
-
53
Floating elements
In this lecture we'll take a look at floating elements and how they relate to the document flow.
JSBIN used for this lecture:
-
54
Clearing floats
In this lecture we'll take a look at how we can solve the containment issue when dealing with floated elements (see lecture on floating elements for a detailed explanation of this issue).
JSBIN Sessions used for this lecture:
-
55
Quick recap on floating and clearing
-
56
Resources for this section
-
57
Start and custom Fonts
In this lecture we'll start creating the basic folder structure and files for our project and we'll see how to add custom fonts to our index.html file.
In the downloadable materials you'll find the compressed project files used for this lecture (cssws-code-1.zip)
External Resources
-
58
Header
In this worskhop lecture we'll focus our attention on the header of the page.
In the downloadable materials you'll find the compressed project files used for this lecture (cssws-code-2.zip)
External Resources
-
59
Header (part 2)
In this workshop lecture we'll continue and finish working on our page header.
In the downloadable resources you'll find the compressed project files used for this lecture (cssws-code-3.zip)
External Resources
-
60
Footer
In this workshop lecture we'll focus on the footer of our web page.
In the downloadable materials you'll find:
- the pattern.png file used for the footer top background
- the compressed project files used for this lecture (cssws-code-4.zip)
-
61
Main visual
In this workshop lecture we'll focus on the main visual for the page, our "hero" image.
In the downloadable materials you'll find the compressed project files used for this lecture (cssws-code-5.zip)
External Resources
-
62
Claims
In this workshop lecture we'll focus on the marketing claims area and their column layout.
In the downloadable materials you'll find the compressed project files used for this lecture (cssws-code-6.zip)
-
63
Portfolio
In this workshop lecture we'll focus our attention on the portfolio section, finishing up our general work on the web page.
In the downloadable materials you'll find the compressed project files used for this lecture (csws-code-7.zip)
-
64
Addendum: Fixing errata in Porfolio lecture
There's a small fix we need to add to the portfolio section that didn't make its way into the video and the code. This fix will solve an issue with the last portfolio image horizontally overflowing outside of the section.
-
65
A few final touches
In this workshop lecture we'll add a few final touches to our complete homepage, making it more SEO friendly and cross browser compatible.
In the downloadable materials you'll find the compressed project files used for this lecture (cssws-code-8.zip)
-
66
A programming language for the Web
In this introductory lecture we'll take a look at what Javascript is and what it's used for in a typical rich interactive application.
-
67
A note about Javascript and HTML rendering in the browser
-
68
Our first running code
In this lecture we'll start writing some Javascript!
In the downloadable materials you'll find the compressed project files used for this lecture (js-code-1.zip)
External Resources
-
69
Variables: a place to put things in
In this lecture we'll learn what Javascript variables are and how they can be used to store information used by our running code.
External Resources
-
70
Variable declaration and value
In this lecture we'll learn how to 'create' new variables through a variable declaration and the difference between an undefined value and a null value.
External Resources
-
71
Basic data types and operators
In this lecture we'll take a look at the basic variable data types we've access to in Javascript.
External Resources
-
72
The type of a variable
In this lecture we'll learn how variables types in Javascript are dynamic in nature, compared to other programming languages.
-
73
Functions
In this lecture we'll take a look at "functions", the reusable unit of code in Javascript.
-
74
Functions in practice
We follow up from the last lecture and try to put in practice what we just learned about functions..
JSBIN session for this lecture: JSBIN session
External Resources
-
75
Library and API
In this lecture we'll take a look at the difference between a Javascript library and an API.
External Resources
-
76
The Return statement
In this short lecture we'll take a quick look at the return statement.
JSBIN Session for this lecture: JSBIN session
External Resources
-
77
Variable scope
In this lecture we'll take a look at variable scope, that defines what your code can "see" when it's executing.
JSBIN session for this lecture: JSBIN session
-
78
Let's talk about Objects
In this lecture we'll talk about what javascript objects are and how we can create.
JSBIN session for this lecture: JSBIN session
External Resources
-
79
The Object context
In this lecture we'll take a closer look at objects and we'll see how they influence functions when called through an object.
JSBIN session for this lecture: JSBIN session
External Resources
-
80
Assignments by value or reference
In this lecture we'll learn how assignments in Javascript work by value or by reference, depending on the nature of the operand on the right side of the assignment. We'll see how assignment work when applied to primitive values, objects and functions
JSBIN session for this lecture: JSBIN session
-
81
Another way to create an Object (or to skin a cat)
In this lecture we'll learn another way to create an object, beside the object literal technique we've learnt so far.
JSBIN session for this lecture: JSBIN session
-
82
The function Prototype
In this lecture we'll take a look at the "prototype" property, that we've access to within a function.
JSBIN session for this lecture: JSBIN session
-
83
The function Prototype workshop
In this lecture we'll expand on the function prototype and experiment with it with practical applications.
JSBIN session for this lecture: JSBIN session
-
84
Strings.. revisited
In this video we'll talk about strings again, but with a new perspective on them and we'll uncover additional truths about them.
JSBIN session for this lecture: JSBIN session
External Resources
-
85
Function Callbacks
In this video we'll take a look at Callbacks, a way of using functions to be "called back" later.
JSBIN session for the first part of the lecture: JSBIN session
JSBIN session used from 2'52" in the lecture: JSBIN session
-
86
Arrays and implicit iteration
In this lecture we'll take a look at Arrays and how we can inspect their content.
JSBIN session for this lecture: JSBIN session
-
87
Conditional statements
In this video we'll take a look at conditional statements. A conditional statement is just a way to check for a condition and act on it.
JSBIN session for this lecture: JSBIN session
External Resources:
-
88
Explicit iteration with the for loop
In this lecture we'll learn how to iterate over the properties of an Array using another method, called "explicit iteration"
JSBIN session for this lecture: JSBIN session
