Abhishek
Abhishek's Blog

Abhishek's Blog

Day 11 to 20 - Web Development with Resources

Abhishek's photo
Abhishek
·Mar 13, 2022·

3 min read

Day 11 to 20 - Web Development with Resources

Table of contents

  • Day 11 → Bootstrap
  • Day 12 - 13 → Tailwind CSS and npm
  • Day 14 - 15 → JavaScript basics
  • Day 16 → Arrays and Objects
  • Day 17 - 18 → Functions and Scope
  • Day 19 → Callback and High Order function
  • Day 20 → Important Array Methods

This blog is part of a series. Check it out here for next/previous days and resources.


Day 11 → Bootstrap

Learned Bootstrap which can help us in quickly designing and customizing our website. The best way to learn bootstrap is by going through its Documentation, but if you want a video tutorial then check out below tutorial by The Net Ninja. It covers good basics by creating a project.

Resources

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

Live website - abhishake21.com/bootstrap

Recently bought some stuff from decathlon.in so tried to create its website layout using bootstrap - abhishake21.com/decathlon


Day 12 - 13 → Tailwind CSS and npm

Learned about Tailwind CSS which is getting really popular. Instead of giving a button class like in Bootstrap, Tailwind gives you classes to customize your button by giving you predefined classes like m-0, font-bold, etc.
So instead of giving you a button, it defines individual classes you need to customize that button.

The best resource is its Documentation, but if you want video tutorials then The Net Ninja has covered good basics with a project.

Its installation can be confusing for some beginners so check out this video for clear understanding.

Resources

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

Live website - abhishake21.com/tailwindcss

Example portfolio website - abhishake21.com/tailwind-portfolio



Day 14 - 15 → JavaScript basics

Learned the basics of JavaScript including - variables, data types, if else, loops, prompt, alert, break, continue and switch statements. The best resource is MDN's JavaScript docs but again i like video tutorials so find them below.

Resources

wesbos.com/javascript

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

Live website - abhishake21.com/javascript


Day 16 → Arrays and Objects

Learned about JavaScript arrays and its various methods including shift, unshift, push, pop, slice, spread operator, array destructuring and looping in arrays using for of and for in loop. Learned about objects and also the difference between Primitive and Reference data-types.

In Objects learned about the dot and bracket notation, the difference between them and when to use which, object destructuring, computed property, objects in arrays, etc and also looping through objects.


Also learned the difference between var, letand const.


Day 17 - 18 → Functions and Scope

Learned about JavaScript functions which allow the code to be called many times without repetition. Also learned about function expression and arrow functions which are a very simple and concise syntax for creating functions.

Learned about Scope which basically means where you can access a variable or a function in our code but is much more than that. Check out below videos by Akshay Saini to learn more about it.

Resources


Day 19 → Callback and High Order function

Learned about callback function which is a function passed into another function as an argument and a high-order function which is a regular function that takes one or more functions as arguments and/or returns a function as a value from it. Sounds confusing - check below blog for clear understanding.


Day 20 → Important Array Methods

Learned about some important array methods which include filter, map, reduce, forEach, sort, find, every, some, fill and splice.


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/previous 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