Read on Twitter
Get started with Frontend Web Development the right way. ( For newbies )
Contents
⇢ Prerequisites
⇢ HTML & CSS: Foundation of frontend development
⇢ JavaScript: Add logic to your site
⇢ Assets
⇢ JavaScript frameworks
⇢ Where to learn from?
#100daysofcode
Contents
⇢ Prerequisites
⇢ HTML & CSS: Foundation of frontend development
⇢ JavaScript: Add logic to your site
⇢ Assets
⇢ JavaScript frameworks
⇢ Where to learn from?
#100daysofcode
🢡 Prerequisites.
You need:
- A Laptop, tablet or a decent smartphone
- An Internet connection
- A code editor: VS Code,Sublime,Codepen,Repl. it.
- Passion
That's it!
You need:
- A Laptop, tablet or a decent smartphone
- An Internet connection
- A code editor: VS Code,Sublime,Codepen,Repl. it.
- Passion
That's it!
🢡 1. HTML contains all the things in in a web page, like text, images ,forms whatever!
Think of it like the skeleton of a website
Think of it like the skeleton of a website
🢡 1.1 CSS is used to "style" the elements of a web page
It adds beauty to your site and makes it look good. CSS in my opinion is more complex than HTML, but still easy enough to grasp with some practice.
It adds beauty to your site and makes it look good. CSS in my opinion is more complex than HTML, but still easy enough to grasp with some practice.
🢡 Concepts you must know in HTML.
1. Basic tags like H1,H2,p,head,footer,section,article etc.
2. Tag attributes, like src for img tag, Class and Id
That's it!
1. Basic tags like H1,H2,p,head,footer,section,article etc.
2. Tag attributes, like src for img tag, Class and Id
That's it!
🢡 Concepts you must know in CSS
float, margin,text-align, padding, position, flexbox, font family, !important, CSS grid are important concepts one must know about.
Read these articles for more info.
> https://zellwk.com/blog/9-important-css-properties-you-must-know/
> https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
float, margin,text-align, padding, position, flexbox, font family, !important, CSS grid are important concepts one must know about.
Read these articles for more info.
> https://zellwk.com/blog/9-important-css-properties-you-must-know/
> https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
🢡 JavaScript is brain of your site, this image sums it up perfectly.
You must know concepts like console,log, functions , classes ,loops and especially the DOM in Js.
You can later learn about promise,async and await.
You must know concepts like console,log, functions , classes ,loops and especially the DOM in Js.
You can later learn about promise,async and await.
🢡 To make your website, you will require assets, which include svg icons, illustrations and other placeholder images.
This thread by @denicmarko has you covered. https://twitter.com/denicmarko/status/1277492431546613760?s=20
This thread by @denicmarko has you covered. https://twitter.com/denicmarko/status/1277492431546613760?s=20
🢡 JavaScript Frameworks
For frontend developement, react,vue and angular are the most popular Js framworks, but should you use them?
No, not atleast when you are just starting out.
Get into them once you have a thorough understanding of the basics of HTML,CSS and Js.
For frontend developement, react,vue and angular are the most popular Js framworks, but should you use them?
No, not atleast when you are just starting out.
Get into them once you have a thorough understanding of the basics of HTML,CSS and Js.
>Another thing to note about these 3 Js frameworks is that they combine HTML and JS into one file, therefore you must know about the basics of HTML, CSS and Js first.
You should also avoid use of tools like bootstrap, bulma or tailwindCSS when you are a beginner.
You should also avoid use of tools like bootstrap, bulma or tailwindCSS when you are a beginner.
🢡 Where to learn from?
Simple answer:
Freecodecamp, they have the BEST web development course for beginners and it's free.
You can take help of YouTube tutorials along the way if you wish to do so.
Simple answer:
Freecodecamp, they have the BEST web development course for beginners and it's free.
You can take help of YouTube tutorials along the way if you wish to do so.
Now what?
Go code! It might be tough at the beginning but I am 100% sure you can do it!
Remember, coding is tough so are you!
Go code! It might be tough at the beginning but I am 100% sure you can do it!
Remember, coding is tough so are you!
