Description
In this course, you will learn :
- By the end of the course, you'll have all the tools and practical knowledge you need to build visually rich Single Page Web applications, go on job interviews, and launch your career as a Front End Developer!
- After completing this course, you will have covered the entire curriculum of a Junior Front End Developer. Attempt your luck by applying for jobs, receiving feedback, and building on the solid foundations established during this course!
- With the solid foundations gained in this course, it will be much easier to approach web articles and Front End Development resources, armed with the necessary background and lingo to make the most of them and learn effectively and quickly.
Syllalbus :
1. HTML Foundations
- What is HTML
- Structure of a HTML page
- Structure of a HTML tag
- 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
2. 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
3. CSS2
- 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
- Floating elements
- Clearing floats
4. 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
5. 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
6. The browser environment: the DOM
- Javascript and the DOM
- Let's create some HTML using Javascript!
- DOM Events
- DOM Event handling exercise
- There's room for improvement
7. jQuery quickstart
- 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
8. 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
9. 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
- Coding the book detail
- Book detail - Debugging edge case scenarios (zip)
- Underscore templating
10. Responsive Web Development
- Introduction to Responsive Web Development
- Responsive books and categories
- Refactoring the cateogories panel
- Responsive book detail
11. Introduction to testing
- Introduction to Unit Testing
- Mocha installation and setup
- Testing the Model
- Testing the View - initialization
- Testing the View - rendering
- Testing the Router