HTML
-
HTML main tags Playlist
-
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 Article Video
- Color Article
- using hex eg:
#ff0000 - rgb eg:
rgb(0,0,255) - common color names eg:
red, pink, brown
- using hex eg:
- Font Article
- Family
- Size
- Weight
- Text-decoration Article
- Text-transform Article
- Line-height Article
- Letter-spacing Article
- Word-spacing Article
- Background-color Article
- Background-image Article
- Margin Article Article
- Padding Article Article
- Border Article
- Width Article
- Height Article
- percentage, pixel, em Video
- Box model Article Video - [ ] list-style Article
- Pseudo class Article
- hover
- active
- visited
- Position Article Video
- relative
- absolute
- fixed
- Display Article
- block
- inline
- grid
- none
- class vs id Article
JavaScript
Fundamentals
- JavaScript introduction Article Video
- Adding JavaScript to an HTML page using
scriptArticle -
console.logArticle - Comments Article
- Variables Article Video
- Data types Article
- String
- Boolean
- Number
- null
- undefined
- Symbol Video
-
typeofoperator Article - String functions
- Operators
- Array Article
- Object Article
- Creating an object Article
- Accessing properties Article
- Reference and Value Video
- Object destructuring Article
-
Object.keysArticle -
Object.getOwnPropertyNamesArticle - Looping through properties of an object
-
.hasOwnPropertyArticle - Functions Article Video
-
thiskeyword Video - ES6 Classes Video
-
constructor() - inherting classes
-
- Prototypal inheritance Article Article Video
- Inheriting properties
- Extending properties
- Accessing properties and methods
-
setTimeoutVideo -
alertArticle - JSON objects Article
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
-
Web fundamentals
- How does the web work? Article
- How does a web browser work? Article
- HTTP basics Video
- headers
- request
- response
- verbs: PUT, POST, DELETE, PATCH, POST
- What is an API? Video
- What is REST API? Video Article
- What is GraphQL API? Video Article Podcast
- What are CRUD operations? Article - [ ] What are cookies? ArticleVideo
- Getting and setting cookies Article
- What is local storage? Article
- What is session storage? Article
- What is a domain name? Video
- What is DNS lookup? Video
- What is web hosting? Video
- What is CORS? Article Article
- ARIA - What is accessibility? Article Video
Step Up
CSS
- animations Video
- transition property
-
@keyframes - animation property -
name,duration,timing-function,delay,iteration-count,direction
- flexbox
- grid
- media query to build responsive sites
- CSS Specificity Article
JavaScript
-
bind,call,applyVideo - Scopes
- Hoisting Video
- Temporal Dead Zone Video
- Event bubbling Video
- Event Capturing Video
- Promises Video
- Callbacks
- async / await
- AJAX (XMLHttpRequest)
- Generators
- Making API calls using
fetch,axiosVideo - Event loop Video
- Closures Article Video
- Service Workers
- Browser events Article
- Forms
- Form properties and methods
- Form events: focus, blur, submit
- Form validation Article
React
- Prerequisites Article
- What is React? Article Playlist
- Setup and Installation Article
- JSX: JavaScript + XML Article Video
- Functional and Class Components Article
- Props Article
- State Article
- Lifecycle Events
- React Hooks Playlist
- Submitting Form Article
- Pulling in API Data Article
- Building and Deploying your React App Article
- The Beginner's Guide to React by Kent C. Dodds Video
Front end library:
- Redux Video
APIs
- REST
- GraphQL
Debugging Tools
UX for Web Developers
- Software UX Designers use
UX designers use the following software for the designing. As a UI developer, you will get either the files of design or style guide. Do review them.
- Figma
- Sketch App (Works only on Mac)
- Photoshop
- Colors
As a web developer, you should know that the designers use HEXA values of the color code. If you want to use RGBA (Red Green Blue Alpha) in your code then you need to ask the designers to provide that
- Units
As a web developer, you should know that designers use px as default units while designing. If you are using em or rem, you need to discuss this with your designer and ask about the base font size. This base font size will help you to convert from px to em/rem
- Consistency
As a web developer make sure that the designs have consistency in the size, colors, and UX. Eg: the font size and color of the headings on every page should be the same, the body's font size should be the same.
You should review the designs given by the designers to make sure the consistency is there.
- Styleguide
If you have a big project ask your UX team to share the style guide. Style- guide is the information about the color palette, font size, heading style, etc. This becomes the base guidelines for developers and testers.
- Informative States
While working on the forms it is important to ask the designers about the error, success, or informative states design. Most of the time UX folks miss these states.
- Wireframes
It is important to have the wireframes to understand the flow of the user's journey. Wireframes are like blueprint of the application.
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