DEV Community

gaurbprajapati
gaurbprajapati

Posted on

8 5 1 1 1

Roadmap, Quick cheatsheet, Study materials for Front End Web Development

This is the roadmap I'm following to become a Frontend Web Developer in 2022

You can do the same!

Basics of CS

HTML


CSS

Tailwind / Bootstrap

JavaScript


DOM

Git (Version Control)

React JS

TypeScript

Next JS

GraphQL

You can prefer udemy paid course for complete web development bootcamp by Dr. Angela YU
https://www.udemy.com/share/1013gG/

HTML :-

https://www.w3schools.com/html/

CSS :-

https://www.w3schools.com/css/

Javascript:-

DOC to learn - https://www.javascripttutorial.net/
karel ide - https://stanford.edu/~cpiech/karel/ide.html
** HTML DOM ** - //stanford.edu/~cpiech/karel/ide.html

REACT

https://youtu.be/nTeuhbP7wdE


Quick cheetsheet--

HTML - https://htmlcheatsheet.com/

CSS - https://cssreference.io/

GIT - https://gitsheet.wtf/

OPEN API- https://overapi.com/

DEV HINTS- https://overapi.com/ ( This is a modest collection of cheat sheets for ES6, SASS, etc.)

Cheatography is a collection of 5047 cheat sheets and quick references in 25 languages for everything from programming to
travel!
https://cheatography.com/#google_vignette


TOOLS

Website to create wireframes - https://balsamiq.com/wireframes/?gclid=Cj0KCQjw2MWVBhCQARIsAIjbwoM7ELvU2Yb02JFDIY7PxMNuhqlKrAwtLRTreUSRcHlKsIG8Kh8DizQaAkhmEALw_wcB, https://sneakpeekit.com/

Website ideas https://www.awwwards.com/ , https://dribbble.com/tags/website

Help for UI-patterns = https://ui-patterns.com/patterns CSS Fount = https://www.cssfontstack.com/

for image use website https://www.pexels.com/ , https://unsplash.com/

make buttons https://css3buttongenerator.com/

make fabicon https://www.flaticon.com/

Add Icons - https://fontawesome.com/icons ,
https://icons.getbootstrap.com/#install

CSS Fount = https://www.cssfontstack.com/

Missing something? 👇

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs