Some of my handmade JavaScript notes and cheat sheets that can help you 🧵👇

1. JavaScript Function Anatomy

2. JavaScript Arrow Function

3. JavaScript Array Methods

4. JavaScript Date Methods

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 }

I this should be enough to explain you why CSS is so important. So lets start

You can gain some decent amount of CSS knowledge in 30 days. And after that you will definitely able to create some good looking website. Let's see how 👇🏻

{ 04 / 17 }

First things first, you need to learn basic stuff

- How to link your CSS files with HTML file
- How to select elements so that you can add styling

{ 05 / 17 }

The HTML Roadmap 🛣️

1. Understanding the full form of HTML
2. Anatomy of tags
3. HTML5 boilerplate
4. Heading and paragraph tags
5. ul, ol, li, tags
6. img, span tag
7. Table tags for layout
8. Form tags
9. Understanding of semantic elements
10. Basic attributes

10 HTML and CSS tips that you need to know😉

🧵👇🏻

1️⃣ Customize the text selection

- The ::selection pseudo-element matches the portion of an element that is selected by a user.

2️⃣ Range Input

- You can change the styling of input type="range"

3️⃣ Custom Scrollbar

- Customize the scrollbar of your website in few minutes

4️⃣ Scrollable element

- If you have some fixed size element then use overflow: auto. It will convert your element into scrollable element

If you're learning or planning to learn Web Development in 2021 then this thread is for you

🧵👇🏻

WHERE TO START? Front-end or Backend?

- Well this may be a debatable question but I would suggest you to start with front-end development

- It depends entirely on the individual but in my opinion, starting with front-end development has its advantages.

{ 2 / 16 }

WHY TO START WITH FRONT-END DEVELOPMENT?

- More visual content gives you an aesthetic vibe

- You can share your creations

- Easier to get feedback as you can show your webpages to any non technical person as well

{ 3 / 16 }

FUNDAMENTALS ARE IMPORTANT

- Don't rush! Spend some time on HTML, CSS and JavaScript. You can do pretty amazing things using these three languages

{ 4 / 16 }

- Make sure to learn and build some web pages using HTML and CSS before jumping onto JavaScript

- JavaScript is the backbone of web development, Don't rush to start with React/Angular/vue or any other front-end framework or library

{ 5 / 16 }

Let's create Phineas using CSS in few simple steps😄

THREAD🧵

STEP 1. Create a head

create a triangle and rotate it so that it looks like a head

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

STEP 3. Create eyes

This is the most trickiest part because in order to make an eye we have to create

- One bigger white circle
- then a small black pupil inside white circle
- then a small white reflection in black pupil

Let's create a outer white circle first

STEP 3(I). Create a black pupil

We can create pupil using pseudo element

A complete beginner's guide to CSS Grid layout 👇🏻

Thread🧵

Grid is used for making complex web design layouts more easily as it's not so hard to master

Using Flex you can make only 1D layout but Grid gives you full power of creating 2D layout

Let's start

{ 2 / 21 }

First things first, start with giving the display property "grid" to the container element or parent element

{ 3 / 21 }

Nothing will change after adding display: flex; in the parent container becuase we need to define the width of columns. In order to set that columns width we have gird-template-columns property

{ 4 / 21 }

Let's start with defining the width of our columns.

For example, let's say I need two columns of width 60% and 40% respectively

grid-template-columns: 60% 40%;

{ 5 / 21 }

Neumorphism is a trendy UI style nowadays. So let's create a neumorphic form using few simple steps

THREAD🧵

Neumorphic design is another UI design that has become popular these days.

Making neumorphic effect is actually pretty easy using only just CSS box-shadow

We'll be creating a neumorphic form in steps👇🏼

2.

STEP 1:

Place a light source(virtually) on screen. In this example I'm considering that my light source is placed top left corner of the screen

3.

STEP 2:

Create a container div and set background color slightly darker than white. I picked #ecf0f3

* Make sure that the color of body and container should be same

CONTINUE...

4.

As we placed our light source on top-left corner, make sure left and top border of container should be brighter than right and bottom border.

This will make the element looks like it has the light source illuminating from the top left corner of the screen.

5.

Roadmap to learn CSS 🎨🛣️

➳ Color
➳ Background
➳ Box model
➳ Height and width
➳ Margin and padding
➳ Border
➳ Positioning
➳ display
➳ Layouts
➳ Grid and Flex
➳ Alignment
➳ Fonts
➳ Animation
➳ Pseudo-classes
➳ Media query

Positioning in CSS allows you to display your element wherever you want on the screen

But when I was learning it, I found it little bit confusing😅

So in this thread I'll try to explain it in easiest manner with practical implementation. Let's start

THREAD🧵👇

There are 5 values that you can pass in position property

- static
- relative
- absolute
- fixed
- sticky

In this thread we will be focusing on relative and absolute positioning as both are widely used

Let's start with understanding what document flow is?

📌 Elements are displayed on the screen as they written in the HTML document

Consider the following piece of code:

H1, P, H3 and div are displayed on the screen in exact order as they written in the HTML file.

As now you know about document flow, let's start with Relative positioning

📌 Relative Position

- Relative positioning do not take an element out of document flow
- Relative positioning is relative to element's original position which can be changed using offset

🔹 Relative position is relative to itself.

For example: Consider the code and output in the attached image below

As you can see red box is shifted 100px from left because I applied left offset after giving it relative positioning