In this article, a number of useful links for learning front-end development have been collected. Hope you enjoy it!
Table of Contents
The Internet is a global network of computers connected to each other which communicate through a standardized set of protocols.
HTTP is the
TCP/IPbased application layer communication protocol which standardizes how the client and server communicate with each other. HTTP follows a classical "Client-Server model" with a client opening a connection request, then waiting until it receives a response. HTTP is a stateless protocol, that means that the server does not keep any data (state) between two requests. (MDN)
A web browser is a software application that enables a user to access and display web pages or other online content through its graphical user interface.
A domain name is a unique, easy-to-remember address used to access websites, such as
google.com, andfacebook.com. Users can connect to websites using domain names thanks to the Domain Name System (DNS).
The Domain Name System (DNS) is the phonebook of the Internet. Humans access information online through domain names, like nytimes.com or espn.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so browsers can load Internet resources.
Web hosting is an online service that allows you to publish your website files onto the internet. So, anyone who has access to the internet has access to your website.
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript). (MDN)
- MDN - HTML element references
- Tutorialspoinnt - Basic HTML tags
- Elated - Your First 10 HTML Tags
- W3Schools - HTML element references
- web.dev - Discoverable
- Google Web - SEO Basics
- web.div - SEO audits
- Google Web - Social discovery
- Google Web - Search Features
- Google Web - Sctructured Data
- web.dev - Easily Discoverable
💁 Suggestion!
- Take w3shools HTML quiz
- Answer HTML tests in this repository
- Try to earn HTML badge on LinkedIn quiz
Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. (MDN)
- W3Schools - CSS Tutorial
- MDN - CSS Basics
- Supercharged - CSS Selectors
- MDN - CSS first steps
- MDN - CSS building blocks
- MDN - CSS values and units
- MDN - CSS Syntax
- MDN - Introduction to the CSS basic box model
- MDN - The box model
- CSS Tricks - Inheriting box-sizing
- MDN - Mastering margin collapsing
- Margin Collapse in CSS: What, Why, and How
- CSS Tricks - What You Should Know About Collapsing Margins
- What's the Deal with Collapsible Margins?
- What's the Deal with Margin Collapse?
- MDN - CSS selectors
- MDN - All selectors
- CSS Tricks - Child and Sibling Selectors
- CSS Tricks - All Selectors
- W3Schools - CSS Combinators
- MDN - Specificity
- MDN - Cascade and inheritance
- dev.to - CSS Specificity
- Specificity Calculator
- W3Schools - CSS Specificity
- MDN - Pseudo-classes
- CSS Tricks - Meet the Pseudo Class Selectors
- When do the :hover, :focus, and :active pseudo-classes apply?
- W3Schools - CSS Pseudo-elements
- W3Schools - CSS Pseudo-classes
- Chrome Dev - Basic Layout
- W3Schools - CSS Website Layout
- MDN - Document and website structure
- MDN - CSS layout
- MDN - Grids
- CSS Tricks - A Complete Guide to CSS Grid
- MDN - CSS Grid
- CSS Grid Garden
- Supercharged - CSS Grids
- MDN - Responsive design
- Responsive Web Design Fundamentals by Google
- Google Dev - Responsive Design
- Google Dev - UX Patterns
- Google Dev - Responsive Content
- Codelabs - Responsive Design
- CSS Tricks - CSS Media Queries & Using Available Space
- MDN - Using media queries
- MDN - Using Media Queries for Accessibility
- MDN - Sizing items in CSS
- MDN - CSS values and units
- The CSS Workshop - Relative Units
- CSS Tricks - Fun with Viewport Units
- dev.to - 15 CSS Relative units
- Google Devs - Responsive Images
- MDN - Responsive Images
- Virgool - My Article about Images on Web Pages
- MDN - transform
- CSS Tricks - Transform
- My Knowledge Sharing with @malikarami - Advanced HTML and CSS
- MDN - Using CSS animations
- CSS Tricks - Animation
- My Knowledge Sharing with @malikarami - Advanced HTML and CSS
- MDN - Using CSS custom properties
- Google Devs - CSS Variables: Why Should You Care?
- dev.to - CSS Quickies: CSS Variables
- CSS Variables explained with 5 examples
JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. (MDN)
- MDN - Spread syntax
- Freecodecamp - An introduction to Spread syntax
- Object rest and spread properties
- MDN - DOM Introduction
- Freecodecamp - What's the DOM
- htmldom.dev
- MDN - Locating DOM elements using selectors
npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.
Yarn is a software packaging system developed in 2016 by Facebook for Node.js JavaScript runtime environment that provides speed, consistency, stability, and security as an alternative to npm (package manager).
React is the most popular front-end JavaScript library for building user interfaces. React can also render on the server using Node and power mobile apps using React Native.
| PackageName | Description |
|---|---|
@mui/material |
MUI Core contains foundational React UI component libraries for shipping new features faster. |
react-query |
Hooks for fetching, caching and updating asynchronous data in React |
framer-motion |
Motion powers Framer, the web builder for creative pros. Design and ship your dream site. Zero code, maximum speed. |
classnames |
A simple JavaScript utility for conditionally joining classNames together. |
react-lottie |
Lightweight, scalable animations for websites |
| ... | ... |