Roadmap to becoming a web developer in 2021

Below you find a set of charts demonstrating the paths that you can take and the technologies that you would want to adopt in order to become a frontend, backend or a devops. I made these charts for an old professor of mine who wanted something to share with his college students to give them a perspective; sharing them here to help the community.

^{Special Announcement:}

_{We now have a YouTube Channel
I plan on covering the roadmaps and put more content there
Subscribe to the channel.}

Purpose of these Roadmaps

The purpose of these roadmaps is to give you an idea about the landscape and to guide you if you are confused about what to learn next and not to encourage you to pick what is hip and trendy. You should grow some understanding of why one tool would be…

30 seconds of code

Short JavaScript code snippets for all your development needs

• Visit our website to view our snippet collection.
• Use the Search page to find snippets that suit your needs. You can search by name, tag, language or using a snippet's description. Just start typing a term and see what comes up.
• Browse the JavaScript Snippet collection to see all the snippets in this project or click individual tags at the top of the same page to narrow down your search to a specific tag.
• Click on each snippet card to view the whole snippet, including code, explanation and examples.
• You can use the button at the bottom of a snippet card to copy the code to clipboard.
• If you like the project, give it a star. It means a lot to the people maintaining it.

Want to contribute?

• If you want to help us improve, take a…

WEBSITE DIRECTORY: Available here.

📚 Awesome cheatsheets for popular programming languages, frameworks and development tools. They include everything you should know in one single file.

🤔 Why Awesome-Cheatsheets?

I usually make a cheat sheet when I want to improve my skills in a programming language, a framework or a development tool. I started doing these kinds of things a long time ago on Gist. To better keep track of the history and to let people contribute, I reorganized all of them into this single repository. Most of the content is coming from official documentation and some books I have read.

Feel free to take a look. You might learn new things. They have been designed to provide a quick way to assess your knowledge and to save you time.

📚 Table of Contents

📃 Languages

Awesome Web Development Resources

This is an awesome project about Web Development resources. ⚡

Resources are added frequently! ⚡

Enjoy!

If you like this repo, be sure to ⭐ it.

Please read contributing guidelines before submitting new resources.

Initially created by Marko Denic on Twitter.

preview on the web

Table of Contents

• Hosting
• Learning Platforms
• Coding Challenge Platforms
• Freelancing platforms
• Remote Jobs
• Photos
• Illustrations
• Icons
• Fonts
• Youtube Channels
• Podcasts
• Code Editors
• Color Palettes
• UI Inspiration
• Docs
• Animation Libraries
• Charts
• Chrome Extensions
• Website Optimization Tools
• HTML/CSS/JavaScript templates
• Newsletters
• CSS Generators
• Online Tools
• UI Components
• Vue UI libraries
• React UI libraries
• Angular UI libraries
• Others

Hosting:

⬆ back to top

Learning Platforms:

⬆…

CSS Protips

A collection of tips to help take your CSS skills pro.

For other great lists check out @sindresorhus's curated list of awesome lists.

Table of Contents

• Protips
• Support
• Translations
• Contribution Guidelines

Protips

1. Use a CSS Reset
2. Inherit box-sizing
3. Use unset Instead of Resetting All Properties
4. Use :not() to Apply/Unapply Borders on Navigation
5. Check If Font Is Installed Locally
6. Add line-height to body
7. Set :focus for Form Elements
8. Vertically-Center Anything
9. Comma-Separated Lists
10. Select Items Using Negative nth-child
11. Use SVG for Icons
12. Use the "Lobotomized Owl" Selector
13. Use max-height for Pure CSS Sliders
14. Equal-Width Table Cells
15. Get Rid of Margin Hacks With Flexbox
16. Use Attribute Selectors with Empty Links
17. Style "Default" Links
18. Intrinsic Ratio Boxes
19. Style Broken Images
20. Use rem for Global Sizing; Use em for Local Sizing
21. Hide Autoplay Videos That Aren't Muted
22. Use :root for Flexible Type
23. Set font-size on Form Elements for a Better Mobile…

Awesome Software and Architectural Design Patterns

A curated list of software and architecture related design patterns.

Software design pattern - A general, reusable solution to a commonly occurring problem within a given context in software design. It is a description or template for how to solve a problem that can be used in many different situations.

Contents

• Programming language design patterns
• General Architecture
• Cloud Architecture
• Serverless Architecture
• Micro services & Distributed Systems
• Internet of things
• Big Data
• Databases and storage
• Docker and DevOps
• Mobile
• Front End Development
• Security
• Books

Programming Language Design Patterns

• AngularJS

  • design patterns

• C#

  • design-patterns
  • design-patterns-for-human - ultra simplified explanation to design patterns.
  • Design Patterns Library

• C++

  • design-patterns

• Closure

  • design-patterns

• Go

  • design-patterns

• Java

  • sourcemaking - patterns and anti patterns.
  • oodesign - patterns catalog with UML diagrams.
  • design-patterns
  • effective-java patterns - patterns from the Effective Java book.
  • Design patterns implemented in Java
  • Effective-Java-3rd-Joshua-Bloch

• JavaScript

  • es6 design patterns
  • humans…

Coding Interview University

I originally created this as a short to-do list of study topics for becoming a software engineer but it grew to the large list you see today. After going through this study plan, I got hired as a Software Development Engineer at Amazon You probably won't have to study as much as I did. Anyway, everything you need is here.

I studied about 8-12 hours a day, for several months. This is my story: Why I studied full-time for 8 months for a Google interview

Please Note: You won't need to study as much as I did. I wasted a lot of time on things I didn't need to know. More info about that below. I'll help you get there without wasting your precious time.

The items listed here will prepare you well for a technical interview at just about any software company including the giants:…

All your environment variables, in one place

Stop struggling with scattered API keys, hacking together home-brewed tools,

and avoiding access controls. Keep your team and servers in sync with Doppler.

Awesome Interviews

A curated list of lists of technical interview questions.

What makes for an awesome list?

Please read the contribution guidelines or creating a list guide if you want to contribute.

Table of Contents

• Programming Languages/Frameworks/Platforms

  • Android
  • AngularJS
  • Angular
  • BackboneJS
  • C++
  • C
  • C♯
  • .NET
  • Clojure
  • CSS
  • Cucumber
  • Django
  • Docker
  • EmberJS
  • Erlang
  • Golang
  • GraphQl
  • HTML
  • Ionic
  • iOS
  • Java
  • JavaScript
  • jQuery
  • Front-end build tools
  • KnockoutJS
  • Less
  • Lisp
  • NodeJS
  • Objective-C
  • PHP
  • Python
  • ReactJS
  • Rails
  • Ruby
  • Rust
  • Sass
  • Scala
  • Shell
  • Spark
  • Swift
  • Vue.js
  • Wordpress
  • TypeScript

• Database technologies

  • Cassandra
  • Microsoft Access
  • MongoDB
  • MySQL
  • Neo4j
  • Oracle
  • Postgres
  • SQL
  • SQL Lite

• Caching technologies

  • Memcached
  • Redis

• OS

  • Linux
  • Windows

• Algorithms

• Blockchain

• Coding exercises

• Comprehensive lists

• Design patterns

• Data structures

• Networks

• Security

• Data Science

Programming Languages/Frameworks/Platforms

Android

• 10…

This page is available as an easy-to-read website at https://ebookfoundation.github.io/.

List of Free Learning Resources In Many Languages

Intro

This list was originally a clone of StackOverflow - List of Freely Available Programming Books with contributions from Karan Bhangui and George Stocker.

The list was moved to GitHub by Victor Felder for collaborative updating and maintenance. It has grown to become one of GitHub's most popular repositories, with 200,000+ stars, 6100+ commits, 1600+ contributors, and 43,000+ forks.

The Free Ebook Foundation now administers the repo, a not-for-profit organization devoted to promoting the creation, distribution, archiving, and sustainability of free ebooks. Donations to the Free Ebook Foundation are tax-deductible in the US.

How To Contribute

Please read CONTRIBUTING. If you're new to GitHub, welcome!

How to Share

• Share on Twitter
• Share on Facebook
• Share on LinkedIn
• Share on Telegram

Books

English, By Programming Language

English, By Subject

🌍 Čeština ∙ Deutsch ∙ Ελληνικά ∙ English ∙ Español ∙ Français ∙ Indonesia ∙ Italiano ∙ 日本語 ∙ 한국어 ∙ polski ∙ Português ∙ Română ∙ Русский ∙ Slovenščina ∙ Українська ∙ 简体中文 ∙ 繁體中文

The Art of Command Line

Note: I'm planning to revise this and looking for a new co-author to help with expanding this into a more comprehensive guide. While it's very popular, it could be broader and a bit deeper. If you like to write and are close to being an expert on this material and willing to consider helping, please drop me a note at josh (0x40) holloway.com. –jlevy, Holloway. Thank you!

• Meta
• Basics
• Everyday use
• Processing files and data
• System debugging
• One-liners
• Obscure but useful
• macOS only
• Windows only
• More resources
• Disclaimer

