- Learn the skills to quickly start a career in Front-End Development today!
- Free tutorial
- Rating: 4.5 out of 54.5 (10,350 ratings)
- 231,534 students
- 20hr 14min of on-demand video
- Created by Davide Molin
- English
What you’ll 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).
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)
Show less
Course content
13 sections • 133 lectures • 20h 46m total lengthCollapse all sections
Introduction9 lectures • 20min
- Before starting! please read me.00:29
- Welcome and overview of the technologies we’ll deal with02:31
- Chrome, the browser we’ll use during this course01:36
- Development tools: the Editor01: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 plugins03:44
HTML Foundations10 lectures • 1hr 3min
- Prologue: how a webserver works03:55
- What is HTML02:57
- Structure of a HTML page02:42
- Structure of a HTML tag05: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 Body07:00
- Page Title, Headers and paragraphs12:52
- Div and Span, block and inline elements12:43
- Quick recap and an introduction to the DOM01:37
- Inline and Block level Elements4 questions
Semantic HTML9 lectures • 1hr 24min
- More semantic tags: section, article, header and footer11:57
- Navigating relationships with the anchor tag09:44
- Form tags14:34
- Form tags – continued11:07
- Presenting a list of elements: the list tags03:09
- Working with tabular data05:58
- Displaying Images06:53
- More semantic with Nav and Aside04:31
- HTML Workshop: mini website16:18
- Semantic tags4 questions
CSS24 lectures • 3hr 8min
- What is CSS02:28
- Inline, internal or external styles12:07
- CSS properties and measures02:13
- The ID and Class attributes05:48
- Id and class selectors07:54
- The element selector02:35
- The attribute selector06:16
- Why do we need more selectors ?08:10
- Relationship selectors11:48
- Pseudo-class selectors16:21
- CSS Box positioning14:28
- The specificity rule12:24
- Tree proximity ignorance01:14
- An !important exception to the rule08:21
- Text and Font properties18:40
- Color properties11:44
- A note on inheritance02:05
- Element boundaries: borders, margins, padding and corners09:12
- The CSS Box Model07:56
- How inline and block level elements deal with dimensions09:58
- Quick recap on box positioning22 pages
- Floating elements07:27
- Clearing floats08:28
- Quick recap on floating and clearing7 pages
HTML and CSS Workshop: From a PSD to HTML/CSS!10 lectures • 1hr 56min
- Resources for this section00:25
- Start and custom Fonts15:11
- Header18:58
- Header (part 2)17:19
- Footer11:06
- Main visual10:29
- Claims18:46
- Portfolio18:58
- Addendum: Fixing errata in Porfolio lecture00:33
- A few final touches04:30
Javascript quickstart23 lectures • 3hr 44min
- A programming language for the Web02:46
- A note about Javascript and HTML rendering in the browser01:20
- Our first running code11:48
- Variables: a place to put things in06:49
- Variable declaration and value04:20
- Basic data types and operators19:41
- The type of a variable03:11
- Functions03:10
- Functions in practice17:20
- Library and API01:36
- The Return statement00:51
- Variable scope13:55
- Let’s talk about Objects19:54
- The Object context08:08
- Assignments by value or reference10:58
- Another way to create an Object (or to skin a cat)14:21
- The function Prototype13:30
- The function Prototype workshop10:36
- Strings.. revisited07:53
- Function Callbacks09:42
- Arrays and implicit iteration19:59
- Conditional statements09:06
- Explicit iteration with the for loop12:57
The browser environment: the DOM6 lectures • 57min
- Javascript and the DOM09:29
- Let’s create some HTML using Javascript!10:18
- DOM Events03:44
- DOM Event handling exercise (part 1)16:47
- DOM Event handling exercise (part 2)13:04
- There’s room for improvement03:26
jQuery quickstart12 lectures • 1hr 42min
- jQuery primer05:34
- Using jQuery – browser events10:24
- Using jQuery – the DOM13:26
- Quick recap03:59
- HTTP REST JSON02:23
- Ajax primer05:59
- Same Origin Policy03:50
- A note about the next lecture00:20
- Update 2016: Recent changes in Chrome Security Policy08:03
- Ajax workshop (part 1)14:59
- Ajax workshop (part 2)17:58
- Ajax workshop (part 3)15:17
Advanced Javascript: Backbone.js7 lectures • 1hr 24min
- Introducing Backbone.js03:18
- Backbone.Model17:24
- Quick recap on Backbone.Model03:44
- Backbone.Collection09:48
- Backbone.View18:12
- Backbone.View and UI events12:05
- Backbone.Router19:13
BackboneJS Workshop: Foogle play store12 lectures • 3hr 1min
- Project briefing05:11
- Markup and style – the header19:13
- Markup and style – the sidebar10:07
- Markup and style – books list14:11
- Markup and style – book detail18:51
- Coding the router15: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 detail15:02
- Book detail – Debugging edge case scenarios (zip)14:37
- Underscore templating16:33
Responsive Web Development4 lectures • 36min
- Introduction to Responsive Web Development03:22
- Responsive books and categories17:04
- Refactoring the cateogories panel10:54
- Responsive book detail05:09
Introduction to testing6 lectures • 1hr
- Introduction to Unit Testing01:29
- Mocha installation and setup08:42
- Testing the Model12:19
- Testing the View – initialization09:28
- Testing the View – rendering16:03
- Testing the Router12:15
Epilogue1 lecture • 2min
- Closing thoughts02:16
