A project for people who know something and want to start working with frameworks.
We'll assume you know the basics of the basics, have been building websites for some time, and would like to move on to frameworks like React, Vue, Angular, etc. Here's my list of things with simple examples that will organize your knowledge and prepare you to start working with frameworks.
In a word of introduction, I'd like to highlight two larger examples of the pages I included in the project:
- HTML
- Semantics, Accessibility, Multimedia, Canvas etc.
- CSS
- Efficient CSS
- Advanced animations
- Flexbox
- Grid
- CSS preprocessor
- JavaScript
- Asynchronous JavaScript
- ES6+ (Arrow function, Classes and inheritance, Range of variables etc.)
- ES Modules
- Package managers - NPM/Yarn
- Module bundlers - Webpack*
- Transpilers - Babel/TypeScript*
* - it is enough to know its basic assumptions
As we know, HTML is a descriptive language in which we use tags to define what a given subpage contains. HTML is the most basic building block of the Web. It defines the meaning and structure of web content. Remember, however, that it is worth repeating the issues related to semantics and accessibility before starting work with frameworks.
- W3C Accessibility Standards Overview
- Accessibility - Learn web development | MDN
- ARIA HTML Tutorial - What is ARIA & Why it's Important to Use!
CSS is neglected and underestimated by many people, due to the belief that CSS is only responsible for appearance. Remember, however, that it depends on us how the final product will look like and how it will behave on different devices - whether the interactions will be pleasant for the user, whether the animations that he watches will be smooth.
Of course, in case we are already entering the stage of application development where we want to learn frameworks, then we will not do without the use of preprocessors, because CSS alone very quickly becomes too limited when writing large applications.
- CSS Animation Optimization and Performance 101
- A Complete Guide to Flexbox | CSS-Tricks
- Learn Flexbox In 20 Minutes | Learn HTML & CSS | Flexbox Tutorial
- A Complete Guide to Grid | CSS-Tricks
- CSS Grid Layout Crash Course
- Learn CSS Grid in 20 Minutes
- Learn Sass In 20 Minutes | Sass Crash Course
- Sass Tutorial for Beginners - CSS With Superpowers
- Sass Crash Course
Once you know the basics of JavaScript it's a good idea to familiarize yourself with the key elements of JavaScript, which will allow you to better understand how the frameworks work. It will be necessary to know the assumptions brought by new versions of ECMAScript, asynchronicity in JavaScript and ES Modules.
- Asynchronous JavaScript (2020 version)
- Async Javascript Tutorial For Beginners (Callbacks, Promises, Async Await)
- ES6 Javascript Tutorial For Beginners | ES6 Crash Course
- JavaScript ES6 Modules
Package managers are an indispensable tool enabling the creation of extensive projects. Package managers allow you to:
- easy to install modules / packages locally and update them,
- easy sharing and reuse of the code with any npm user anywhere,
- creating scripts to automate repetitive tasks.
Unfortunately, tools of this type have one basic problem - they work locally, so the browser cannot access these resources. The solution to this problem are the module bundles which I will mention below.
Module bundlers are tools that take JavaScript code snippets and their dependencies and combine them into a single file that can be run in the browser. In addition, they allow you to:
- code spliting - splitting the resulting files into smaller pieces,
- compiling SCSS,
- optimize graphics, html code, css,
- tree shaking - shaking off the code from fragments that we don't use,
- lazy loading - technique in which the browser does not download all resources from the server at once, but does it when it is needed.
Transpilers (in relation to the Front-end) are tools whose main purpose is to convert modern JavaScript code into code compatible with older browsers. Transpilers work great with module bundlers and that is why configuration of these two tools is so important. Good mastery of these skills guarantees that our projects will run correctly on any browser.
The inspiration for my own list came from a video created by helloroman.