Fluency on the command line is a skill often neglected or considered arcane, but it improves your flexibility…

freeCodeCamp.org's open-source codebase and curriculum

freeCodeCamp.org is a friendly community where you can learn to code for free. It is run by a donor-supported 501(c)(3) nonprofit to help millions of busy adults transition into tech. Our community has already helped more than 10,000 people get their first developer job.

Our full-stack web development and machine learning curriculum is completely free and self-paced. We have thousands of interactive coding challenges to help you expand your skills.

Table of Contents

• Certifications
• The Learning Platform
• Reporting Bugs and Issues
• Reporting Security Issues and Responsible Disclosure
• Contributing
• Platform, Build and Deployment Status
• License

Certifications

freeCodeCamp.org offers several free developer certifications. Each of these certifications involves building 5 required web app projects, along with hundreds of optional coding challenges to help you prepare for those projects. We estimate that each certification will take a beginner programmer around 300 hours to earn.

Each of these 50…

Frontend Development

Manually curated collection of resources for frontend web developers.

You are viewing a browseable version, split by category in many small files. There is also a really huge file with every single resource on one page. Proceed to the totally gigantic file if you are into this kind of thing.

This is the current version, which receives ongoing updates. If you want the good old bookmarks, please use the tag v.1.0. Keep in mind, that the old version has many outdated links.

Appearance

The outward or visible aspect of a website.

• Animation: The process of creating motion and shape change.
• Typography: The style, arrangement, or appearance of typeset matter.
• Visualization: Placing data in a visual context.

Architecture

High level structure of the frontend code and the discipline of creating such structures.

• Algorithms: A self-contained step-by-step set of operations to be performed. Algorithms perform calculation…

Tech Interview Handbook

Credits: Illustration by @leftaligned

Read on the website | Follow us on Facebook

What is this?

No one has time to do a few hundred LeetCode questions. Here's free and curated technical interview preparation materials for busy engineers, brought to you by the author of the Blind 75 List.

Besides the usual algorithm questions, other awesome stuff includes:

• How to prepare for coding interviews
• Interview Cheatsheet - Straight-to-the-point Do's and Don'ts
• Algorithm tips and the best practice questions categorized by topic
• Interview formats of the top tech companies
• Behavioral questions asked by the top tech companies
• Good questions to ask your interviewers at the end of the interviews
• Helpful resume tips to get your resume noticed and the Do's and…

awesome-hackathon-projects

image credit

This is a curated list of awesome hackathon project.
Developers from different parts of the world have developed a lot of amazing projects during the hackathon on their Hashnode powered blogs.
Projects gets updated daily

Want to contribute with some hackathon projects ? Awesome! Please, read the contribution guidelines before contributing

Projects

A Twitter Bot For Hashnode - Hashbot: A Twitter Bot For Hashnode

Autocomplete your CloudFormation Resources in VS Code - Autocomplete your CloudFormation Resources in VS Code

Alkatraz - Alkatraz: An app that helps you to Reach your goals by managing your Habits

Analytics - Amalytics: A tiny analytics powered by HarperDB

Anonion - Anonion: Get unbiased opinions from your circle anonymously

Annonymous feedback - The Anonymous Feedback Platform

Anko - ANKO: A dad's attempt to make the daughter fall in love with mathematics

Aura - Aura: See your mood in a whole new light.

…

Awesome-jamstack-resources

This is Curated list of tools using the JAMStack: A modern web development architecture for creating fast, secure and dynamic websites

Want to contribute with some tools / resource ? Awesome! Please, read the contribution guidelines before contributing

Table of Content

• Official Resource Site
• Jamstack Sites Showcase
• Platforms
• Static Site Generators
• CMS
• API
  • Authentication
  • Comments
  • Forms
  • E-commerce
  • Search
  • Database
• Serverless
• Videos
• Tutorials / Articles
• Books

official

• Jamstack
• Jamstack resources - Videos and articles about Jamstack.
• JAMstack Radio
• JAMstack Boilerplates
• Netlify Blog
• What is the JAMstack?
• Why the JAMstack?
• How do I get started?

Jamstack Sites Showcase

• My Portfolio - Built on Gatsby and hosted on Netlify.
• React - Built on Gatsby.
• Squoosh.app - Hosted on Netlify, demonstrates advanced features from a modern Web Application.
• Hopper - Built on Gatsby and hosted on Netlify.
• VSCode Power User Course - PWA built on Gatsby and hosted on Netlify.
• CloudyCam - PWA…