Ritika Agrawal

@RitikaAgrawal08

Simplifying CSS & JS with tutorial threads • Technical Writer • DM for collaboration

Indialinkfree.eddiehub.io/Ritika-Agrawal…Born February 17Joined March 2020

457 Following

7,086 Followers

Ritika Agrawal’s Tweets

Pinned Tweet

Ritika Agrawal

@RitikaAgrawal08

Jan 27

🚨 Ebook Launch 🚨 Thank you everyone for voting & helping me select a topic for my first Ebook!! Bringing to you " Simplifying CSS Box Model " Grab your copy for free👇

ritikaagrawal08.gumroad.com

Simplifying CSS Box Model

Placing all the web components properly in a web page is very important but at times you may notice that some components don't align properly or take up more space than you imagined.Key to understa...

Ritika Agrawal

@RitikaAgrawal08

Feb 1

Throwback to Fortune Generator I made sometime back!!👇 For more small JS projects, Visit → github.com/Ritika-Agrawal

✅ Correct Answer : <link> 🔸Thank you for reading!!🔸

Quote Tweet

Ritika Agrawal

@RitikaAgrawal08

Jan 29

Which HTML tag is used to add a favicon for a website

What do you think?

Show this poll

📎resources → • w3schools.com/html/html_favi • javatpoint.com/html-favicon ⬇️

javatpoint.com

HTML favicon - javatpoint

HTML favicon with html tutorial, tags, anchor, img, div, entity, textarea, marquee, p tag, heading tag, h1, h2, table, formatting, attribute, elements, ol, ul, Input Types, block element tag, inline...

⚡️Adding Favicon to Website ▪️Favicon is added via <link> tag. ▪️Just add the <link> tag below the <title> inside <head> with the path to the favicon. ⬇️

⚡️How to create a Favicon? ▪️Any image can work but it should be small & simple with high contrast. ▪️Normally preferred sizes are 16 x 16 and 32 x 32. ▪️You can also create & download a favicon using below sites → • favicon.cc • favicon.io/favicon-genera ⬇️

🔺Favicon is a small image that appears beside the website name. 🔺It is known by many names like tab icon, bookmark icon because it is displayed on a browser's tab, bookmark bar etc. 🔺Most famous & widely used format for favicon is .ico ⬇️

How to add a Favicon to a website❓ A Thread🧵⬇️

Which HTML tag is used to add a favicon for a website❓ What do you think?💭

<a>
16.5%
<meta>
27.3%
<link>
48.5%
<base>
7.7%

777 votesFinal results

Ritika Agrawal

@RitikaAgrawal08

Jan 26

Happy Republic Day to all my fellow Indians! ❤🇮🇳

Ritika Agrawal

@RitikaAgrawal08

Jan 18

Hey everyone!! I am planning to write my first Ebook but not really able to decide on a good topic. I have only 3 topics in mind. Which one should I write on? If you have any other CSS/HTML related topic, please mention in the comments!!

CSS Box Model
41.4%
CSS Variables
39.1%
HTML forms
19.5%

169 votesFinal results

Ritika Agrawal

@RitikaAgrawal08

Jan 16

✅Correct Answer : accept 🔸Thank you for reading!!🔸

Quote Tweet

Ritika Agrawal

@RitikaAgrawal08

Jan 14

Which HTML attribute is used to specify the type of files allowed for input file tag

What do you think?

Show this poll

Note : "type" attribute is used in <input> tags to mention the type of form element. It can take values like file, email, password, radio, checkbox etc. ⬇️

📎resources → • javatpoint.com/html-5-accept- • developer.mozilla.org/en-US/docs/Web ⬇️

⚡️Combining file types ▪️we can add different file types separated by commas. ⬇️

⚡️Mentioning specific file type ▪️remember to add dot (.) when mentioning file extensions ⬇️

