Do you want to learn web development? and you’re confused about where to begin? or what the general road map look like?

These are some great guides for you:


▩ HTML5

⇨ HTML5: Tags/Balises by category
⇨ HTML5: Attributes
⇨ HTML Semantic Elements
⇨ HTML Forms
⇨ HTML Tables

▩ CSS3

⇨ CSS Selector Reference
⇨ CSS Properties Reference
⇨ CSS Selectors & Properties from CSS Tricks
⇨ Cascade and inheritance
⇨ Specificity
⇨ Specificity Calculator

FlexBox

⇨ FlexBox Cheatsheet
⇨ Flexbox Froggy

CSS Grid

⇨ CSS Grid Cheatsheet
⇨ GRID GARDEN

Media Queries

⇨ CSS Media Queries w3schools
⇨ Media Queries for Standard Devices

▩ Emmet

⇨ Emmet cheatsheet PDF

▩ Git, Github, Command lines

⇨ GIT CHEAT SHEET PDF

▩ SASS

⇨ Doc Page/

▩ Bootstrap

⇨ twitter-bootstrap CDN
⇨ Docs

▩ JavaScript

⇨ JavaScript Tutorial
⇨ JavaScript Basics guide
⇨ JavaScript HTML DOM
⇨ JavaScript Advanced guide

▩ jQuery

⇨ jQuery Basics

▩ React

⇨ React lifecycle methods diagram/
⇨ React Router Doc

Create-React-App

⇨ Create-React-App Docs
⇨ Adding Images, Fonts, and Files

Frontity

Frontity: The React framework for WordPress

⇨ Doc page
⇨ If npx frontity create my-app doesn’t work (having white space in your name (Windows)
⇨ Solving:Npm ERR! Unexpected end of JSON input while parsing near…
⇨ Frontity Starter theme
⇨ @frontity/wp-source
⇨ VISUALIZE THE WORDPRESS TEMPLATE HIERARCHY

Gatsby

⇨ gatsby-source-printful
⇨ Theme UI

▩ REST API’s

▩ GraphQL

⇨ graphql.org/

▩ Node.js/Express.js

▩ PHP

▩ Laravel

▩ SQL

▩ MongoDB

▩ Firebase

⇨ Firebase: Docs

▩ WordPress

▩ Headless CMS

Strapi.js

Open-source Headless CMS wrote with Node.js

⇨ Strapi.js: Docs

▩ LMS

Moodle

⇨ Boost Presets
⇨ Creating a theme based on boost

▩ Open source Modern web Forum

⇨ Discourse
⇨ NodeBB

Leave a comment

Your email address will not be published. Required fields are marked *