Day 5: Starting Part 2 of the course

Finished part 1 and did the end-of-part exercise.margin-collapsingbox-sizing: border-boxoverflow: scroll;autofloat: left I then completed the part 2 and its exercises.

Day 4: CSS Basics Finale

Today, I learned: linear-gradient, radial-gradient: To generate a gradient, you can visit CSS GRADIENT.Borders: border-style, border-radiusbox-shadow, text-shadow. Next, I worked on two of the CSS exercises.

Day 3: Pseudo-element selectors, selector specificity, inheritance and colors

Pseudo-element selectors are used to style a part of the element.For example:<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ</p> We can style the letter "A" using:p::first-letter { color: red;} Pseudo-element selector is used to style a part of an element and pseudo-class selector is used to style an element in a particular state. Other pseudo-elements selectors are:::selection -> It is used to …

Day 2: Pseudo-class selectors

In CSS, we have a few pseudo-classes. Now, how do the pseudo-classes work. <article> <p class="first">Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p></article>article .first { color: orange;}The above works the same as the below code: <article> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p></article>article :first-child { color: orange;}But it is a …

Day 1 – Relational selectors

Today I learned about The zen coding way of writing HTML elements with id and class selectors.I think it is not good enough if we are aiming to get a complex HTML structure using one line. For example: div#header>img.logo+ul#nav>li*4>a I mean it's okay to use but it is error-prone IMO. We can select elements using …

React day 5: Components

Reacts uses "Declarative approach" to build components. It means instead of giving the DOM instructions on what to add and where to add; we just declare the end state, and React will take care of its DOM implementation. A component in React is just a JavaScript function. Its speciality is that it returns JSX code; …

React day 4: revising

Today I revised the basics of Components in React I did yesterday.Then I learned how to set inline styles to a JSX element and how to give styles using the style object.Later, I learned how to render classes dynamically. One thing we must keep in mind is to keep the render() method clean, and all …

React day 3: Components

Components name use camel case and .jsx as the extension. Then I learned a bit about states. I didn't do much though. Will continue tomorrow.

React day 2: ES refresher

Today, I learned the following: Variables declared with the var keyword are scoped to the function in which they are defined. Whereas, the variables declared with the let/const keyword are scoped to the block in which they are defined. The only difference between let and const is that the variables defined with the const keyword …

React day 1: Getting Started

To get started, first of all we need the latest version of node.js, because we are going to use the npm package to start our server. I used nvm to install the latest version node-v14.16.0 using the following commands.I used the command `nvm ls-remote` to check the available versions of node. Then I looked for …