Day 1 - 100daysofcode

#100daysofcode #javascript #webdev #react

Here it is the Day 1, inception day. It is beautiful!

I will just blurt out my learnings and notes of this day, an improvement suggestion to whosoever might read it next. would most probably be just me 😄

As promised on Day 1 we were to begin with MDN's Front end Web dev guide
We took off to stick to the very basics to keep things enjoyable and as Gary Vee puts it "fall in love with the process".

Hence we started with Getting started with the web I was kind of feeling ashamed to even start it, I mean years spent browsing web and what not, and I was about to read "Getting started with the web" 😏 I didn't know if it made me laugh or cry. 😅

Installing Basic Software

This section listed very basic Webdev stuff, and I was pretty glad that it was made with a complete beginner mindset, its for a kid who just got a new laptop. And I am glad it is structured this way.

It lists down an amazing bunch of tools used by professionals now, with links for most of them. ( I hope new guys don't get overwhelmed by it) It's an exhaustive set, and to be honest many were new to my eyes as well. So if you are a newbie reading that list, its just there to scare the weaklings. 😄
The only tools one needs to get started are Text Editor, and a Web Browser. (I'd pick VS code and Google Chrome)
Interesting Tip by MDN peeps : " You usually don't need to worry about making your web projects compatible with it, as very few people still use it — certainly don't worry too much about it while you are learning. You might sometimes run into a project that requires support for it."
It's true unless you are working on a project where your end users are Librarians, or a government project one would most likely not care to support the Internet Explorer, but its a good thing to keep in mind which feature of the web has limited support and compatibility. Web is an evergrowing space one has to be mindful of many things.
How do you set up a local testing server?
I like the depth that they covered here tbh I would have simply recommended a VS code plugin like: VSCode live Server
but the real gold in this article were its pre-requisites
Found this video in there it was a good quality watch.How the internet Works in 5 minutes: A 5 minute video to understand the very basics of Internet by Aaron Titus.
And this Article on setting project goals literally walks you through the mindset and the thought process one should have while building one's website.
It has this real lit 🔥 line in it

How can a website help me reach my goals? By answering that, you'll find the best way to reach your goals and save yourself from wasted effort.

It's a basic thing many engineers and developers forget, what's the end goal, what and why are you building this website. And without that Why the how gets lost pretty quickly.

What will your website look like?
I loved the smallest and benign of details covered in here.
Dealing with files
This part clears out an early confusion that I had while starting with web dev, Where should I be keeping my files and how should I be structuring my project. Plus this artcile/section does a great job in just getting a newbie to familiarize itself with the foreign language HTML 😄
HTML basics
This section barely scratches the HTML and stands true to its name HTML basics and introduces us to the commonly used tags.

Next up for Day-2 from MDN's Frontend Guide: CSS Basics

The relief one gets after coming so far is phenomenal

After a theory run, it was time to get real with FCC's JS DS and Algo course
And since it started of with real basics and I was able to complete 25% of the Basics part of it I'll just mark a few notes for the future me, to remember.

It was quite a Fun fact to me

The remainder operator is sometimes incorrectly referred to as the modulus operator. It is very similar to modulus, but does not work properly with negative numbers.

Remember that everything to the right of the equals sign is evaluated first
I like how FCC peeps take a jab at PHP 😏

Unlike some other programming languages, single and double quotes work the same in JavaScript.

The backslash \ should not be confused with the forward-slash /. They do not do the same thing.
A good list of escape characters

Code    Output
\'  single quote
\"  double quote
\\  backslash
\n  newline
\r  carriage return (A reminiscent of typewriter days, is a control character or mechanism used to reset a device's position to the beginning of a line of text. its the CR in `CRLF`)
\t  tab
\b  word boundary (Word's beginning and end e.g *word* the astericks here represent the word boundary not sure when it'd be used though)
\f  form feed (Page Seprator, indicating next page)

Another fun fact "My name is " + mName + ". And I am awesome!" is "Mad Libs" style. I would have called it the Fill in the Blanks style. :laugh:

My Comments and conclusion:-

All in all, it was a good start but I almost derailed it by not starting on pre-decided time and by procrastinating on it till I almost ran out of time.

And for it I have a little Atomic Habit hack
" I will continue with the 100daysofcode challenge, at 2:00pm in the morning right after my lunch every day without fail" :fingers_crossed: