BC WEBDEV

Pratham
@Prathkum 3 years, 9 months ago 555 views

Save to PDF Share See On Twitter

My 8 handmade sketch notes you won't want to miss (learn web development for free):

1. What is semantic HTML

2. CSS Positioning

3. CSS Box-model

4. JavaScript Array Methods

5. Git Workflow

6. Alignment in CSS

7. Grid Overview

8. Grid cheat sheet

Thanks for checking this out.

You can check out my other threads at @PrathKum. I generally write about web development. 😁

I have prepared a free doc for you so that you can access all notes in high quality.

🔗 https://t.co/51sWgcn2XG

More from Pratham

Pratham
@Prathkum

5 best color palette for every web developer and designer 🎨

🧵👇

1. Color hunt

- Color Hunt is a free and open platform for color inspiration with thousands of trendy hand- picked color palettes

🖇️ https://t.co/xR0FVTjK0L

2. Adobe color wheel

Explore and create accessible color palettes using color wheel, in variety of color variations and contrast levels. It will tell you automatically if two colors are not accessible

🖇️ https://t.co/ndsgBauTEc

3. Palette Ninja

Palette ninja is an online color scheme generator that allows you to create harmonious color schemes in seconds

🖇️ https://t.co/cuzP21tn2Z

4. My color space

Here you can find the perfect matching color scheme for your next project! Generate nice color palettes, color gradients and much more! Your space for everything that has to do with color

🖇️ https://t.co/kmjrXOceAj

$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 \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

If you start with the right course then the process becomes a little easier

I found some amazing YouTube videos and courses that will help you start your Web Development journey

🧵👇🏻

HTML and CSS

- A great way to arouse your web dev journey with Gary's (@designcoursecom) course on YouTube

🔗 https://t.co/xjm7nfV2L2

JavaScript

- Although it's impossible to learn JavaScript in 2 hours but JavaScript mastery is one the best YouTube chanel for JavaScript. This 2 hours long crash course will help you start your journey and gives you quick overview.

🔗 https://t.co/1zcSeu4zKE

Git and GitHub

Git is an essential tool. And after learning JavaScript, I think one should go for Git and GitHub. Check out this free great course on Udemy

🔗 https://t.co/E14cibOLXb

React

What you'll learn
- what problems React can solve
- how React solves those problems under the hood
- what JSX is and how it translates to regular JavaScript function calls and objects
- manage state with hooks
- build forms

🔗 https://t.co/3z22aeVQFc

Pratham
@Prathkum

12 websites that will help you learn web development faster (completely free): 🧵

1. How HTTP Works

Everything you need to know about HTTP based system.

🔗 https://t.co/gVZS4RzS1a

2. 30 Days of Node

Learn Node step by step with interactive examples and code snippet in 30 days.

🔗 https://t.co/9nbtMiNB1C

3. How DNS Works

Learn what happens when you type a website address in your browser

🔗 https://t.co/SqMRNnDbc3

4. Git

Check out this excellent free website to learn git visually.

🔗 https://t.co/rQJMISBDfS

More from Webdev

Pratham
@Prathkum

Use these 5 websites to learn web development for free in 2023 (take a look):

1. Codedamn

All-in-one platform for learning web development:

• Hands-on practice and projects bundled
• Video content along with interactive labs, quizzes, and articles
• Every course comes with a certificate
• code brushes AI in playgrounds

🔗 https://t.co/mXmUtJZnOU

2. Codepip

Codepip is the platform for your favorite web development games. Gain an edge in your following interview or project.

🔗 https://t.co/MjHNsLvkiL

3. RapidAPI Comics

Learn API development with RapidAPI Comics (sketch notes and fun analogies).

🔗 https://t.co/KONorFomgu

4. JS Visualizer 9000

Learn JavaScript by visualizing your code.

🔗 https://t.co/9NId4GjGAq

$Junaid \u26a1$

Junaid ⚡
@junaidshaikh_js

13 Websites that will help you improve your frontend skills by building real-world projects. 💪

A thread ⤵️

1️⃣ Frontend Mentor { @frontendmentor }

🔗

2️⃣ 100 Days of CSS

🔗

3️⃣ Piccalilli

🔗

4️⃣ Codewell

🔗

Pratham
@Prathkum

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

Akos
@akoskm

10 FREE React Courses to Level Up your React Skills 🍄

Thread 🧵👇

$Pratham \U0001f468\u200d\U0001f4bb\U0001f680$

Pratham 👨‍💻🚀...
@Prathkum

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

Thread🧵

Before I start, a quick disclaimer, please don't ape his portfolio.

As the entry price, horizon and risk appetite would be far different than yours.

Rather lets draw inspiration and try to learn his stock picking skills.

Now let's DIVE IN👇

1/ Started off as a trader:

- Soon, beginner’s luck started to fade out and loses started to mount, to an extent where his mother was about to sell her ornaments.

- Although he was able to dodge the situation.

- This incident taught him the biggest lesson to have a stop-loss.

2/ Punjab Tractors:

- In 1990, he made his first investment by putting in his 10-years savings of Rs 35,000 in this stock, based on a news trigger that tractor industry will witness a turnaround.

- It worked and fetched him 4-5 times which he calls it as a fluke.

3/ He believes that an investor must possess three qualities:

i. Knowledge,
ii. Courage, and
iii. Patience.

Noah Smith
@Noahpinion

Krugman is, of course, right about this. BUT, note that universities can do a lot to revitalize declining and rural regions.

One thing I've been noticing about responses to today's column is that many people still don't get how strong the forces behind regional divergence are, and how hard to reverse 1/ https://t.co/Ft2aH1NcQt
— Paul Krugman (@paulkrugman) November 20, 2018

See this thing that @lymanstoneky wrote:

And see this thing that I wrote:

And see this book that @JamesFallows wrote:

And see this other thing that I wrote:

Mystery Grove Publishi...
@MysteryGrove

Bartosz Ziembinski
@zmbnski

Still wondering about this 🤔

I am considering adding a 'compose' feature to @buzzwaysapp

It would enable a user to compose a thread out of different tweets and submit it to Buzzways.

What do you guys think?
— Bartosz Ziembinski (@zmbnski) November 23, 2018