Skip to content

Latest commit

 

History

History
375 lines (334 loc) · 25.8 KB

README.md

File metadata and controls

375 lines (334 loc) · 25.8 KB
Raw

HTML

CSS

JavaScript

Fundamentals

Web page and JavaScript

Playlist

  • 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

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, apply Video
  • 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, axios Video
  • 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

Front end library:

APIs

  • REST
  • GraphQL

Debugging Tools

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.

  • Figma
  • Sketch App (Works only on Mac)
  • 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.

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