HTML

CSS

JavaScript

Fundamentals

Web page and JavaScript

Playlist

Web fundamentals

Step Up

CSS

JavaScript

React

Front end library:

Redux Video

APIs

REST
GraphQL

Debugging Tools

Browser Dev tools Article
- Chrome Dev Tools Video Video
- Firefox Dev Tools Video

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:
1. HTML
2. CSS
3. JavaScript.
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.
SKILLS Learn git and version control..
PROJECT
1. Add your portfolio to GitHub.
2. 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
1. Practice interview questions on InterviewCake.
2. 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:
1. Fetch an API of your choice.
2. Render data in your app.
3. Implement search functionality.
4. Implement auto-complete functionality.
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
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

License

adisagar2003/Learn-Web-Development-Checklist

ErrorLooks like something went wrong!

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Error
Looks like something went wrong!

Packages