codv.net
كيف تصبح
Frontend Developer
2021
كيف يعمل الانترنت
codv.net
Hosting
DNS
HTTP / HTTPS
Browsers
Domain Names
الادوات الرئيسية
codv.net
Visual Studio Code
Sublime Text
Atom
1- Code Editor
الادوات الرئيسية
codv.net
Chrome
IE
Safari
Firefox
2- Browser
الادوات الرئيسية
codv.net
3- Terminal
System Terminal
Powershell
Bash
Zsh
الادوات الرئيسية
codv.net
4- Design
Adobe XD
Figma
Sketch
Photoshop
Web Development
codv.net
صالة التقديم
مطبخ
مخزن +
FrontEnd
BackEnd
Web Development
codv.net
Website
FrontEnd
BackEnd
HTML , CSS , JAVASCRIPT
Logic : Php, Js, C#, Python ....
DataBase : MySQL, MongoDB ....
Web Development
codv.net
HTML
Hyper Text Markup Language
ليست لغة برمجة
تستخدم لبناء هيكل الموقع والصفحات
CSS
Cascading Style Sheet
ليست لغة برمجة
تستخدم لبناء تصميم وشكل الموقع
CSS
Javascript
لغة برمجة
تستخدم لاعطاء الموقع التفاعلية وارسال واستقبال البيانات
HTML
codv.net
HTML
Basic Tags
Semantic HTML
Forms & Validations
Accessibility
SEO
CSS
codv.net
Basics
CSS
Flexbox
CSS Grid
Animation / Transitions
(AOS , anime.js , Animate.css, .... )
Responsive Design
CSS
codv.net
CSS
Responsive Design
Mobile First
em / rem units
Responsive images
Fluid Widths
Media Queries
CSS
codv.net
CSS
CSS Preprocessors
SASS
PostCSS
CSS
codv.net
CSS
Modern CSS
BEM Mehedology
Styled Components
CSS Modules
CSS
codv.net
CSS
CSS Frameworks
Bootstrap
TailwindCSS
JAVASCRIPT
codv.net
Javascript
Basic Syntax ( var, fun, loops, arrays, obj, ... )
DOM Manipulation
AJAX & ASYNC JS
JSON
ES6+
JAVASCRIPT
codv.net
Javascript
More Tools
JS Frameworks & Libraries
Future Tech
JAVASCRIPT
codv.net
Javascript
More Tools
1- Package Managers
NPM
Yarn
JAVASCRIPT
codv.net
Javascript
More Tools
2- Build Tools
Linters & formatters
- Prettiers
- ESLint
Task Runners
- npm scripts
- Gulp
JAVASCRIPT
codv.net
Javascript
More Tools
2- Build Tools
Module Bundlers
- Webpack
- Parcel
JAVASCRIPT
codv.net
Javascript
More Tools
3- Version Control
Git / Github
4- others
Browser Dev Tools
VS Code Extensions
Emmet
Axios
JAVASCRIPT
codv.net
Javascript
Future Tech
GraphQl
PWA (progressive Web Apps)
Web Assembly
Speech Recognition
JAVASCRIPT
codv.net
Javascript
JS Frameworks & Libraries
Modern Framework
React
Angular
Vue
jQuery
Typescript
JAVASCRIPT
codv.net
Javascript
JS Frameworks & Libraries
State Management
ContextApi & Redux
Services & NgRx
Vuex
JAVASCRIPT
codv.net
Javascript
JS Frameworks & Libraries
Static Site Generators
Next , Gatsby
Nuxt
codv.net
CODV.NET
Frontend Roadmap 2021
By Hossam Mo
