Useful Resources for Front End Web Developers

General

Chrome's Awesome Extensions

🔹axe DevTools - Web Accessibility Testing

🔹ColorPick Eyedropper

🔹Grepper

🔹WhatFont

🔹WAVE Evaluation Tool

🔹JSON Formatter

🔹Pesticide (without hover bar)

🔹ColorZilla

🔹React Developer Tools

🔹Redux DevTools - Next

🔹Fonts Ninja

🔹CSS Peeper

🔹Fake Filler

🔹Responsive Viewer

🔹Wappalyzer

🔹Web Developer

🔹daily.dev | The Homepage Developers Deserve

🔹Save Code

VS Code

🔹VS Code Extensions - Color Highlight

🔹VS Code Extensions - Prettier Code Formatter

🔹VS Code Extensions - Beautify

🔹VS Code Extensions - ES7 React/Redux/GraphQL/React-Native snippets

🔹VS Code Extensions - Bookmarks

🔹VS Code Extensions - HTMLHint

🔹VS Code Extensions - W3C Web Validator

🔹VS Code Extensions - Live SASS Compiler

🔹VS Code Extensions - Polacode

🔹VS Code Extensions - Material Icon Theme

🔹VS Code Extensions - Live Server

🔹VS Code Extensions -ESLint

🔹VS Code Extensions -JavaScript (ES6) code snippets

🔹VS Code Theme - One Dark Pro

🔹Problems with auto reload page and live server?

UX | UI Design

🔹A Beginner’s Guide to Using Google Web Fonts

🔹What Is User Experience Design? Overview, Tools And Resources

🔹Key Principles of Visual Hierarchy in UX Design

🔹The ultimate guide to visual hierarchy

🔹Sans Serif Vs Serif Font — Which Should You Use & When

🔹5 Things Developers Need to Know About Design

🔹Photopea - Online Photo Editor

🔹Design Lessons for everyone

🔹The Elements of User Experience

🔹How to use Photoshop to design interfaces

🔹Building a design system – Line Length

🔹C.R.A.P Design Principles

🔹Hack Design’s full 52-week free design course

🔹UX 101 for startups

🔹A large collection of free UX books

🔹A very extensive free UX course

🔹Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility

🔹Responsive Web Design

🔹Responsive design tutorial - Learn responsive web design in 5 minutes

🔹Viewport Dimensions

🔹Responsive Navigation Patterns

🔹Best Practices of Responsive Web Design

🔹CSS - Media Queries

🔹Frameworks for Designers

🔹Bootstrap

🔹Foundation

🔹TailwindCSS

Git

🔹Git Cheat Sheet - 50 Commands you should know

🔹Keywords Cheat Sheet Git

🔹Git from the inside out - Mary Rose Cook

🔹Git Cheat Sheet Education

🔹Git Tutorial

🔹Git Book

🔹What The Git? | Enter a git command and have it explained to you

🔹How to Write a Git Commit Message

🔹Git For Professionals

HTML5

🔹Dive Into HTML5

🔹HTML Tutorial

🔹28 HTML5 Features, Tips, and Techniques you Must Know

🔹Testing compliance of various tags in HTML5 with CanIUse?

🔹Building Your First Web Page

🔹Meta Description

🔹The Paragraph element

🔹HTML Phrasing Content

🔹Creating Lists

🔹How To Create Intents And Bullet Lists

🔹HTML Lists

🔹HTML Lists TutorialRepublic

🔹The Unordered List element

🔹HTML table advanced features and accessibility

🔹So , you want a table inside a table?

🔹HTML Tables

🔹Building Forms

🔹Your first form

🔹Forms Accessibility Checklist

🔹HTML Forms

🔹Embedding a YouTube video in a webpage

🔹Accessibility Testing - Totally Tooling Tips

🔹Accessibility Principles

CSS

🔹10 Modern Layouts in 1 line of CSS

🔹How CSS Positioning and FlexBox Work

🔹Learn CSS Grid by Building 5 Layouts

🔹10 CSS Hacks Every Web Developer Should Know

🔹 CSS selectors cheatsheet & details

🔹CSS Generator

🔹Code Playground

🔹A Basic Responsive Grid (Plus Handy CSS3 Media Query Reporter)

🔹Learn to Code HTML & CSS -Working with Typography

🔹Grid - Garden | A game for learning CSS grid

🔹A Basic Responsive Grid

🔹CSS Selectors Made Easy

🔹Smart WebP, PNG and JPEG compression

🔹Styling HTML Tables with CSS

