Загрузил Евгений Кириченко

frontend

реклама
○
"
"
○
"
○
○
"
○
Find the detailed version of this roadmap
Personal Recommendation / Opinion
Order in roadmap not strict (Learn anytime)
What is HTTP?
What is Domain Name?
Internet
"
○
What is hosting?
Learn the basics
"
○
Accessibility
HTML
"
○
SEO Basics
Forms and Validations
CSS
Learn the basics
JavaScript
Making Layouts
Conventions and Best Practices
"
○
Floats
"
○
Positioning
"
○
Display
Box Model
Syntax and Basic Construct
Responsive design and Media Queries
"
○
"
○
"
○
Writing Semantic HTML
"
○
"
○
"
○
Browsers and how they work?
"
○
"
○
"
○
DNS and how it works?
How does the internet work?
"
○
"
○
http: // roadmap.sh
Front-end
I wouldn't recommend
"
○
"
○
along with resources and other roadmaps
Alternative Option - Pick this or purple
"
○
CSS Grid
Flex Box
Learn DOM Manipulation
Learn Fetch API / Ajax (XHR)
ES6+ and modular JavaScript
"
○
Understand the concepts
Version Control Systems
Repo hosting services
What are they and why you should use one
Create account and Learn to use GitHub
"
○
"
○
Basic Usage of Git
Hoisting, Event Bubbling, Scope,
GitHub
Prototype, Shadow DOM, strict,
"
○
Gitlab
"
○
"
○
Web Security Knowledge
Bitbucket
npm and yarn both are fine, pick
one or learn both, there is not
"
○
much difference.
Get at least a basic knowledge of all of these
HTTPS
"
○
npm
"
○
"
○
Content Security Policy
Package Managers
OWASP Security Risks
CORS
yarn
BEM
OOCS
SMACSS
"
○
Sass
CSS Architecture
CSS Preprocessor
With modern frameworks and CSS-in-JS you don't
With how the modern frameworks there has been
have to worry about these anymore but still it would
more push towards CSS-in-JS so you may not nee
be a good idea to get familiarized with BEM atleast.
these but still a good idea to familiarize yourself.
"
○
PostCSS
Less
"
○
"
○
Prettier
npm scripts
Build Tools
Task Runners
"
○
ESLint
Linters and Formatters
Gulp
StandardJS
"
○
Webpac
Webpack
"
○
"
○
Module Bundlers
Rollu
Rollup
"
○
React.js
"
○
Pick a Framework
Vue.js
"
○
Jest
Testing your Apps
react-testing-library
Cypress
Enzyme
"
○
Shadow DOM
CSS Frameworks
"
○
"
○
Custom Elements
Glamorou
"
○
"
○
HTML Templates
"
○
Web Components
Radium
"
○
"
○
VueX
Modern CSS
Emotio
"
○
"
○
NgR
Styled JSX
"
○
"
○
RxJS
Angular
"
○
CSS Module
"
○
"
○
MobX
Styled Component
"
○
"
○
Redux
"
○
Parce
Parcel
Reactstrap
Material UI
"
○
Tailwind CSS
"
○
Chakra UI
Materialize CSS
Learn the difference between Unit, Integration
You can fill all your testing
"
○
Bootstrap
"
○
"
○
"
○
Bulma
and Functional tests and learn how to write
JS based and better to use
CSS first frameworks which
them with the tools listed on the left.
with your framework based
don't come with JavaScript
JavaScript applications.
components by default
Mocha
Chai
Jasmine
Ava
needs with just these.
"
○
"
○
"
○
Progressive Web Apps
Storage
TypeScript
Flow
Web Sockets
Service Workers
Location
"
○
"
○
"
○
PRPL Pattern
Notifications
RAIL Model
Device Orientation
Performance Metrics
Payments
Using Lighthouse
Credentials
Using DevTools
Learn different Web
Calculating, Measuring
APIs used in PWAs
and improving performance
Server Side Rendering (SSR)
React.js
"
○
Next.js
Angular
Vue.js
"
○
Apollo
GraphQL
Relay Modern
"
○
"
○
Universal
Nuxt.js
"
○
"
○
Ionic
"
○
Desktop Applications
Electro
"
○
GatsbyJS
Nuxt.js
"
○
"
○
Jekyll
Web Assembly or WASM is the binary instructions generated from
higher level languages such as Go, C, C++ or Rust. It is faster than
JavaScript and WASM 1.0 has already shipped in the major browser
W3C accepted it as an official standard at the end of 2019. It will still
take quite some time to go mainstream though.
Keep Learning
"
○
Carlo
Proton Native
Web Assembly
"
○
"
○
Vuepres
Hugo
"
○
"
○
"
○
Static Site Generators
Mobile Applications
"
○
"
○
Next.js
NativeScript
"
○
After.js
React Native
Flutter
"○
○
"
Type Checkers
"
○
Скачать