Skip to content

octalpixel/Learn-Web-Development-Checklist

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

33 Commits
.github
.github
 
 
.gitignore
.gitignore
 
 
LICENSE
LICENSE
 
 
README.md
README.md
 
 

Repository files navigation

HTML

  • HTML main tags

  • HTML5 Structural / Semantic elements

  • HTML Elements and their attributes

    • Documents <!DOCTYPE> Link
    • Headings <h1> - <h6> Link
    • Paragraph <p> Link
    • Lists <li>, <ul>, <dl> Link
    • Links <a> Link
    • Images <img> Link
    • Table <table>Link

  • HTML Formatting

    • <b> - Bold text Link
    • <strong> - Important text Link
    • <small> - Smaller text
    • <i> - Italic text Link
    • <em> - Emphasized text Link
    • <sub> - Subscript Link
    • <sup> - superscript Link
    • <pre> - preformatted text Link

  • 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
  • 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

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 Link
  • Forms
    • Form properties and methods
    • Form events: focus, blur, submit
    • Form validation Link

Web fundamentals

  1. How does the web work? Link
  2. HTTP basics Link
    • headers
    • request
    • response
    • verbs: PUT, POST, DELETE, PATCH, POST
  3. What is an API?
    1. What is REST API?
    2. What is GraphQL API?
  4. CRUD operations
  5. What are cookies?
    1. Getting and setting cookies
  6. What is local storage?
  7. What is session storage?
  8. How does a web browser work?
  9. What is server vs client?
  10. What is a domain name?
  11. What is DNS lookup?
  12. What is web hosting?
  13. Browser Dev tools Link
  14. What is CORS? Link1 Link2
  15. ARIA - What is accessibility? Link1 Link2

Step Up

Front end framework:

React

  • Prerequisites Link
  • What is React? Link
  • Setup and Installation Link
  • JSX: JavaScript + XML Link
  • Functional and Class Components Link
  • Props Link
  • State Link
  • Submitting Form Link
  • Pulling in API Data Link
  • Building and Deploying your React App Link
  • The Beginner's Guide to React by Kent C. Dodds Video Tutorial

Front end library:

  • Redux

APIs:

  • GraphQL

Suggested learning process

  1. SKILLS Learn the fundamentals from a resource of your choice:
    1. HTML
    2. CSS
    3. JavaScript.
  2. PROJECT Build a portfolio web page using the skills you learnt so far - JS, HTML, CSS. The web page should have the following:
    1. Add your name, photo, bio using semantic HTML
    2. 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.
  3. SKILLS Learn git and version control..
  4. PROJECT
    1. Add your portfolio to GitHub.
    2. Step Up Assignment: Setup Github pages to host your portfolio. Here's an instructional video
  5. SKILLS Step up your JS and CSS knowledge
  6. PROJECT Make your portfolio mobile friendly and responsive.
  7. PROJECT Getting ready for job interviews
    1. Practice interview questions on InterviewCake.
    2. Practice interviews questions on Leetcode. Start with easy and slowly work your way up.
  8. 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.
  9. PROJECT: Implement the framework. - build an inspiration. Add this to your portfolio. Tasks:
    1. Fetch an API of your choice.
    2. Render data in your app.
    3. Implement search functionality.
    4. Implement auto-complete functionality.
  10. SKILLS Step up challenge: Learn a library for the framework.
    1. Learn a state management library: Redux / React context
    2. Learn a CSS library - SASS
  11. PROJECT Implement your next inspiration idea using the library. Add to your portfolio.
  12. SKILLS Learn a testing framework : Build test coverage. Add to your portfolio.
  13. CAREER Get a freelance job using your portfolio.
  14. CAREER Find a mentor. Get feedback on your skills and portfolio.
  15. SKILLS Step up challenge - learn the other side of stack(front-end vs back-end)
  16. CAREER Apply for a full time job. You are ready.
  17. SKILLS Continue iterating.
  18. CAREER Prepare for interviews

UX for Web Developers

  1. 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.

  1. Figma

  2. Sketch App (Works only on Mac)

  3. Photoshop

  1. 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

  1. 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

  1. 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.

  1. 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.

  1. 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.

  1. Wireframes

It is important to have the wireframes to understand the flow of the user's journey. Wireframes are like blueprint of the application.

About

Use this checklist as a guidebook to learn web development

Resources

Readme

License

MIT license
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published