Learn everything you need to build any SAAS product in a very organized, ordered, and self-paced learning roadmap based on experience!
- HTML & CSS (Begginer) (Paid) - You will learn the basics pf HTML and CSS, With an intro to reponsive design
- HTML & CSS (Intermediate) (Paid) - as a frontend developer you may work on a customized theme and interface for your company brand, you need to have the skills needed to implement reponsive and high quality interfaces.
- Semantic HTML (Free) - Semantic HTML is really important for accessibility and SEO reasons.
- A friendly web development tutorial for complete beginners
- Standardista: CSS3, JS & HTML5 explained - a blog about web standards and performance
- CSS Tricks (Free) - the best website for staying up-to-date with css.
- CSS Grids and Flexbox for Responsive Web Design (Paid) - in the old days there was no defined way of making grid systems, floats and table layouts were hacking ways to create layout. Now we have great layout solutions which is flexbox and css grid.
- BEM Naming Methodology - a convention for naming classes.
- Sass Crash Course (Free) - wrtiting your css with Sass pre-processor will make so much difference in your development work flow. I highly reccomend it
- Sass Guidlines: 7-1 Architecture - let's say you are building a design system or a huge project. you need an architecture to increase maintainability and your code quality overall.
- CSS State - this is a helpful servey that shows the current state of CSS ecosystem
- Motion Design with CSS by Val Head | OpenVis Conference 2015
- Motion Design with CSS (Paid) (Intermediate)
- CSS Specification - just for reference
- Even More CSS Secrets - CSS Secrets was a series of talks about some hidden features of css language
- ITCSS: Scalable and Maintainable CSS Architecture - it's another way of architecting your css. I use 7-1 architecture + Sass + BEM for writing matintanable and scalable css
- Web Fonts - The State of the Web
- Responsive Web Design - What It Is And How To Use It
- Responsive web design basics
Your role as front-end developer is not to design user interfaces but to build it. with that being said I recommend that you get familier with UI design princiiples because you are going to implement UI/UX Designer wireframes.
- The non-designer book by robin Williams
- Design for Developers
- Responsive Web Typography v2 - typography is crucial for brands. it invoke certain feelings. this workshop is a great overview of typography.
- The Best Resources For Designers In One Place
- design-resources-for-developers
- Motion design in UI - Designing in the Browser
- Contrast and Meaning
- How To Design Better Buttons
- FONT REVIEW JOURNAL
- Tim Brown — Universal Typography (SmashingConf NYC 2014)
- Method of Action - Method of Action creates tools, toys and games to help you learn design, for free.
- Degreeless.design
- Intro to the Design of Everyday Things
- Web Content Accessibility Guidelines (WCAG) 2.0
- Webaim Checklist - this is a guide to implement accessibility features as a developer. a small note here: this is meant to be a summary for developers not as a leggal reference.
- Website Accessibility (Paid) - a workshop about the subject.
- Accessibility Manifesto
- Alt-texts: The Ultimate Guide
- Webaim Contrast Chcker
- Accessible color palette builder
- Removing Headaches from Focus Management -How and when to use the tabindex attribute
- The Complete JavaScript Course (Paid) - You need to learn JavaScript very well before going to a framework/library like React or Anguler.
- Basic syntax, ES5, ES6, DOM, AJAX
- You Don't Know JS Yet (book series) - 2nd Edition (Intermediate) (Free) - degging deeper into the language features such as prototypal inheritance, type system, engine, abstract syntax tree, closures, scope and so on.
- JavaScript: The Hard Parts, v2 (Paid) - solid understanding of callbacks and higher-order functions, closure, asynchronous JavaScript, and object-oriented JavaScript.
- JavaScript: From Fundamentals to Functional JS, v2 (Paid)- deep dive into JavaScript and functional programming techniques
- JavaScript State - large survey about the javaScript ecosystem
- Why Performance Matters
- Mastering the Module Pattern
- Learning Functional Programming with JavaScript - Anjana Vakil - JSUnconf
- Compiler Compiler Series - A guided tour with SpiderMonkey engineer Yulia Startsev. Yulia shows what it’s like to work on the SpiderMonkey compiler as a JavaScript engineer, improving conformance with ECMA-262
- Gulpjs - automate slow, repetitive workflows and compose them into efficient build pipelines
- PostCSS - I like using gulpjs for automation and combine it with the large ecosystem of plugins in postCSS.
- The Difference Between Minification and Gzipping
- Build Tools - a little bit out of date article but it's realy good and informative
- A comprehensive guide to design systems
- Design Systems with Brad Frost - The State of the Web
- Material Design System
- Human Interface Guidelines
- Veritas Design System
- Atomic Design - the web development industry is moving more towered a component-orianted way of developing user interfaces. this article will shows you how to think of components.
- React Docs - the technical team of react did a great job with this documentation. the most efficient resource for learning React.
- The Modern React Bootcamp (Hooks, Context, NextJS, Router) - the best course for learning react
- React Resources - Articles, podcasts, conferences, books.
- Dan Abramov Blog - Dan is one of the main developers of Reactjs core team. This blog is not only about react but UI engineering in general.
- React dev tools
- State Management in Pure React, v2 (Paid)
- State Management with Redux & MobX
- styled component docs - styled component is a new way of writing CSS. it enforce the idea of coupling the markup, styles and the javascript logic for each component. an excellent way of styling react and react native applications.
- React Styled Components Tutorial
- The Top 205 Styled Components Open Source Projects
- BASIC GIT WORKFLOW
- A Beginner’s Git and GitHub Tutorial
- git-flow cheatsheet
- Conventional Commits - A specification for adding human and machine readable meaning to commit messages
- Udacity Git Commit Message Style Guide
- Version Control with Git (Free) (Udacity)
- git - the simple guide
- Front-end performance for web designers and front-end developers
- REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?
- Avoid Large, Complex Layouts and Layout Thrashing
- Web Fundemntal (Google) - A resource for learning the best standards and conventions in the modern web development
- Frontend master books (Free) - every year frontend masters publish a book that covers all topics in frontend development. I highly recommend reading the frontend handbook 2019
- Web.dev (Google)
- Full stack open 2020 - Free course by the university of Helsini, The oldest and largest science university in Finland. the content of the course is very relative and modern.
- How the web works - How the web works provides a simplified view of what happens when you view a webpage in a web browser on your computer or phone
- HTTP Status Codes in 60 Seconds
- An Introduction to DNS Terminology, Components, and Concepts
- HTTP Fundamentals
- Building Blocks of TCP
- HTTP Status Codes
- Syntax: A Tasty Treats Podcast for Web Developers.
- Base.cs - Computer Science podcast
In the backend we are going to use nodejs which is an enviroment for executing javaascript code on your machine.
- NodeJS - The Complete Guide (MVC, REST APIs, GraphQL, Deno)
- MERN Stack Front To Back: Full Stack React, Redux & Node.js
- Node.js, Express, MongoDB & More: The Complete Bootcamp 2020
- Events and Event Emitter in Node.js
- Understanding module.exports and exports in Node.js
- Express/Node introduction
- Semantic Versioning
- 2.5 cors, json, jsonp - undergrad webdev summer 1 2017
- PostgreSQL Tutorials - A website for learning SQL and postgreSQL
- SQL vs NoSQL or MySQL vs MongoDB
- MongoDB Complete Introduction & Summary
- Data Modeling Introduction
- Mongodb the Definitive Guide - A great book for learning MongoDB in a great details.
- Data Modeling with MongoDB
- What is REST
- Web API design - Azure docs
- RESTful API Designing guidelines — The best practices
- REST API By Roy T.Fielding
- Error Handling in REST APIs
- jsonapi - A SPECIFICATION FOR BUILDING APIS IN JSON
- HTTP Crash Course & Exploration
- Input Validation on Client-side or Server-side?
- express-validator 6.6.0 Docs API
- Express Tutorial Part 6: Working with forms
- Everything You Ever Wanted to Know About Authentication
- The JWT Handbook
- RFC 7519 JSON Web Token - RFC 7519
- OWASP® Foundation - Security for developers
- Understanding cookies and sessions
- Should you Implement Authentication Yourself?
- Node.js API Authentication With JWT
- Session Authentication vs Token Authentication
- Getting, Setting, and Understanding Web Cookies using Express and WebdriverIO
- Authentication on the Web (Sessions, Cookies, JWT, localStorage, and more)
Misk academy deliver practical and career focused courses led by top-quality faculty aimed at equipping young Saudis and professionals with the skills needed.
- They regulerly post new certifications to enroll in. Don't mess it, it's a great chance for you to learn with a local community.
- Misk Academy website
A saudi initiative aimed to equip young saudis with the skills needed in fields such as web/mobile development, Data Analytics, AI, and Game Devepment.
Soon 😊