Training day 11 - HTML and CSS [Part 3]

Heloo people!! I worked on putting together a few components, commencing the end of the Part 3 of the series. Here’s the latest commit. Here’s the I will start the next part JavaScript Basic to Beginners tomorrow. I will complete putting together the above components later on since I am already behind on the JavaScript work. I am seriously aiming on complete the whole part...

Training day 10 - HTML and CSS [Part 3]

Heloo people!! I worked on rest of the components. Only 4 of them are pending, which I will work on tomorrow. Since I haven’t assembled the components, there’s no visible output to show but here’s the link to the code. Here’s the latest commit. Tomorrow I will show the final output. I am aiming to write blog everyday. Even on days I don’t code. The...

Training day 9 - HTML and CSS [Part 3]

Heloo people!! I have been working on the part 3. Here we learn about the best practices of creating a website while doing the hands on work. Extensions installed on VS code HTML CSS Support - helps to complete class and id attributes. CSS Peek - helps to peek into the particular class/id CSS properties we defined in our CSS file. Prettier - helps to...

Training day 8 - HTML and CSS [Part 2]

Heloo people!! I was on the second part. I revised fonts, images, animation and forms Here are the notes: Fonts: Serif, San-serif, Monospace width: 50ch; Clipping: We can clip an image to take the form of any shape. Just search on google “Clip an image”. Upload the image and it will give you the clip path of the shape you select. Pseudo class selectors: :hover...

Training day 7 - HTML and CSS [Part 2]

Heloo people!! I was on the second part. I revised layouts and media queries. Here are the notes: relative: relative to the element’s original position absolute: relative to the parent fixed: relative to the viewport Flexbox Justify-content: along the main axis Align-items: along the cross axis Align-content: Grid-template-rows: repeat(3, 100px) Grid-template-columns: repeat(2, 100px) Here’s the deployed version of the exercise I did. In the exercise,...