Day 1 - 100daysofcode
Tags: 100daysofcode, javascript, webdev, react
Published: 2021-04-15 20:43:47

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 :smile:

As promised on Day 1 we were to begin with [MDN's Front end Web dev guide](https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer#getting_started)
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](https://developer.mozilla.org/en-US/docs/Learn/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" :smirk: I didn't know if it made me laugh or cry. :sweat_smile: 

1. [Installing Basic Software](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/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. :smile:

 - 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?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/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](https://www.freecodecamp.org/news/vscode-live-server-auto-refresh-browser/)
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.](https://www.youtube.com/watch?v=7_LPdttKXPc)
And this [Article on setting project goals](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Thinking_before_coding) literally walks you through the mindset and the thought process one should have while building one's website.
It has this real lit :fire: 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.



2. [What will your website look like?](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
I loved the smallest and benign of details covered in here.

3. [Dealing with files](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/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` :smile:

4. [HTML basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/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](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics)_

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/howt034ca2kox6cs8s1l.jpg)
_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] (https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures)
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 :smirk:

> 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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5zcm6de73w3891nmxxn.PNG)

## 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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ni2zj5h2fdgqfyg7q68s.jpeg)