🔹CSS Link Pseudo-classes

🔹The Skinny on CSS Attribute Selectors

🔹A tale of CSS Resets and Everything You Need to Know About Them. Revisited.

🔹CSS Selectors Explained

🔹Learn CSS Selectors Interactively Using CSS Diner

🔹Taming Advanced CSS Selectors

🔹The CSS Box Model

🔹How whitespace is handled by HTML, CSS, and in the DOM

🔹Understanding the CSS box model for inline elements

🔹Inline vs Inline-Block Display in CSS

🔹Opening the Box Model

🔹CSS Centering vs text-align

🔹CSS Box Model

🔹CSS Floats 101 from A List Apart

🔹CSS Positioning 101 from A List Apart

🔹Learn CSS Positioning in Ten Steps

🔹Centering in CSS: A Complete Guide

🔹Centering Things

🔹How to Center Anything with CSS - Align a Div, Text, and More

🔹Positioning Elements | Absolute vs Relative

🔹How browsers position floats

🔹Absolute Horizontal And Vertical Centering In CSS

🔹CSS Layout - float and clear

🔹CSS Layout - The position Property

🔹What The Flexbox?!

🔹A Complete Guide to Flexbox

🔹Flexbox Froggy | A game for learning CSS Flexbox

🔹Dive into Flexbox

🔹Grid By Example

🔹CSS Grid Property

🔹CSS Grid Layout

🔹CSS Style Guide

🔹CSS Reference

🔹CSS Backgrounds

🔹Do you really know CSS linear-gradients?

🔹Tool for Generating Gradient Background

🔹Using CSS transitions

🔹CSS border-radius Property

🔹CSS box-shadow Property

🔹CSS transform Property

🔹::before / ::after

🔹A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

🔹Animation

🔹Learn CSS Animations Tutorial

🔹CSS Animation Tutorial #1 - Introduction

🔹Intro to CSS 3D Transforms

🔹CSS Transform Functions Visualizer

🔹Front-End Challenge Accepted: CSS 3D Cube

🔹Sass And LESS: An Introduction To CSS Preprocessors

🔹6 Reasons You Should Use a CSS Preprocessor

🔹How to Choose the Right CSS Preprocessor

🔹Sass Basics

🔹Partials & Imports | Starting with Sass

🔹Getting Started with Sass

🔹How to build a custom grid with SASS

🔹The Complete Guide to Centering in CSS

🔹Remove all styling with one line of CSS

JavaScript

🔹JavaScript For Cats | An introduction for new programmers

🔹JavaScript Fundamentals in 13 Slides

🔹Data types

🔹Variables

🔹Numbers

🔹Raise a number to a power in JavaScript

🔹JavaScript Number to String

🔹Basic math in JavaScript — numbers and operators

🔹Basic operators, maths

🔹Handling text — strings in JavaScript

🔹JavaScript String Methods

🔹String Methods

🔹Comparisons

🔹JavaScript if else and else if

🔹Logical operators

🔹Making decisions in your code — conditionals

🔹How To Use the Switch Statement in JavaScript

🔹Regular Expressions (RegEx) Tutorial

🔹RegexOne | Learn Regular Expressions with simple, interactive exercises

🔹JavaScript Regular Expressions

🔹Functions

🔹Function expressions

🔹Arrow functions, the basics

🔹Function return values

🔹Function scope and conflicts

🔹Function vs Block Scopes

🔹CodeSmell

🔹The arguments object

🔹What is Pseudo-coding?

🔹Planning with pseudo-code

🔹Code Tells You How, Comments Tell You Why

🔹Coding Without Comments

🔹10 Principles for Keeping Your Programming Code Clean

🔹Beautiful JavaScript: Easily Create Chainable (Cascading) Methods for Expressiveness

🔹Self Documenting Code

🔹Airbnb style guide

🔹Tips For Developers

🔹Objects

🔹JavaScript object basics

🔹JavaScript Arrays

🔹JavaScript Array Methods Tutorial

🔹JavaScript Array Methods

🔹An Introduction to Browser Rendering

🔹What, exactly, is the DOM?

🔹Spread syntax (...)

🔹Getting, setting, & removing individual inline CSS properties

🔹How to sanitize third-party content with vanilla JS to prevent cross-site scripting (XSS) attacks

🔹The Document Object Model

🔹DOM Enlightenment

🔹Dynamic style - manipulating CSS with JavaScript

🔹JavaScript DOM Crash Course - Part 1

🔹HTML DOM Events

🔹Handling Events

🔹JavaScript Event Capture, Propagation and Bubbling - #JavaScript30 25/30

🔹What is the difference between onevent handlers and adddEventListener? (Scroll down to find the specified question)

🔹JavaScript Validation API

🔹Webpack: The Core Concepts

🔹Webpack | Asset Management

🔹Webpack | Output Management

🔹Through the pipeline: An exploration of front-end bundlers

🔹Working with JSON

🔹JSON.parse()

🔹JSON.stringify()

🔹JSON Formatter & Validator

🔹Discovering JavaScript Object Notation with Douglas Crockford

🔹Asynchronous JavaScript #3 - Callback Functions

🔹You Don't Know JS: Async & Performance | Chapter 2: Callbacks

🔹You Don't Know JS: Async & Performance | Chapter 3: Promises

🔹JavaScript Promises - Explain Like I'm Five

🔹Let's Learn ES6 - Promises

🔹Asynchronous JavaScript #4 - Promises

🔹Understanding JavaScript Promises

🔹Using Fetch

🔹Cross-origin resource sharing

🔹Free Public APIS

🔹Axios - Free API

🔹Superagent - Free API

🔹Async/await

🔹JavaScript ES 2017: Learn Async/Await by Example

🔹Taming the asynchronous beast with ES7

🔹JavaScript async and await in loops

🔹Javascript ES7 - Async / Await in under 3 minutes

🔹The developer’s guide to the HTML5 APIs

🔹JavaScript Prototype in Plain Language

🔹Object Oriented JavaScript Tutorial #10 - Prototype

🔹3 Different Kinds of Prototypal Inheritance: ES6+ Edition

🔹Prototypal inheritance

🔹Object.create()

🔹JavaScript Visualized: Prototypal Inheritance

🔹Javascript Tutorial | Prototype Inheritance | Ep24

🔹Is “Class” In ES6 The New “Bad” Part?

🔹Classes

🔹Class basic syntax

🔹About npm

🔹Downloading and installing packages locally

🔹Installing npm packages locally

🔹Creating a package.json file

🔹npm Docs

🔹import

🔹export

🔹Webpack Crash Course

🔹Streamline your code with webpack

🔹JavaScript Karel Robot Introduction

🔹Karel Robot

🔹S.O.L.I.D. Principles around you in JavaScript

🔹S.O.L.I.D The first 5 principles of Object Oriented Design with JavaScript

🔹How to Write Highly Scalable and Maintainable JavaScript: Coupling

🔹Just JavaScript : A Course by Dan Abramov and Maggie Appleton

🔹JavaScript — WTF is ES6, ES8, ES 2017, ECMAScript… ?

🔹ECMAScript 6

🔹Babel

🔹How to install Babel

🔹Solidify your JavaScript knowledge with Just JavaScript

🔹Learn JavaScript through visualization

🔹40 JavaScript Projects for Beginners

🔹30 Day Vanilla JS Coding Challenge

🔹JavaScript Playground

🔹A JavaScript Tip per day!

🔹JavaScript Snippets

🔹How let and const are scoped in JavaScript

🔹Module pattern in JavaScript

🔹RunJS - A playground for JavaScript

🔹Learning Javascript Design Patterns

🔹ESLint - The "use strict" Rules

🔹Build , Test & Debug RegEx

🔹Essential JavaScript debugging tools for the modern detective by Rebecca Hill

🔹65+ JavaScript Code Snippets - With Explanations

JavaScript Frameworks

🔹React Tutorial

🔹Vue Tutorial

🔹Angular Tutorial

🔹Nextjs Tutorial

Technical Interview Preparation

🔹FreeCodeCamp - Coding Interview Prep

🔹Maria Barkouzou - Technical Interview Challenges

🔹CodingInterview.com

🔹Edabit - 2.500 JavaScript Practice Challenges

🔹Top 155 JavaScript Interview Questions and Answers for 2021

🔹Codewars - JavaScript Practice Challenges

🔹2021 Front End Developer Interview Questions (And Answers!)

🔹Codecademy - Code Challenges

🔹Scrimba - How to ace the software engineer technical interview | Video

🔹Scrimba - How to Build a Junior Developer Portfolio That Will Get You Hired | Video

mariabarkouzou/FrontEnd-Web-Development-Useful-Resources

Useful Resources for Front End Web Developers

General

Chrome's Awesome Extensions

VS Code

UX | UI Design

Git

HTML5

CSS

JavaScript

JavaScript Frameworks

Technical Interview Preparation