Learn Front-End Web Development For FREE (Complete Roadmap With Resources)
Thread ๐งต
Thread ๐งต
0- How does the Internet work?
This video will help someone with no technical knowledge to understand how the internet works and learn the fundamentals of computer networking.
Tutorial: youtu.be
This video will help someone with no technical knowledge to understand how the internet works and learn the fundamentals of computer networking.
Tutorial: youtu.be
1- HTML & CSS
Learn HTML & CSS basics with this amazing free 11-hour-long video by John Smilga.
P.S I've already watched it myself and I can't recommend it enough.
youtu.be
Learn HTML & CSS basics with this amazing free 11-hour-long video by John Smilga.
P.S I've already watched it myself and I can't recommend it enough.
youtu.be
2- Flexbox
Flexbox is a modern layout mode in CSS3 that helps us align and organize HTML elements simply and easily.
It was invented to replace floats Flexbox was founded to replace floats that were inefficient to use.
Tutorial: youtu.be
Flexbox is a modern layout mode in CSS3 that helps us align and organize HTML elements simply and easily.
It was invented to replace floats Flexbox was founded to replace floats that were inefficient to use.
Tutorial: youtu.be
3- CSS Grid
CSS GRID is a CSS Layout system, It's similar to flexbox but more powerful and a bit more difficult with different use cases.
Tutorial: youtu.be
CSS GRID is a CSS Layout system, It's similar to flexbox but more powerful and a bit more difficult with different use cases.
Tutorial: youtu.be
4- Responsive Web Design
Take your HTML & CSS skills to the next level by building websites that respond to all screen sizes using the best practices available.
Responsive design is a must-have skill for front-end developers.
Tutorial: youtu.be
Take your HTML & CSS skills to the next level by building websites that respond to all screen sizes using the best practices available.
Responsive design is a must-have skill for front-end developers.
Tutorial: youtu.be
5- SASS
SASS is CSS Preprocessor
The reason we use Sass is that it enhances the functionality Of CSS beyond its natural capabilities.
It can cut down repeated code and structure
Things in an efficient way
Tutorial: youtu.be
SASS is CSS Preprocessor
The reason we use Sass is that it enhances the functionality Of CSS beyond its natural capabilities.
It can cut down repeated code and structure
Things in an efficient way
Tutorial: youtu.be
6- Build Projects Using What You Learned
Improve your HTML and CSS skills by practicing on real design templates using codewell.cc
This is another awesome website where you can put into practice your HTML & CSS skills devchallenges.io
Improve your HTML and CSS skills by practicing on real design templates using codewell.cc
This is another awesome website where you can put into practice your HTML & CSS skills devchallenges.io
7- JavaScript
The next step towards learning the front-end is to learn the ALMIGHTY JavaScript.
JavaScript allows you to make web pages interactive and it's a must-have skill as a front-end developer.
Tutorial: youtu.be
The next step towards learning the front-end is to learn the ALMIGHTY JavaScript.
JavaScript allows you to make web pages interactive and it's a must-have skill as a front-end developer.
Tutorial: youtu.be
8- Git
Whenever you work on a large project, maintaining different versions of the application is a cumbersome task. We are lucky to have software like Git to sort it out for us.
Tutorial: youtu.be
Whenever you work on a large project, maintaining different versions of the application is a cumbersome task. We are lucky to have software like Git to sort it out for us.
Tutorial: youtu.be
9- REST API
When you are working on any real-world application, you would require data from other servers, APIs provide end-points to share data between your application and the various services hosted on the web.
Tutorial: youtube.com
When you are working on any real-world application, you would require data from other servers, APIs provide end-points to share data between your application and the various services hosted on the web.
Tutorial: youtube.com
10- A Front-End Framework, React | Vue | Svelte
A front-end framework is essentially a bundle of JavaScript code that someone else has written which you can include in your application to help you build it faster
Get comfortable with a front-end framework and get good at it
A front-end framework is essentially a bundle of JavaScript code that someone else has written which you can include in your application to help you build it faster
Get comfortable with a front-end framework and get good at it
11- JavaScript you're gonna need to visit to learn more about the language
MDN: developer.mozilla.org
JavaScript Info: Javascript.info
MDN: developer.mozilla.org
JavaScript Info: Javascript.info
12- Websites to ask questions when you get stuck
1- Stackoverflow: stackoverflow.com
2- SitePoint Forums: sitepoint.com
3- WebDeveloper: webdeveloper.com
4- Reddit Communitues: reddit.com
1- Stackoverflow: stackoverflow.com
2- SitePoint Forums: sitepoint.com
3- WebDeveloper: webdeveloper.com
4- Reddit Communitues: reddit.com
13- Keep Building Projects
Always be building. Always. The more you build, the more you learn.
Always be building. Always. The more you build, the more you learn.
12- Last Tip
Make sure to learn Javascript well. It's the foundation for everything you'll be doing in the future.
Learn the fundamentals well, spend time with them don't escape them quickly.
Make sure to learn Javascript well. It's the foundation for everything you'll be doing in the future.
Learn the fundamentals well, spend time with them don't escape them quickly.
What do you think?
If you have any additional information please make sure to share it with us so everyone can learn.
Make sure to follow me for more content like this.
@devatTheCave
Thank you for reading.
If you have any additional information please make sure to share it with us so everyone can learn.
Make sure to follow me for more content like this.
@devatTheCave
Thank you for reading.
Loading suggestions...