Everything I learn in 1 year of Web Development?
By: Arun Teltia
Tags: Web Development, React, JavaScript, Front End Development, Typescript

This is the most essential skill to master for a web developer because because more than 40% of website traffic came from the mobile users, for making a website responsive media queries came into picture which in layman terms an if else condition i.e. if the width or height of the window is of certain pixel we can load different CSS and make the page responsive.

Here are the awesome resources for learning about responsiveness

1. CSS Media Queries & Using Available Space | CSS-Tricks (css-tricks.com)

Many of the programmers don’t learn about media queries , because it is relatively time consuming and due to this they seek the help of the 3rd party like bootstrap or material UI, Using these libraries are not bad as it saves a lot of time but you should also know about how to make a webpage responsive by yourself.

Bootstrap and other 3rd party styling Library

There are 100s of free to use library that are really easy to use in the website just add a script tag to the html page and done, These libraries are the best way to save time while creating everything from scratch require a lot of time.

How to use the bootstrap like a pro: Bootstrap Beginner Crash Course

The Main Question is should I use it ?

I don’t like using 3rd party libraries because I think this gives me a sense of handicap when I want to make something creative but I know many developers who like to use bootstrap and using bootstrap is a skill in itself which is required by some of the employers so I guess Its good to know about the bootstrap and how it works.

About other libraries, I would say it depends, you can create some small project to learn new libraries as it will give a sense of confidence on how much you can use the resources to build new stuff.

Advance Animation

Animations

Animation is the most fascinating thing to watch the way to present a website is the skill that needs a eye for design but presenting a website in a way to attract user is a a work for a Product manager, As a developer your job is to implement those ridiculous demands and implement it at ease.

I have categorized the animation into two parts

1. Animation on particular Objects: The Article that I attached is the best place to learn about animation. I want to talk a little about the Keyframes and transition in particular .CSS transitions allows you to change property values smoothly, over a given duration. Keyframes gives more control over the intermediate steps of the animation sequence than transitions. Keyframes is more powerful as we can create our own animation as we want i.e. Keyframes can be defined as a group of transition.

2. The entrance and exit animation : These animation are done on the pre-existing object present on the website and these animation will get triggered when certain events are called like scrolling or while page loads. The Tool that I use for creating such animation is GSAP. GSAP is a tool used to create a timeline on the webpage which means we can create any type of animation and set a time period to it. You can use Keyframes as well to create these animation but I like to think that GSAP is relatively easy to use.

JavaScript

For this article I have created a list of topics that you

Disclaimer: If you are a Beginner you don’t need to study all these concept, you must focus on building new projects for the time being because eventually you may forget these in future. You just need to know these things exist for future.

1. Primitives

2. Call stack

3. Value Types and Reference Types

4. Scope

5. var vs let vs const

6. Modules and Namespaces

7. DOM and How Browser renders a web page

8. this, call, apply and bind

9. Prototype inheritance and Prototype Chain

10. Classes, New Keyword, Constructor

11. Object. Create an Object. assign

12. map, reduce, filter

13. Map and Set

14. Weak Map and Weak Set’s

15. Pure Functions

16. Closures

17. High Order functions

18. Promises and async/await

19. Inheritance, Polymorphism and Code Reuse

20. setTimeout ,setInterval

21. Iterators and Generators

22. Message Queue and Event Loop

23. Hoisting

24. Currying

25. Debouncing

26. async vs defer Loading Strategies

27. Event Bubbling & Capturing

28. Throttling

29. Debouncing vs Throttling

31. Local Storage and Session Storage

32. CORS

33. Web Storage APIs

35. Web Sockets

36. Destructuring

37. Functional Programming

38. OOP

39. JavaScript Design Patterns

These are some of the JavaScript specific topics that I think a JS dev should know, If you think something is missing in this list please comment, I will update the list

DOM Manipulation

When writing web pages and apps, one of the most common things you’ll want to do is manipulate the document structure in some way. In simple words one can change the style in the HTML by triggering some events with the help of JavaScript.

DOM Manipulation is the heart for making an interactive website, You are triggering events even if you move your mouse, press a key or hover on some element. Events are actions or occurrences that happen in the system you are programming, which the system tells you about so you can respond to them in some way if desired. For example, if the user selects a button on a webpage, you might want to respond to that action by displaying an information box.

Everything on the website has a meaning to it which UI designer want to showcase.

Here are some of the articles to understand DOM Manipulation from scratch

1. Understanding Dom with examples : This article have a lot of examples and method you don’t need to know all, I personally don’t know all of them but this article will give you a sense of understanding on what to learn in DOM manipulation

2. Dom Manipulation — YouTube : Implementing is the best way to learn, This playlist consist of 4 videos on DOM manipulation by Brad Traversy, This is enough you need to know to get started with the frontend project and getting yourself an internship in frontend.

