BC WEBDEV

Pratham
@Prathkum 2 years, 10 months ago 397 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 \U0001f468\u200d\U0001f4bb\U0001f680$

Pratham 👨‍💻🚀...
@Prathkum

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.

$Pratham \U0001f468\u200d\U0001f4bb\U0001f680$

Pratham 👨‍💻🚀...
@Prathkum

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 }

$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

22 CSS tips and tricks I'm sure you don't know about them yet (free document): 🧵

🔗 https://t.co/PdaPNxoK4P #collab

Pratham
@Prathkum

Five free VS Code extensions that will change the way you do web development:

1. RapidAPI Client

Fulfill all your need for API development.

• Test and consume APIs
• Work with your VS Code theme
• Generate TypeScript, Swift, and Python interfaces from responses.

🔗 https://t.co/FR0QhyTi8v

2. Better Comments

Create more human-friendly comments in your code.

• Alerts
• Queries
• TODOs
• Highlights

🔗 https://t.co/AV2BwAMAlL

3. Git Graph

View a Git Graph of your repository and efficiently perform Git actions from the graph.

🔗 https://t.co/S5wagmTgsa

4. Peacock

Do you have a habit of keeping multiple VS Code windows open?

Peacock lets you change the color of your VS code even if multiple instances are open.

🔗 https://t.co/bmidPkTQOK

More from Webdev

Sunil Kumar
@sunilc_

Are you a web developer?

Here's a list of websites that offer free & beautiful website templates:

🧵👇🏻

1. HTML5UP: Very modern, unique responsive HTML5/CSS3 themes
https://t.co/Nx1IWM7Kho

2. Templatemo: Minimal, resume, gallery themes and more
https://t.co/IRtOxrujUh

3. Templated .co: Tons of minimalistic HTML5/CSS3

4. FreeHTML5: Free & premium HTML5 and Bootstrap themes
https://t.co/YFVkiDM3Th

5. StyleShout: Brilliantly crafted free website templates
https://t.co/AaGAkGlLTV

6. Start Bootstrap: Bootstrap starter

7. Zerotheme: HTML5, Bootstrap, Prestashop templates
https://t.co/UtlaNxGh6Q

8. HTML5xCSS3: Collection of wonderful templates in different categories
https://t.co/fm4AOthUdR

9. Colorlib: Almost any category of theme you can think

10: Free CSS: Huge collection of free templates
https://t.co/S5yQrkp1eq

11. Hubspot: Templates, infographics, banners and much more
https://t.co/T10zTgkIzp

12. Mobirise: Great looking HTML5/CSS3

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

Pratham
@Prathkum

React Hooks are the functions which "hook into" React state and lifecycle features from function components. Hooks allows you to manipulate state and other React feature without writing a class. Let's talk about widely used hook

useEffect hook at a glance 🧵👇🏻

useEffect hook is the heart of React functional components

If you're familiar with class components then you might know that we have various lifecycle methods but in functional components, we don't have any lifecycle methods. Instead we have a powerful hook called useEffect

By using useEffect, you tell React that your component needs to do something after render. React will remember the function you passed (we'll refer to it as our “effect”), and call it later after performing the DOM updates

So let's start by understanding the syntax first

3/15

useEffect take two parameters, first is a function and second is an array.

The function inside the useEffect will run every single time component re-render. Consider this piece of code and check the output in next tweet

{ 4 / 15 }

As you can see in the output the function is executed every single time my component re-render

{ 5 / 15 }

George Moller
@_georgemoller

🌟 2022 React developer roadmap.

$Csaba Kissi \u26a1$

Csaba Kissi ⚡
@csaba_kissi

23 FREE SVG Icon Libraries For Front-End Developers

Mega Thread 🧵👇

1️⃣ Ionicons: The premium icon pack for Ionic Framework

Ionicons is an open-sourced and MIT-licensed icon pack.

2️⃣ 700+ CSS Icons, Customizable, Retina Ready & API

Pure CSS icons library, Customizable & Retina-Ready built 100% in pure CSS, SVG, SVG Sprite, styled components, Figma, and Adobe XD. Easy integration: Embed, NPM & API

3️⃣ SVG Repo - Free SVG Vectors and Icons

Free Vectors and Icons in SVG format. Download free mono or multi-color vectors for commercial use. Search in 300.000+ Free SVG Vectors and Icons.

https://t.co/2Ht2sI23TE

4️⃣ Feather – Simply beautiful open source icons

Feather is a collection of simply beautiful open source icons. Each icon is designed on a 24x24 grid with an emphasis on simplicity, consistency, and readability.