⚡️Values ▪️ "accept" can take any one of the following values • file extension : like .gif , .jpg , .png etc. • audio/* : means user can select all sound files • video/* : user can select all video files • image/* : user can select any image file ⬇️

🔺It is an attribute used in <input> file tag. 🔺It is used to specify the type of files a user can select with the <input> file tag. ⬇️

What is HTML "accept" attribute❓ A Thread🧵⬇️

298

Which HTML attribute is used to specify the type of files allowed for input file tag❓ What do you think?💭

type
58.2%
accept
35.4%
multiple
4.3%
capture
2.1%

373 votesFinal results

Ritika Agrawal

@RitikaAgrawal08

Jan 14

🔸Thank you for reading!!🔸 Checkout the complete code & more toggle button designs here👇 📌toggle-button-generator.vercel.app 📌

github.com

GitHub - Ritika-Agrawal811/toggle-button-generator: A list of toggle buttons made with CSS

A list of toggle buttons made with CSS. Contribute to Ritika-Agrawal811/toggle-button-generator development by creating an account on GitHub.

▪️ "toggle-text" is shifted towards left ▪️ ::before of "toggle-text" is changed to "ON" along with its text color. ⬇️

5. Adding ":checked" pseudo class ▪️ with :checked class we can easily style elements when a checkbox is clicked by pairing them up with appropriate selectors. ▪️ I've increased width to 100% for ::before of checkbox input tag ⬇️

4. Styling "toggle-text" ▪️ pointer-events:none prevents <span> from obstructing the click event on checkbox input tag. ▪️ ::before of <span> is used to write "OFF" which changes to "ON" when toggle is clicked. ⬇️

3. Styling checkbox input tag ▪️ apperance:none removes default styling of checkbox. ▪️ ::before pseudo element is used to add that reddish brown background when toggle button is clicked ▪️ z-index is -1 for ::before so that it appears behind the text written in <span> ⬇️

2. Styling <label> tag ▪️ position:relative is used because checkbox tag and span are placed relative to this <label> tag. ▪️inline-block is used so that I can add width & height to <label> tag ⬇️

1. HTML Structure Inside a <label> tag, I've → • an input checkbox tag • a span tag for ON/OFF text ⬇️

🔸Let's make a Toggle Button in 5 Simple Steps with CSS🔸 A Thread🧵⬇️

223

My linkfree profile is ready!! Thank you

@eddiejaoude

for a quick merge and this amazing project!😍 Check it out👇

Give it a⭐️if you liked it!

github.com

GitHub - Ritika-Agrawal811/toggle-button-generator: A list of toggle buttons made with CSS

A list of toggle buttons made with CSS. Contribute to Ritika-Agrawal811/toggle-button-generator development by creating an account on GitHub.

🔸Project Alert : Toggle Button Generator🔸 I will be adding many more toggle button designs here. You can easily copy their code & use in your projects!! Feedbacks are welcome!!😊 Live link : toggle-button-generator.vercel.app (GitHub link👇)

220

New Article is Up!🔥 Give it a read and comment down your feedbacks!😊 "Diving deep into z-index property"

link.medium.com

Diving deep into z-index property

You may have come across various overlap effects in websites where for example we can have an image on top of another image with some…

Ritika Agrawal

@RitikaAgrawal08

Jan 6

🔸Thank you for reading!!🔸

@CodePen

codepen.io

Button Stripes Hover Effect

4. Styling <span> tag ▪️position: relative is used because z-index property doesn't work without position property. ▪️z-index is set as 2 which is higher than ::before so that this text appears on top of stripes pattern. ▪️on hover text color is changed to white ⬇️

3. Styling ::before ▪️left is set as 50% to start the transition from middle ▪️linear-gradient() is used to make stripes ▪️z-index is set to 1 so that this background appears below the text written inside <span> ▪️on hover, width is transitioned to 100% ⬇️

2. Styling <button> tag ▪️ A little shadow is applied with box-shadow property. ▪️position: relative is added to make ::before relative to it. ⬇️

1. HTML Structure ▪️ I've a simple <button> tag which has a <span> tag wrapped around its content. ⬇️

🔸Let's make a Button Stripes Hover Effect in 4 Simple Steps with CSS🔸 A Thread🧵⬇️

133

🔸Thank you for reading!!🔸

@CodePen

codepen.io

Password Validation Field

12. checkCount() & resetValues() ▪when a backspace is pressed, checkCount() is called to check for count variable values & accordingly remove the "checked" class from <li> ▪resetValues() resets the variables & styling of <li> tags. ⬇️

Show this thread