Pratham Profile picture
21 Apr, 27 tweets, 6 min read
My handwritten Web Development notes โœ๏ธ

๐Ÿงต๐Ÿ‘‡
1. CSS selectors โ˜‘๏ธ Image
2. Some important CSS Pseudo classes ๐Ÿ”ฏ Image
3. Box model โ—ป๏ธโ–ซ๏ธโ–ช๏ธ๐Ÿ”ฒ๐Ÿ”ณ Image
4. Display property โž– Image
5. Justify-content and align-content explained โฌ…๏ธโฌ‡๏ธ Image
6. Align-items and align-self explained ๐Ÿ“Š Image
7. Axes of a layout container โฌ†๏ธโžก๏ธ Image
8. z-index - stacking order of elements ๐Ÿ—๏ธ Image
9. Give your element a 3D look wit1h CSS perspective property ๐Ÿ‘€๐Ÿ•ถ๏ธ Image
10. Alignment in CSS ๐Ÿ—„๏ธ Image
11. Quick start guide to Grid layout ๐Ÿงฎ Image
12. Position property CSS โน๏ธ Image
13. Grid cheat sheet ๐Ÿ“ƒ Image
14. Flexbox cheat sheet ๐Ÿ“„ Image
15. animation-timing-function ๐Ÿ“‰๐Ÿ“ˆ Image
16. Don't use "solid" border always ๐Ÿ–ผ๏ธ Image
17. Git workflow ๐ŸŒŠ๐Ÿ“ฒ Image
18. JavaScript Array methods cheat sheet โ“‚๏ธ Image
19. JavaScript Date methods ๐Ÿ“…๐Ÿ—“๏ธ Image
20. What is a functions ๐Ÿงฉ Image
21. Arrow functions โžก๏ธ Image
22. Document Object Model ๐ŸŒณ Image
23. addEventListener method ๐ŸŽค Image
24. Font shorthand property ๐Ÿ”  Image
25. justify-items | align-items | justify-content | align-content ๐ŸŸฅ๐ŸŸฆโ—ป๏ธโ–ช๏ธ Image
26. Array methods [โ—ฝโ—พโ—ฝโ—พ] Image

โ€ข โ€ข โ€ข

Missing some Tweet in this thread? You can try to force a refresh
ใ€€

Keep Current with Pratham

Pratham Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Prathkum

17 May
5 great background websites for every web developer and designer

๐Ÿงต๐Ÿ‘‡ Image
1. Magic pattern

Beautiful pure CSS background patterns that you can actually use in your projects. They are highly customizable as well.

๐Ÿ–‡๏ธ magicpattern.design/tools/css-backโ€ฆ Image
2. Cool backgrounds

Collection of cool backgrounds that you can add to blogs, websites, or as desktop and phone wallpapers

๐Ÿ–‡๏ธ coolbackgrounds.io Image
Read 6 tweets
17 May
Have you heard the term "Tooltip" in web development?

Tooltips guide your visitors to take action and hence provides extra layer of guidance without any difficulties and hence increase the user experience

Let's create a tooltip using HTML and CSS only ๐Ÿงต๐Ÿ‘‡๐Ÿป Image
We just need to create an element that we will be visible only when user moves the mouse pointer over an elment

STEP1: Let's start with the HTML structure <div class="content&qu...
STEP2: Popup text

- Add some width and padding
- Hide the popup element throughout and show it only on hover
- Place it above the element
- Add little transition for smooth rendering Image
Read 7 tweets
17 May
CSS art is a good way to enhance and improve your CSS knowledge.

Let's create Phineas using pure CSS in few simple steps ๐Ÿงต๐Ÿ‘‡๐Ÿป Image
STEP 1. Create a head

create a triangle and rotate it so that it looks like a head ImageImage
STEP 2. Create smile and ear

We have a pseudo elements in CSS, so we can create smile and ear using head::after and head::before. Its a good way to learn about pseudo-elements ImageImage
Read 11 tweets
16 May
Functions exists in CSS as well

CSS functions can represent more complex data types and can do special data processing and calculations. Let's talk about it in detail

๐Ÿงต๐Ÿ‘‡๐Ÿป
The syntax of CSS functions is same and standard like in other programming languages. Function name followed by the set of parenthesis and they can accept multiple argument.

{ 2 / 16 }
The functions in CSS is broadly divided into 8 categories. They are

1. Transform functions
2. Math functions
3. Filter functions
4. Color functions
5. Image functions
6. Counter functions
7. Font functions
8. Shape functions

{ 3 / 16 }
Read 16 tweets
15 May
You can check out these websites if you're learning HTML, CSS and JavaScript ๐Ÿงต...
HTML ๐Ÿงฑ

1. Learn HTML
learn-html.org

2. HTML best practice
hail2u.github.io/html-best-pracโ€ฆ

3. HTML reference
htmlreference.io
CSS ๐ŸŽจ

1. CSS reference
cssreference.io

2. Learn to code
learn.shayhowe.com

3. CSS layout
learnlayout.com

4. CSS tutorial
csstutorial.net

5. Learn about colors
hexinvaders.com

6. Learn gird layout
griddy.io
Read 4 tweets
15 May
Are you planning to learn CSS for adding some cool styling in your website?

In this thread, I'm covering all the basics and proper plan you need to know in order to getting started with CSS.

๐Ÿงต ๐Ÿ‘‡๐Ÿป
We need to know the importance of CSS first. Why CSS?

Well I guess CSS is the only language that add some visuals in website. Without CSS, Without it, websites would still be plain text on white backgrounds.

{ 02 / 17 }
Let's compare a website with and without CSS

Image 1: With CSS
Image 2: Without CSS

{ 03 / 17 }
Read 17 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(