MY WEB DEV. JOURNEY FROM SCRATCH (DAILY UPDATE; WEEK: 1) 
Published: 2021-01-01 08:11:19

Hi developers! I am Syed Mazhar Ali Raza pursuing BTech in Electronics and Communications from IP University, Delhi. I am very passionate about **coding**, but I am an absolute beginner. I have spent the last few months learning about various opportunities as a coder. After a lot of research, I chose web development to be my first big goal for 2021.

###__Motive to write this blog:__
I will keep a **daily update** of what I learned to get closer to my goal and try to be qualified enough to crack any contest, program, etc.
This challenge will make a better myself in the next few months.

***

##**DAY 1**:

Today I learned the basics of web development by watching roadmap to web dev' videos. Here is what I learned:
Full-stack web development consists of front end and back end development.
####**Front end development:**
 The part of a website that the user interacts with directly is termed as the front end. It is also referred to as the ‘client-side’ of the application. It includes everything that users experience directly: text colors and styles, images, graphs and tables, buttons, colors, and navigation menu. HTML, CSS, and JavaScript are the languages used for Front End development

**Front end Languages:** 
* HTML: Used to build skeleton or the body of the website
* CSS: Used for designing or styling the website. It makes it more presentable.
* JAVASCRIPT: Used to add logic to a website, acts as its brain.

Note: Learning all the above languages, 100% won't be ideal. So I will learn 80% HTML, 60% CSS, and 50% javascript. Then work on projects, and if at some instance a requirement of additional info of any language arises, then it will be learned alongside.

####**Back end development:**
Backend Dev' is the server-side of the website. It stores and arranges data and also makes sure everything on the client-side of the website works fine. It is the part of the website that you cannot see and interact with. 

**Back end *technologies*:**
there are numerous languages and software for backend development, such as python, PHP, CPP, etc... I will focus on:
* Node.JS: Node.js is an open-source runtime environment/platform for executing JavaScript code to write Server-Side scripts.
* MongoDB: MongoDB is a document database with the scalability and flexibility you want with the querying and indexing you need. The data objects are stored as separate documents inside a collection instead of storing them in a traditional relational database's columns and rows.

Firstly, I installed [VSCode] (https://code.visualstudio.com/) and grasped a few required basics of it. Also got wise to the fact that we can also use notepad for writing an HTML code, but using an [IDE] (https://www.codecademy.com/articles/what-is-an-ide) makes it more comfortable and user friendly and comes very handy as you start writing big programs.

##**DAY 2:** 

* Today, I  made the first move by creating an HTML file then understood the boilerplate code (standardised or the most basic template of HTML code), which consists of: 
* <!DOCTYPE html> declaration defines to the webpage that this document is an HTML5 document.

* <<SS>HTML> element is the root element of an HTML page
* <<SSS>head> element contains meta information about the HTML page
* <<SSS>title> element specifies a title for the HTML page (which is shown in the browser's title bar or the page's tab)
* <<SSS>body> element defines the document's body and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

* Added [comments](https://www.w3schools.com/html/html_comments.asp) in the code and understood the very basics of [**Meta tag**] (https://www.w3schools.com/tags/tag_meta.asp) (included in head tag). It provides information about the webpage and the data is used by the web browser and search engine for [SEO] (https://www.geeksforgeeks.org/search-engine-optimization-seo-basics/#:~:text=Search%20engine%20optimization%20(SEO)%20is,a%20website%20in%20search%20engines.&text=Promoting%20a%20site%20to%20increase,links%2C%20is%20another%20SEO%20tactic.) (increases web traffic on the website). Some types of metadata are description, keywords, author etc. 
* Understood basic tags like **strong(bold)**, *embedded(italics)*, division,  line break(moving on to the next line), horizontal rule, Heading, paragraph,span etc.
2. Learned how to [add links] (https://www.w3schools.com/html/html_links.asp) in HTML using anchor tag and its attribute *target="_blank"* to open the link in a new tab.
3. Studied tags for [inserting images] (https://www.w3schools.com/html/html_images.asp) in a webpage and an amazing website that provides copyright-free images(Also used its attributes like width and height, but styling is never recommended in HTML; it should be performed using CSS).

##**DAY 3:** 

* Inserted [lists(ordered and unordered)] (https://www.w3schools.com/html/html_lists.asp) and [tables] (https://www.w3schools.com/html/html_tables.asp) in HTML and types of bullets and numbering that can be used in a list.
* Used [Form] (https://www.w3schools.com/html/html_forms.asp) tag to create a form with various types of entries like text, email, date, number, checkbox, radio, submit, reset, textarea, etc.
* Used [Label] (https://www.w3schools.com/tags/tag_label.asp) tag and and also [select-option] (https://www.edureka.co/blog/select-and-option-tag-html/) tags to create a dropdown list. 
* Learned about block and inline elements:
**Block elements:** A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). Div, hr, p, etc. are some examples of block elements.
**Inline elements:** An inline element does not start on a new line, and it only takes up as much width as necessary. <<SSS>a>, <<SSS>span>, <<SSS>select>, etc., are some examples of inline elements.

* Gained an understanding of [**ids**] (https://www.geeksforgeeks.org/html-id-attributes/?ref=lbp) and [**classes**] (https://www.geeksforgeeks.org/html-class-attribute/?ref=lbp) how they are [different] (https://www.geeksforgeeks.org/difference-between-an-id-and-class-in-html/) from each other.   
* Learned about [HTML entities] (https://www.w3schools.com/html/html_entities.asp)(used to display reserved characters in HTML) and used a few of them to get the point of it.
* The last topic of the HTML course was [**Semantic Tags:**] (https://www.w3schools.com/html/html5_semantic_elements.asp)
A semantic tag clearly describes the meaning of specific elements to both the browser and the developer.
Example: Many web sites contain HTML code like: **div id="nav" div class="header" div id="footer"** to indicate navigation, header, and footer. Rather than defining each element, HTML has predefined tags that clearly defines its contect. Eg: <<SSS>footer>, <<SSS>header>, <<SSS>nav>, <<SSS>section>, <<SSS>summary>, etc. 

##**2-3 DAYS:** 

Got Caught in the deadly trap of procrastination, and doing college assignments. (Really embarrassing T_T).
Since college work is overwhelming these days, I decided to learn at least a little, but never take a break from it.

##**DAY 4:** 

Started off by taking a quick glance of all HTML files I made, and then jumped into **CSS tutorials**.
Learned how HTML has tags, CSS has **selectors**. Selectors are the names given to styles in internal and external style sheets. Firstly I will concentrate on **HTML selectors**, which are simply the names of HTML tags and are used to change the style of a specific type of element.

For each selector, there are **properties** inside curly brackets, which simply take the form of words such as color, font-weight or background-color.

A **value** is given to the property following a colon (NOT an “equals” sign). Semi-colons are used to **separate the properties**.
Then learned the [three ways to insert a styling sheet] (https://www.w3schools.com/css/css_howto.asp):

* **Inline**: An inline style may be used to apply a unique style for a single element.
* **Internal**: An internal style sheet may be used if one single HTML page has a unique style.
* **External**: With an external style sheet, you can change the look of an entire website by changing just one file! (.css file)

Then I learned basic [font] (https://www.w3schools.com/css/css_font.asp) tags in CSS and their use such as font-family, font-size, font-weight.
I further moved to different ways to add [colour] (https://www.w3schools.com/cssref/css_colors.asp) in CSS which are Hex. Colour code(ex. C35F453), RGB Colour code [ex. rgb(255, 0, 0)] and by name (ex. red, violet).

##**DAY 5:**

firstly, I went through CSS tags like [height, width] (https://www.w3schools.com/css/css_dimension.asp), [background] (https://www.w3schools.com/css/css_background.asp), [box model](https://www.w3schools.com/css/css_boxmodel.asp), [borders] (https://www.w3schools.com/css/css_border.asp), [margins](https://www.w3schools.com/css/css_margin.asp), [padding](https://www.w3schools.com/css/css_padding.asp), etc. 
Then I learned using Google developer's tool which was very fun and helpful. Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. DevTools can help you edit pages on-the-fly and diagnose problems quickly, which ultimately helps you build better websites, faster. By right-clicking on the webpage and choosing to **_inspect_** option, one can access the dev tools. I checked out different tabs such as inspect, sources, network, etc.

By far I have learned the most basics of HTML and CSS, so I made the online grocery store web page using all tags that I have learned. It took a lot of time(1-2 hrs) because I was constantly experiencing minor errors, but eventually, I was getting better at it. 
Making a project and using all tags learned by far is very helpful.

progress ongoing. Cannot blog because too much of work(took part in an open-source program, college exams, working on a project).

##**DAY 6:**