Week 1 of Web Dev Journey

Introduction:

After a long procrastination finally got the motivation to start the long-awaited Web development journey. Usually, I do not have problems with consistency yet if you have someone or some people alongside you, that surely does motivate you to continue learning.

That is why some friends of mine and I have started building a new community and we have named it TreeBits.io. The community thing is a story for another time let's hop into the things I have learned this week......
Table of Contents in a Glance:

HTML:	CSS:
- Heading tags	- Selectors
- Anchor tags	- Background Property
- Ordered List & Unordered Lists	- Border Property
- Image tag	- Units
- Table tags	- Margin, Padding
- Video Tag	- FlexBox
- Header, Footer, Main, Div tag	- Import Fonts, Icons

HTML:

Let's just quickly wrap up this HTML section as I don't want to explain every little bit and waste time.

1. First I learned about boilerplate code -> The must-have code for an HTML page. Has <html>, <head>, <meta>, <body> tags.

2. Learned the 6 Heading Tags -> For different size headings.

3. Anchor tag -> Defines a hyperlink.

4. List tags -> <ol> for Ordered list, <ul> for Unordered list, <li> for list items.

5. Image Tag -> for including an image in html document.

6. Table tags -> <table>, <tr> for table row, <th> for table heading, <td> for table data.

7. Video Tag -> To include a video

Using these concepts we made a simple pure HTML project:-

Most of the members of our Community seemed to fly through this assignment.

After this, we took another assignment which covered the rest of the topics in the table of contents.

Assignment 2:

This is the raw image that I gave to the community members to do. It was a bit hard for the beginners(including me), but we did it with some googling and perseverance.

What we learned 👇🏼
- HTML:
  1. Header -> The <header> element represents a container for introductory content or a set of navigation links.
  2. Footer -> The <footer> tag defines a footer for a document or section.
  3. Main -> The <main> tag specifies the main content of a document.
  4. Div -> The <div> tag defines a division or a section in an HTML Document.
- CSS:
  1. Boilerplate code ->
```
 // * is the universal selector in css
 *{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }
```
  2. Units -> px, vh, vw etc.
  3. Margin, Padding -> Property for setting the margin padding of the element.
  4. Import Fonts ->
```
 @import url('url of the font');
```
  5. Import Icons -> This part of the code goes in the head section of the HTML file.
```
 <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
```
  6. FlexBox -> Found this awesome cheat sheet 👇🏼

Conclusion:

At last, we took a pretty simple yet good assignment to code.

Using all the knowledge above we made a profile card for ourselves. It turned out pretty good to be honest.

Week 1 of Web Dev - My learning's

Introduction:

Table of Contents in a Glance:

HTML:

Assignment 2:

Conclusion:

Comments (2)

Command Palette

Introduction:

Table of Contents in a Glance:

HTML:

Assignment 2:

Conclusion:

Comments (2)