**I have provided multiple resources for a few topics, but just pick one and start.
All resources also present on my GitHub repo.
Day 1 → git and Github
I know a little of bit coding cause i was into hacking for a while and started doing bug bounty for about a year, so i know the basics of HTML and Python.
If you wanna know about vulnerabilities/bugs that i found on some websites then check it out here.
Since i know a little bit of HTML, I am still gonna start it over but today i am learning about git and Github.
The best resource i found is Kunal Kushwaha's YouTube video.
Day 2 - 3 → HTML
Learned about HTML and its -
- Basic syntax
- Hyperlinks
- Images, Audio and Video
- Lists
- Buttons
- Forms etc.
Resources
My Code - github.com/abhishekY495/Web-Development-Res..
Live website - abhishekY495-html.netlify.app - hosted on Netlify
Check below video on how to host your websites on Netlify.
Day 4 - 5 → Basic CSS and units
Learned CSS and how to manipulate text and different types of units which can be helpful when creating responsive sites.
Resources
- CSS Tutorial - Zero to Hero (Complete Course) - freeCodeCamp
CSS Units - Web Dev Simplified
My Code - github.com/abhishekY495/Web-Development-Res..
Live website - abhishekY495-css.netlify.app
Day 6 - 7 → Flexbox and Grid [made unsplash clone]
Learned about Flexbox and Grid which are really useful to arrange items on a webpage and then tried to create unsplash like layout of images using grid. You can check out my unsplash site below but it doesn't have infinite scroll, just random images that will appear if you refresh the page.
Resources
- Flexbox
- CSS Grid
Unsplash site - abhishekY495-unsplash-clone.netlify.app
Day 8 - 9 → Positions, animations and transitions
Position as the name suggests is used to position an element on your webpage. The best explanation of CSS positions - Web Dev Simplified
Animations and Transitions bring your website to life.
Resources
- Learn CSS Animation In 15 Minutes - Web Dev Simplified
- CSS3 Animation & Transitions Crash Course - Traversy Media
- Animating with CSS Transitions - Kevin Powell
- CSS animation by css-tricks.com
- CSS transition - css-tricks.com
Day 10 → Media queries and Sass
Media queries is important if you want to adapt your website to multiple devices like mobile, tablet or desktop.
Resources
- Learn CSS Media Query In 7 Minutes - Web dev Simplified
- CSS Media Queries Tutorial for Responsive Design - Adrian Twarog
Sass allows us to create variables, use imports and partials to separate our css code into smaller chunks, we can use mixins to create small functions that allow us to reuse css code, nesting allows us to write children elements directly inside the parent element and much more.
My Code - github.com/abhishekY495/Web-Development-Res..
Live website - abhishekY495-sass.netlify.app
That's it, within 10 days you can complete HTML and CSS and then make a few websites on your own like i made one here and here, and then move on to learning a CSS framework or start JavaScript.
All above and future resources can be found at the below github repo.
This blog is part of a series. Check it out here for next days and resources.