BC WEBDEV

Pratham
@Prathkum 5 years, 3 months ago 1766 views

Save to PDF Share See On Twitter

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

5. JavaScript Array Methods

6. Event Loop

7. JavaScript DOM Methods

8. DOM addEventListerner Method

More from Pratham

$Pratham \U0001f468\u200d\U0001f4bb\U0001f680$

Pratham 👨‍💻🚀...
@Prathkum

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 }

Pratham
@Prathkum

5 great code snippet websites for every web developer and designer

🧵👇🏻

1️⃣ 30 Seconds of Code

- Short code snippets for all your development needs

🔗 https://t.co/91L4bAxkgF

2️⃣ Free Frontend

- Free hand-picked HTML, CSS and JavaScript (jQuery, React, Vue) code examples, tutorials and articles

🔗 https://t.co/2sIAm73EdZ

3️⃣ Little Snippets

- A free collection of HTML and CSS code snippets

🔗 https://t.co/qxAyA2wA6U

4️⃣ CSS Deck

- Collection of Awesome CSS and JS Creations to help out frontend developers and designers.

🔗 https://t.co/LcZYnipvCy

$Pratham \U0001f468\u200d\U0001f4bb\U0001f680$

Pratham 👨‍💻🚀...
@Prathkum

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

Pratham
@Prathkum

7 GitHub repositories will make you a standout developer from 99% of people:

1. Memphis

An open-source real-time data processing platform.

• Message broker
• Schema Management
• Zero ops
• Cloud-native
• Rapid development
• Significantly lower development time

🔗 https://t.co/w5L2aCM3do

2. The art of command line

Master the command line, in one page.

🔗 https://t.co/uF2RlcUIxb

3. Public APIs

A collective list of free APIs for use in software and web development

🔗 https://t.co/vDRQKBf15V

4. Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.

🔗 https://t.co/bIGEEPcMkJ

Pratham
@Prathkum

JavaScript is powerful.

But sometimes, you can do great things using CSS.

A long thread of CSS tips and tricks:

1. Smooth

CSS Tip\U0001f4a1

Enable smooth scrolling for the whole page\U0001f447 pic.twitter.com/E7QERt6V3Y
— Pratham (@Prathkum) February 11, 2021

2. Change marker styling

3. Add styling to video

CSS Pro Tip \U0001f3a8

You can style the subtitles of video on your website using ::cue pseudo-element pic.twitter.com/fV56PmxkX7
— Pratham (@Prathkum) April 11, 2021

4. Change input caret

CSS tip\U0001f3a8

You can change the input caret color using CSS\U0001f447

\u27b8 The\xa0caret\xa0is typically a thin vertical line that flashes to help the text area more noticeable pic.twitter.com/VA0paD7d2a
— Pratham (@Prathkum) February 23, 2021