While Reading Articles and watching videos helps you find new methods and new techniques to approach a problem, the implementation of the new acquired skill is really important,

A Collection of application ideas which can be used to improve your coding skills. : This is a GitHub repo with a lot of app ideas which you can implement by some DOM manipulation and will be good for side projects and learning Dom manipulation in depth

Should I use jQuery for Dom manipulation?

If you have started building projects and start searching stack overflow for how to do things, You must have seen jQuery in the answers, This is because a long time ago Dom manipulation was not possible like today, So back in day people use jQuery for DOM manipulation because it was really easy to use it but nowadays jQuery is not being used by the projects and many of the projects are moving forward with refactoring all the codebase and removing jQuery from it, The reason is because jQuery is a heavy library and it takes a bunch of time to get loaded and you can do everything with vanilla JavaScript instead of jQuery

There is a website “You Might Not Need jQuery” which have given all the used case of jQuery and basically wrote every syntax in vanilla JavaScript. So Instead of learning jQuery It is good to know how to convert a jQuery syntax to vanilla JavaScript

Version Control — GIT 101

I want you to consider a situation, You are a web developer and are developing a website for a employer and you tell create a website. Now the employer ask you to change some things, you made those changes.

Now After watching that design your employer wants you to revert those changes. What will you do? Reverting manually takes time you know :(

Lets take one more case you create a website and you think of adding new features to the website but when you are adding the features you somehow crashed the whole website. How will you get back to that place where everything was working fine?

That’s where the version control come into picture, I want you to watch this video Git & GitHub Crash Course For Beginners This will make you somewhat familiar with git. Now you know what git is Its time to know about GitHub.

GitHub is a code hosting platform for version control and collaboration. As a developer you have to work with many developers for developing a product.

How can you work with other developer on the same product. Don’t you think if he change some code it must be visible in your code as well because you are working on the same product but how can you manage it. If you write a line of code for a feature how will you make ensure everyone in the team knows about it? That’s where GitHub come into picture. There are some ways you can collaborate with other developers. Here is an article on how you can collaborate with other developers Using Git and GitHub for Team Collaboration.

Networking

Ever wondered how your web page get loaded when you search for something. As a web developer you need to know about basic networking.

Here is a perfect article to get you started with the networking Developers Need to Learn Basic Network Engineering

When you type some address in the search-bar, There is a call that been send to the server where the website is being hosted and that server send all the files that are needed to load the website

When you are streaming a video you are sending a request to the server that send you the video packets and that is how your video in YouTube gets loaded.

The connection that your device and YouTube build is a TCP connection.

TCP connection is being established when you cant afford to lose data-packets, when you are watching a video you cant afford to lose a a video data otherwise you would not be able to watch the whole video.

Lets take it in this way, When you video call someone and you have a poor connection do you need the packets that is 5 second old and somehow not able to reach to your location, While playing game sometimes the game buffers due to poor connection do you need to find out what happen in the during that period? The answer is no. This connection that I talked about is UDP connection.

Ever wondered How does BitTorrent work?, This is the good time to know about it.

There are a lot more regarding the networking and we will cover that in the backend section.

How to fetch data from API

An API is a set of programming code that enables data transmission between one software product and another. It means that there exist a lot of data in the internet like about weather or data about food but how can you access all the data into your website and spread that data in your webpage? That’s where the fetch api comes into picture. You can fetch the data via creating a promise that will respond you back with a response and that response can be used to spread across the website. Here is an article to get you started with fetch API

How To Use the JavaScript Fetch API to Get Data and a youtube video Fetch API Introduction to get you familier with the fetch API

React

The reason React was created is because it’s easy to get lost in a bit of maze of DOM searches and updates with plain JavaScript. The javascript started become complex with dom manipulation. Also, the way that React forces you to create components changes the way you approach software development. It helps you create your web applications in a more maintainable way.

So for complex apps, a library like React is definitely worth the extra learning curve at the start. It means you can write more maintainable apps with fewer bugs. And once you take the time to learn it, writing React is faster and more fun as well!

Here are the resources that are best for beginners to get started with react:

ReactJS Tutorial Introduction: This tutorial is a best for beginners and free as well, If you can afford some paid course from Udemy Then that will be a great way to start learning react, There are very talented Instructor Like Brad Traversy, Stephen Grider, Maximilian Schwarzmüller and many more :D

Here are some articles

1. A Complete Beginner’s Guide to React

2.The React Cheatsheet for 2020 📄‬ (+ real-world examples) : This is a cheatsheet to revise all your react concept and when you get stuck with the syntax of react

Redux

If you have learnt about react you must know that there are different states that need to be managed.

These are the best article to learn what redux is A cartoon intro to Redux | by Lin Clark | , Editing An Unforgettable Way to Learn Redux

You Might Not Need Redux. People often choose Redux before they need it. You must know what’s the problem you are in before getting started with exploring new libraries. If react works fine for you there is no need for adding redux to it