Mastering Front End Fundamentals in 100 Days

#javascript #beginners #webdev #frontend

In case you are looking to learn web development then there would never be a right time other than now. The demand for front-end is skyrocketing and there are thousands of jobs available. To learn web development, you need to groom your basic designing skills which is the HTML and CSS and later move on to other technologies such as Front-End libraries like React, Redux.

I took this 100 day challenge in the midst of September and progressed until the winter where I was done with most of the topics that lied in my KanBan board. Here is the sequential flow of how I executed the plan along with the projects that I finished on the sideline.

Day 1-7:
This is the easiest and also the part everyone is already aware of. Obviously, it is not 2004 and websites nowadays are extremely advanced with better user experience, analytics and market optimized. Though to brush up the basics, I made simple landing pages, forms, interlinked webpages, restaurant menu in order to be affluent in the initial level. The daily-life tasks such as admission forms, menu, static bio-data are useful example to kickoff your HTML hurdle.

Day 8-30:
CSS felt smooth at the start but its gets trickier like a maze as you move ahead but trust me, it is worth the effort. The text styling, formatting and alignment part is a piece of cake while Box Model was one of the most interesting topics for me and I enjoy using box model while designing a website. Positioning, Float and Alignment can also come handy in developing.

I was done with the above discussed part in 10 days and guess for what I took the looong span of twenty days. It was spent for CSS Flex and Grid Layout Model. Incase, you don't prefer Bootstrap during development then Flexbox can save you lot of time where you can the objects in your webpage according to your customized preference.

I also spent doing fun activities with keyframe that helped produce animation with the use of CSS. The animation is set up by the user for a specific or infinite time.

Day 30-60:
Ticking up HTML and CSS was a relief but it was the just the half time in the game as there was more to accomplish. I started with Javascript in late October and people say it a complicated language for a reason but the tough days define your good ones and that is a fact. Studying C++/Java at an earlier stage, Javascript felt to me a more lazy way of doing things until I was introduced with Python arghh.

I also devoted time doing algorithmic scripting in Javascript which enhanced my logical skills but ate my time. I studied ES6, Regex, Functional Programming and Object Oriented Programming and doing all this within a month, I feel like I hurried up studying Javascript but it was worth the time. Topics such as Async, Callback, this operator and Recursion can give nightmares and my case was no different.

Day 60-75:
Getting my hands dirty with Javascript for over a month, I felt confident about my track and start learning libraries like Bootstrap, Jquery and Saas. Bootstrap felt like a walk in the park after doing Javascript for a long time and I was able make changes to my already coded files with the use of bootstrap.

Surely all this libraries and are going to make your work more easier after you are done with the basics of web development. Working on DOM (document object model) is a big surplus to your skillset. This path was not as hectic as the previous one and I went to study the three libraries within two weeks.

However, I started working on PostgreSQL in this time window too and in was running concurrently as solidifying a database was important in order to integrate database for storage of information in database.

Day 75-100:
Learning Postgres was on and being done with basic libraries, I stepped foot in ReactJS and gave my time learning it. I was also amazed by concept of Virtual Reality so I got to know about A-Frames, which required JavaScript as a prerequisite.

React was slightly confusing initially but so cases occurred as I progressed learning it. As Web Development shifted into command line (NodeJS server) once I started with React, I felt as if it was going to take ages for me to excel in this. However, big picture was entirely different. The fact that I got an internship at the end of year made me more confident with all the application part of react and I realized why all these libraries are called a lifesaver.

I've also attached the repository link to all the projects that I finished during the tenure of hundred days. I hope you all enjoyed reading it.