Abhishek
Abhishek's Blog

Abhishek's Blog

Day 1 to 10 - Web Development with Resources

Abhishek's photo
Abhishek
·Feb 15, 2022·

4 min read

Day 1 to 10 - Web Development with Resources

Table of contents

  • Day 1 → git and Github
  • Day 2 - 3 → HTML
  • Day 4 - 5 → Basic CSS and units
  • Day 6 - 7 → Flexbox and Grid [made unsplash clone]
  • Day 8 - 9 → Positions, animations and transitions
  • Day 10 → Media queries and Sass

**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/abhishake21/Web-Development-Reso..

Live website - abhishake21-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

My Code - github.com/abhishake21/Web-Development-Reso..

Live website - abhishake21-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

Unsplash site - abhishake21-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


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

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/abhishake21/Web-Development-Reso..

Live website - abhishake21-sass.netlify.app


Also bought a domain for my website/portfolio - abhishake21.com
It has nothing yet, but will add stuff soon.

You can buy domains from various websites like GoDaddy or Namecheap, but i chose Google Domains cause it has a really simple UI and doesn't offer any other services like hosting, VPN and other stuff which you do not need when you are just starting out.


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.

Did you find this article valuable?

Support Abhishek by becoming a sponsor. Any amount is appreciated!

Learn more about Hashnode Sponsors
 
Share this