HTML
-
HTML main tags
-
HTML5 Structural / Semantic elements
-
HTML Elements and their attributes
-
HTML Formatting
-
HTML Comments
<!-- -->Link -
HTML forms Link
CSS
- Adding a CSS stylesheet to an HTML page using
<link> - CSS Selectors
- Color
- using hex eg:
#ff0000 - rgb eg:
rgb(0,0,255) - common color names eg:
red, pink, brown
- using hex eg:
- Font
- Family
- Size
- Weight
- Text
- Decoration
- Transform
- Line-height
- Letter-spacing
- Word-spacing
- Background-color
- Background-image
- Margin
- Padding
- Border
- Width
- Height
- percentage, pixel, em
- Box model
- List
- style
- style-image
- Pseudo class
- hover
- active
- visited
- Position
- relative
- absolute
- fixed
- Display
- block
- none
- [type="text"]
- class vs id
Step up CSS
- animations
- transition property
- @keyframes
- animation property -
name,duration,timing-function,delay,iteration-count,direction
- flexbox
- grid
- media query to build responsive sites
- CSS Specificity
JavaScript
Fundamentals
- Adding JavaScript to an HTML page using
<script> -
alert -
console.log - Comments
- Variables -
var,let,const - Data types - String, Boolean, Number, null, undefined
-
typeofoperator - String functions - concatenation - template strings -
.length-.toUpperCase, .toLowerCase-subString-split, - Operators
-
+ -
- -
/ -
* -
- -
++ -
-- -
- -
= -
- -
< -
> -
<= -
>= -
== -
=== -
&& -
|| -
Ternary operators ? , :
-
- Loops
-
for -
while
-
- Conditionals
-
if... else -
switch
-
- Array
- Accessing elements
- Looping through elements
-
map -
forEach
-
-
splice -
slice -
filter -
push,pop -
shift,unshift -
isArray -
indexOf
- Object
- Accessing properties
- Object destructuring
- Looping through elements
-
for... of -
forEach -
.entries,.keys -
.create -
.hasOwnProperty
-
- JSON objects
-
JSON.stringify
-
- Functions
- Named functions
- Anonymous functions
- Arrow functions
() => { } - IIFE - Immediately Invoked Function Expressions
-
thiskeyword - Constructor functions
- Instantiating a new object
- Accessing properties and methods
- Prototypes
- Inheriting properties
- Extending properties
- Accessing properties and methods
- ES6 Classes
-
constructor()
-
-
setTimeout
Web page and JavaScript
-
document.getElementById -
document.getElementsByTagName -
document.getElementsByClassName -
document.getElementsByName -
document.querySelector -
document.querySelectorAll -
.createElement -
.innerHTML -
.innerText -
.append() -
.remove() -
.appendChild -
.style -
events-
.addEventListener -
.removeEventListener -
event.preventDefault
-
Step up JavaScript
-
bind,call,apply - Scopes
- Hoisting
- Event bubbling
- Event Capturing
- Promises
- Callbacks
- async / await
- AJAX (XMLHttpRequest)
- Making API calls using
fetch,axios - Event loop
- Closures
- Service Workers
- Browser events
- Forms
- Form properties and methods
- Form events: focus, blur, submit
- Form validation
Web fundamentals
- How does the web work?
- HTTP basics
- headers
- request
- response
- verbs: PUT, POST, DELETE, PATCH, POST
- What is an API? 1. [ ] What is REST API? 2. [ ] What is GraphQL API?
- CRUD operations
- What are cookies? 1. [ ] Getting and setting cookies
- What is local storage?
- What is session storage?
- How does a web browser work?
- What is server vs client?
- What is a domain name?
- What is DNS lookup?
- What is web hosting?
- Browser Dev tools
- CORS and how to get past CORS?
- ARIA - What is accessibility?
Step Up
Front end framework:
- ReactJS
Front end library:
- Redux
APIs:
- GraphQL
Suggested learning process
- SKILLS Learn the fundamentals from a resource of your choice:
- HTML
- CSS
- JavaScript.
- PROJECT Build a portfolio web page using the skills you learnt so far - JS, HTML, CSS. The web page should have the following:
- Add your name, photo, bio using semantic HTML
- Setup sections for projects. We will fill these projects as we go. The projects will have an image, description and a link. Set these up with lorem ipsum text for now.
- SKILLS Learn git and version control..
- PROJECT
- Add your portfolio to GitHub.
- Step Up Assignment: Setup Github pages to host your portfolio. Here's an instructional video
- SKILLS Step up your JS and CSS knowledge
- PROJECT Make your portfolio mobile friendly and responsive.
- PROJECT Getting ready for job interviews
- Practice interview questions on InterviewCake.
- Practice interviews questions on Leetcode. Start with easy and slowly work your way up.
- SKILLS Step up challenge - learn a front-end framework. React, Vue and Angular are the top front-end frameworks in 2021. If you were to pick one, I would recommend React. Lots of companies use React in production.
- PROJECT: Implement the framework. - build an inspiration. Add this to your portfolio. Tasks:
- Fetch an API of your choice.
- Render data in your app.
- Implement search functionality.
- Implement auto-complete functionality.
- SKILLS Step up challenge: Learn a library for the framework.
- Learn a state management library: Redux / React context
- Learn a CSS library - SASS
- PROJECT Implement your next inspiration idea using the library. Add to your portfolio.
- SKILLS Learn a testing framework : Build test coverage. Add to your portfolio.
- CAREER Get a freelance job using your portfolio.
- CAREER Find a mentor. Get feedback on your skills and portfolio.
- SKILLS Step up challenge - learn the other side of stack(front-end vs back-end)
- CAREER Apply for a full time job. You are ready.
- SKILLS Continue iterating.
- CAREER Prepare for interviews
