Codetuts

HTML | CSS | JavaScript | TypeScript | Angular | ReactJS | NodeJS

💨 Miles to Go before I Sleep 🏃‍♂️

#WebTuts #BringWorldTogetherWithCode

[Codetuts @thecodetuts]

Coding is a practical skill. The most effective way to learn it is through practice.

#DEVCommunity #100DaysOfCode #WebDev #CodeNewbies

[Codetuts @thecodetuts]

What are you using to style your #React components ?

1. Normal CSS Files
2. Styled Components
3. CSS Modules

#DEVCommunity #javascript #100DaysOfCode #CodeNewbies #reactjs

[Codetuts @thecodetuts]

Sass has two different syntax options to choose from :
📌SCSS - which has the same syntax as CSS but with the added features of SASS.

📌Sass (the original syntax), which uses indentation rather than curly braces and semicolons.

#DEVCommunity #100DaysOfCode #WebDev #CodeNewbie

[Codetuts @thecodetuts]

****** SASS********
SASS is a CSS extension language that adds features
📌variables
📌nesting
📌mixins
📌help write maintainable and DRY code.
#DEVCommunity #100DaysOfCode #WebDev #CodeNewbie #WomenWhoCode #MenWhoCode

[Codetuts @thecodetuts]

/* element is in focus */
selected:focus { }

/*element that is the first child of its parent */
selector:first-child {}

/*element that is the last child of its parent */
selector:last-child {}

#DEVCommunity #100DaysOfCode #css #WebDev #CodeNewbie

[Codetuts @thecodetuts]

pseudo classes : can be used to select an element only when it is in a particular state.

/*cursor hovers over an element*/
selector:hover { }
/*link has been visited*/
selector:visited { }
/*link hasn't been visited*/
selected:link { }
#100DaysOfCode #css #WebDev #CodeNewbie

[Codetuts @thecodetuts]

CSS Tips

** starts with a value **
[attr^='val'] {}

** ends with a value **
[attr$='ue'] { }

** contains a value in a space-separated list **
[otherAttr~='foo'] { }
[otherAttr~='bar'] { }

#DEVCommunity #100DaysOfCode #WebDev #CodeNewbie #WomenWhoCode #MenWhoCode

[Codetuts @thecodetuts]

After a break am back!!!

We will start from where we left.

Time for some code tuts 👨‍💻👩‍💻

[Codetuts @thecodetuts]

If you're a Web developer then say "Hello".

I will start, "Hello" 👋

Let's greet each other and embrace with love

#DEVCommunity #100DaysOfCode #javascript #WebDev #CodeNewbie #WomenWhoCode #MenWhoCode

[Codetuts @thecodetuts]

#Flexbox for you

[ThatTechBro (🛠,🚀) @404secnotfound]

@thecodetuts @newbie_codes I keep practicing any concept learnt in different dimensions, then wrote about them as an article to reinforce the learning.

[Codetuts @thecodetuts]

Are you a passionate developer?

If so please share your journey on how you build passion for coding?

This will help young developers

#100DaysOfCode #WomenWhoCode #DEVCommunity #CodeNewbie

[Codetuts @thecodetuts]

Anatomy of a CSS ruleset :

#CSS #webdev #100DaysOfCode #DEVCommunity

[Codetuts @thecodetuts]

Pseudo-class selector :
The specified element, but only when in the specified state. (For example, when a cursor hovers over a link.)

a:hover

selects <a>, but only when the mouse pointer is hovering over the link.

#CSS #webdev #100DaysOfCode #DEVCommunity

[Codetuts @thecodetuts]

Attribute selector :
The element(s) on the page with the specified attribute.

img[src] selects <img src="myimage.png"> but not <img>

#CSS #webdev #100DaysOfCode #DEVCommunity

[Codetuts @thecodetuts]

ID : Like classes, we can also use IDs to select HTML elements. The only difference between class and ID is that one ID can be assigned to only one HTML element.
<p id='text'>..</p>
#text {
color: green;
font-size: 16px;
}
#CSS #100DaysOfCode #DEVCommunity

[Codetuts @thecodetuts]

Class : In HTML, we can assign different classes to our elements. Each element can have multiple classes, and each class can also be applied to multiple elements as well.
<div class='container text-center'>
..
</div>

#CSS #webdev #100DaysOfCode #CodeNewbie #DEVCommunity

[Codetuts @thecodetuts]

Element : Select an HTML element is by simply using the name.

h1 {
font-size: 20px;
}
p {
color: green;
}
div {
margin: 10px;
}

#CSS #webdev #100DaysOfCode #CodeNewbie #DEVCommunity

[Codetuts @thecodetuts]

CSS Selectors :

1. Element
2. Class
3. ID

#CSS #webdev #100DaysOfCode #CodeNewbie #DEVCommunity

[Codetuts @thecodetuts]

External CSS : Include CSS is using an external stylesheet.

We create a stylesheet with a .css extension and include its link in the HTML document.

<head>
<link rel="stylesheet" href="style.css">
</head>

This recommended way.

#CSS #100DaysOfCode #CodeNewbie