Foundations of Front-End Web Development
- 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
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:
Responsive Web Development
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!
- 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
- 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
- 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
- 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
- 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
- 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
- CSS Box positioning14:28
- Quick recap on box positioning22 pages
- Floating elements07:27
- Clearing floats08:28
- Quick recap on floating and clearing7 pages
- Resources for this section00:25
- Start and custom Fonts15:11
- Header (part 2)17:19
- Main visual10:29
- Addendum: Fixing errata in Porfolio lecture00:33
- A few final touches04:30
- A programming language for the Web02:46
- 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
- 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
- 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 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
- Introducing Backbone.js03:18
- Quick recap on Backbone.Model03:44
- Backbone.View and UI events12:05
- 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
Davide has been passionate about Art, Technology, computers and all tech stuff since he was a kid.
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.