Forwarded from Learn Web Development
🔺Roadmap to become Full-Stack developer in 2021🔺
🔺How The Internet Works
1. What happens when you go google
2. Introduction to Networks
3. Browser Networking
4. IP Addresses
5. HTTP/2
6. What is domain name?
7. What is hosting?
🔺Advanced Front End 🔚
1. HTML
2. CSS
3. JavaScript
4. React
🔺Operating Systems 🖥
1. Using the command line
2. What is an operating system?
3. Memory
4. Unix Programming
5. Bash-Scripting Guide
6. Thread & Concurrency
7. Process Management
8. Interprocess Communication
9. Basic Networking
10. Basic Terminal Commands
🔺Programming Languages 📕
1. Know PHP
2. Learn Ruby
3. Learn Rust
4. Learn Go
5. Know Server-Side JavaScript
6. Learn Python
7. Learn C#
8. Learn Java
Make sure you have in-depth knowledge of your favorite language
🔺Version Control
1. A Visual Git Reference
2. Visualizing Git Concepts with D3
3. Github Cheat Sheet
4. SVN
5. Repo Hosting Services
a. GitHub
b. GitLab
c. Bitbucket
🔺Relational Databases
1. Object-Relational Mapping
2. ACID
3. N+1 Problem
4. Sharding
5. CAP Theorem
6. Normalization
7. Indexes
8. Theory of Relational Databases
a. Learn MySQL
b. Learn PostgreSQL
c. Learn MariaDB
d. Learn MS SQL
🔺NoSQL Databases
1. Learn MongoDB
2. Learn CouchDB
3. NoSQL Databases
4. Graph Databases
🔺APIs
1. Working with APIs
2. REST
3. GraphQL
4. JSON-RPC
5. HATEOAS
6. Authentication
🔺Caching
1. Learn HTTP caching
2. Learn Redis
3. Learn Memcached
4. Learn Service workers
🔺Security
1. HTTPS + TLS
2. CORS
3. MD5
4. SHA-2
5. SCrypt
6. BCrypt
7. OWASP
8. Content Security Policy
🔺CI/CD
1. Testing your code
2. Jenkins
3. TravisCI
🔺Development Concepts
1. SOLID
2. KISS
3. YAGNI
4. DRY
5. Domain-Driven Design
6. Test Driven Development
7. MVC
🔺Software Architecture
1. Monolithic Apps
2. Microservices
3. Service Oriented Architecture
4. CQRS
5. Serverless
🔺Containers
1. Docker Fundamentals
2. Docker Cookbook
3. Kubernetes Cookbook
4. rkt
5. LXC
🔺Servers
1. Nginx Handbook
2. Apache
3. Caddy
🔺Scalability
1. Distributed Systems
2. System Design Primer
3. Real-World Maintainable Software
4. The 12 Factor App
5. Architecting Frontend Projects To Scale
🔺How The Internet Works
1. What happens when you go google
2. Introduction to Networks
3. Browser Networking
4. IP Addresses
5. HTTP/2
6. What is domain name?
7. What is hosting?
🔺Advanced Front End 🔚
1. HTML
2. CSS
3. JavaScript
4. React
🔺Operating Systems 🖥
1. Using the command line
2. What is an operating system?
3. Memory
4. Unix Programming
5. Bash-Scripting Guide
6. Thread & Concurrency
7. Process Management
8. Interprocess Communication
9. Basic Networking
10. Basic Terminal Commands
🔺Programming Languages 📕
1. Know PHP
2. Learn Ruby
3. Learn Rust
4. Learn Go
5. Know Server-Side JavaScript
6. Learn Python
7. Learn C#
8. Learn Java
Make sure you have in-depth knowledge of your favorite language
🔺Version Control
1. A Visual Git Reference
2. Visualizing Git Concepts with D3
3. Github Cheat Sheet
4. SVN
5. Repo Hosting Services
a. GitHub
b. GitLab
c. Bitbucket
🔺Relational Databases
1. Object-Relational Mapping
2. ACID
3. N+1 Problem
4. Sharding
5. CAP Theorem
6. Normalization
7. Indexes
8. Theory of Relational Databases
a. Learn MySQL
b. Learn PostgreSQL
c. Learn MariaDB
d. Learn MS SQL
🔺NoSQL Databases
1. Learn MongoDB
2. Learn CouchDB
3. NoSQL Databases
4. Graph Databases
🔺APIs
1. Working with APIs
2. REST
3. GraphQL
4. JSON-RPC
5. HATEOAS
6. Authentication
🔺Caching
1. Learn HTTP caching
2. Learn Redis
3. Learn Memcached
4. Learn Service workers
🔺Security
1. HTTPS + TLS
2. CORS
3. MD5
4. SHA-2
5. SCrypt
6. BCrypt
7. OWASP
8. Content Security Policy
🔺CI/CD
1. Testing your code
2. Jenkins
3. TravisCI
🔺Development Concepts
1. SOLID
2. KISS
3. YAGNI
4. DRY
5. Domain-Driven Design
6. Test Driven Development
7. MVC
🔺Software Architecture
1. Monolithic Apps
2. Microservices
3. Service Oriented Architecture
4. CQRS
5. Serverless
🔺Containers
1. Docker Fundamentals
2. Docker Cookbook
3. Kubernetes Cookbook
4. rkt
5. LXC
🔺Servers
1. Nginx Handbook
2. Apache
3. Caddy
🔺Scalability
1. Distributed Systems
2. System Design Primer
3. Real-World Maintainable Software
4. The 12 Factor App
5. Architecting Frontend Projects To Scale
Forwarded from Learn JavaScript™
Master frontend skill by cloning these sites🎉
1. Netflix🎯
https://www.netflix.com/in/login?nextpage=https%3A%2F%2Fwww.netflix.com%2Fbrowse
When logged in Netflix is a pretty simple design. Horizontal rows, galleries, with a big featured banner.
2.Hulu🎯
https://www.hulu.com/welcome
Just like Netflix, the logged in experience in Hulu is pretty similar. Has a large featured banner, and basically rows of movies or tv shows with every few rows having a featured section.
3. Apple 🎯
https://www.apple.com/
You'll know what I mean by "big block" design. Apple does this well. It's clean, intuitive and pretty straight forward. If you break everything down into smaller components, you'll see how easy it would be to implement the design.
4. Airbnb🎯
https://www.airbnb.co.in/?locale=en&_set_bev_on_new_domain=1638253270_ZWVmZDNiNGY3OWJh
Airbnb is such a beautiful website! The assets are amazing. Break this design down into smaller components, and you'll see how it's just a bunch of big rows and small rows. Blocks either spanning multiple columns, or the entire row.
5.SpaceX🎯
https://www.spacex.com/
Super easy design. SpaceX is basically multiple fullscreen images with fade up content and a link section.
6. NVIDIA🎯
https://www.nvidia.com/en-us/
Another easy, but professional looking design. Just a banner, grid layout and rows.
7.Razer🎯
https://www.razer.com/
A mix of a large home banner, full page featured sections, and big box design. Have fun with this sick color scheme!
8.Salesforce🎯
https://www.salesforce.com/in/?ir=1
Another great website to polish your css skills. A mix of banners, rows, columns, reverse columns, big box design, but also has featured list, multiple call to actions, and fun images.
9. Adobe🎯
https://www.adobe.com/
Another big box design. But also features some cool background gradients.
10. Microsoft🎯
https://www.microsoft.com/en-us/
Features a modal, big banners, multiple featured sections, big call to action. Pretty straight forward, but professional looking design.
11. Blockchain🎯
https://www.blockchain.com/
Learn about blockchain while you clone this one. This design incorporates a few more difficult design concepts. It also features a big banner, call to actions, gradient effects, but also has big box designs as links and dynamic accordions. So not only does the accordion tab drop more content below it, it changes the image beside it! You probably have a tool of choice for this 🤔
12. Paypal🎯
https://www.paypal.com/us/home
Features a big banner, call to action, and reverse rows. Straight forward, but effective design.
13. Slack 🎯
https://slack.com/intl/en-in/
Slack features a fun homepage banner. In the banner is a toast banner, a call to action, a Google sign in button, and a row of icons featuring companies that use Slack. The rest of the layout is a simple grid system with a typical reverse row design. Minimal animations, like hover effects.
14. Discord🎯
https://discord.com/
Probably my favorite looking website on the list. It has fun vibrant colors, a minimalistic homepage banner featuring a call to action, reverse row grid layout and a nice big featured section.
15. Amazon🎯
https://www.amazon.com/
The king of e-commerce. This is a straight up "show off" mockup. If you can nail Amazons design, your frontend dev design skills are up to industry standard. Features a slightly more complex grid layout, with content spanning one or more rows and columns. Has a search bar in the navigation. Also has recommended section, hover effects, carousels, etc. Have fun with this behemoth!
16. PlayStation🎯
https://www.playstation.com/en-us/
Playstation. com has a nice large homepage banner featuring a slide show with a nice fade in effect. You can code this from scratch, or use your favorite library.
1. Netflix🎯
https://www.netflix.com/in/login?nextpage=https%3A%2F%2Fwww.netflix.com%2Fbrowse
When logged in Netflix is a pretty simple design. Horizontal rows, galleries, with a big featured banner.
2.Hulu🎯
https://www.hulu.com/welcome
Just like Netflix, the logged in experience in Hulu is pretty similar. Has a large featured banner, and basically rows of movies or tv shows with every few rows having a featured section.
3. Apple 🎯
https://www.apple.com/
You'll know what I mean by "big block" design. Apple does this well. It's clean, intuitive and pretty straight forward. If you break everything down into smaller components, you'll see how easy it would be to implement the design.
4. Airbnb🎯
https://www.airbnb.co.in/?locale=en&_set_bev_on_new_domain=1638253270_ZWVmZDNiNGY3OWJh
Airbnb is such a beautiful website! The assets are amazing. Break this design down into smaller components, and you'll see how it's just a bunch of big rows and small rows. Blocks either spanning multiple columns, or the entire row.
5.SpaceX🎯
https://www.spacex.com/
Super easy design. SpaceX is basically multiple fullscreen images with fade up content and a link section.
6. NVIDIA🎯
https://www.nvidia.com/en-us/
Another easy, but professional looking design. Just a banner, grid layout and rows.
7.Razer🎯
https://www.razer.com/
A mix of a large home banner, full page featured sections, and big box design. Have fun with this sick color scheme!
8.Salesforce🎯
https://www.salesforce.com/in/?ir=1
Another great website to polish your css skills. A mix of banners, rows, columns, reverse columns, big box design, but also has featured list, multiple call to actions, and fun images.
9. Adobe🎯
https://www.adobe.com/
Another big box design. But also features some cool background gradients.
10. Microsoft🎯
https://www.microsoft.com/en-us/
Features a modal, big banners, multiple featured sections, big call to action. Pretty straight forward, but professional looking design.
11. Blockchain🎯
https://www.blockchain.com/
Learn about blockchain while you clone this one. This design incorporates a few more difficult design concepts. It also features a big banner, call to actions, gradient effects, but also has big box designs as links and dynamic accordions. So not only does the accordion tab drop more content below it, it changes the image beside it! You probably have a tool of choice for this 🤔
12. Paypal🎯
https://www.paypal.com/us/home
Features a big banner, call to action, and reverse rows. Straight forward, but effective design.
13. Slack 🎯
https://slack.com/intl/en-in/
Slack features a fun homepage banner. In the banner is a toast banner, a call to action, a Google sign in button, and a row of icons featuring companies that use Slack. The rest of the layout is a simple grid system with a typical reverse row design. Minimal animations, like hover effects.
14. Discord🎯
https://discord.com/
Probably my favorite looking website on the list. It has fun vibrant colors, a minimalistic homepage banner featuring a call to action, reverse row grid layout and a nice big featured section.
15. Amazon🎯
https://www.amazon.com/
The king of e-commerce. This is a straight up "show off" mockup. If you can nail Amazons design, your frontend dev design skills are up to industry standard. Features a slightly more complex grid layout, with content spanning one or more rows and columns. Has a search bar in the navigation. Also has recommended section, hover effects, carousels, etc. Have fun with this behemoth!
16. PlayStation🎯
https://www.playstation.com/en-us/
Playstation. com has a nice large homepage banner featuring a slide show with a nice fade in effect. You can code this from scratch, or use your favorite library.
Forwarded from Learn Web Development
This media is not supported in your browser
VIEW IN TELEGRAM
Web 1.0-beta
Everybody be talking about Web 2.0 vs Web 3.0. But what about Web 1.0-beta?
Try the original web experience: https://worldwideweb.cern.ch/
Credits: Fireship
#shorts #webdev #compsci
Everybody be talking about Web 2.0 vs Web 3.0. But what about Web 1.0-beta?
Try the original web experience: https://worldwideweb.cern.ch/
Credits: Fireship
#shorts #webdev #compsci
HTML in 100 Seconds by Fireship
https://youtu.be/ok-plXXHlWw
Ready to build your first website? HTML or Hypertext Markup Language is one of the core building blocks of the web.
Learn the history of HTML and how it's used to give structure to a webpage.
🔗 Resources
HTML history https://home.cern/science/computing/birth-web/short-history-web
HTML basics https://developer.mozilla.org/en-US/docs/Web/HTML
#webdev #programming #100SecondsOfCode
https://youtu.be/ok-plXXHlWw
Ready to build your first website? HTML or Hypertext Markup Language is one of the core building blocks of the web.
Learn the history of HTML and how it's used to give structure to a webpage.
🔗 Resources
HTML history https://home.cern/science/computing/birth-web/short-history-web
HTML basics https://developer.mozilla.org/en-US/docs/Web/HTML
#webdev #programming #100SecondsOfCode
Tips and tricks in compiling HTML structure to get a good SEO score
https://levelup.gitconnected.com/semantics-how-i-structure-html-without-divitis-dd0d376f193
#seo #html
https://levelup.gitconnected.com/semantics-how-i-structure-html-without-divitis-dd0d376f193
#seo #html
How to add a new HTML element into the DOM with pure JavaScript
https://javascript.plainenglish.io/how-to-add-elements-to-the-page-with-vanilla-js-12f7d5f809ad
---
Simple practice changing favicon on web app
https://dev.to/ah7/how-to-add-a-favicon-to-your-webpage-1f5i
---
#dom #html #favicon
https://javascript.plainenglish.io/how-to-add-elements-to-the-page-with-vanilla-js-12f7d5f809ad
---
Simple practice changing favicon on web app
https://dev.to/ah7/how-to-add-a-favicon-to-your-webpage-1f5i
---
#dom #html #favicon
Forwarded from Learn Web Development
Update text editor VS Code / Codium version 1.63 is already available with many improvements and new features.
The release notes can be seen here.
https://code.visualstudio.com/updates/v1_63
#code #codium #release
The release notes can be seen here.
https://code.visualstudio.com/updates/v1_63
#code #codium #release
Forwarded from All kind of Ebooks ™
HTML to React_ The Ultimate Guide PDF (1).pdf
8.5 MB
Forwarded from Learn Web Development
Freecodecamp practice using CSS Media Query to create responsive web pages
https://www.freecodecamp.org/news/how-to-use-css-media-queries-to-create-responsive-websites/
---
Explanation of anchor tags in HTML and examples
https://www.freecodecamp.org/news/the-html-a-tag-anchor-tag-example-code/
#css #mediaquery #anchor #tag #freecodecamp
https://www.freecodecamp.org/news/how-to-use-css-media-queries-to-create-responsive-websites/
---
Explanation of anchor tags in HTML and examples
https://www.freecodecamp.org/news/the-html-a-tag-anchor-tag-example-code/
#css #mediaquery #anchor #tag #freecodecamp
Forwarded from Learn Web Development
Freecodecamp's long practice of introducing SVG by creating an analog clock app using JavaScript, HTML and CSS
https://www.freecodecamp.org/news/svg-javascript-tutorial/
---
Practice making the Pomodoro Timer application with Javascript, HTML and CSS
https://javascript.plainenglish.io/build-a-pomodoro-timer-using-html-css-and-javascript-7a7a8410052c
---
Practice creating animated web pages using Theater JS
https://blog.logrocket.com/theatre-js-creating-intricate-powerful-animations/
---
Comparison between Flexbox and CSS Grid
https://betterprogramming.pub/flexbox-vs-css-grid-3e9011ee2951
#freecodecamp #svg #clock #pomodoro #flexbox #cssGrid
https://www.freecodecamp.org/news/svg-javascript-tutorial/
---
Practice making the Pomodoro Timer application with Javascript, HTML and CSS
https://javascript.plainenglish.io/build-a-pomodoro-timer-using-html-css-and-javascript-7a7a8410052c
---
Practice creating animated web pages using Theater JS
https://blog.logrocket.com/theatre-js-creating-intricate-powerful-animations/
---
Comparison between Flexbox and CSS Grid
https://betterprogramming.pub/flexbox-vs-css-grid-3e9011ee2951
#freecodecamp #svg #clock #pomodoro #flexbox #cssGrid
Forwarded from Learn CSS™
An important exercise from Kevin Powell on using CSS Flexbox for HTML element layout
https://youtu.be/u044iM9xsWU
#flexbox #css #kevinPowell
https://youtu.be/u044iM9xsWU
#flexbox #css #kevinPowell
Forwarded from Learn CSS™
Customizing HTML5 video player with CSS
https://blog.logrocket.com/creating-customizing-html5-video-player-css/
#html5 #videoplayer #css
https://blog.logrocket.com/creating-customizing-html5-video-player-css/
#html5 #videoplayer #css