Pratham Profile picture
Web Development is tough, but I am reducing the complexity by writing tweets for you.
prapat tantayatorn Profile picture jaafar habu Profile picture Kakaroto 1984 Anurag Prasoon Profile picture Tom Booster Profile picture 41 added to My Authors
7 May
11 great websites a programmer should visit

Thread πŸ§΅πŸ‘‡πŸ»
Can I use?

- A website that provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

πŸ”— caniuse.com Image
Web Skills

Websites for all kind of learning resources for web developers

- Fundamentals
- Accessibility
- Web components
- Progressive web apps
- Frameworks and libraries
- Testing
- Architecture and Paradigm
- UI and UX
- DS and Algo

πŸ”— andreasbm.github.io/web-skills/ Image
Read 12 tweets
7 May
I joined Tech Twitter 11 months ago and during this time I made around 72K audience.

Everyone can do this. Let me share how 🧡 Image
1️⃣ Find your niche

Evaluate your passions and skills. And share something in the community in which you are good at. This is how you can let the people know that new member joined in the community recently

This is how I started πŸ‘‡πŸ» ImageImageImageImage
2️⃣ Use big accounts smartly 😎

I have noticed many people tag big accounts in their tweet in order to get impressions. This is not the right thing.

You can reply on the posts of big accounts and by doing so there might be some chances of getting impressions on your reply....
Read 16 tweets
7 May
7 amazing websites that will help you improve your CSS skills

πŸ§΅πŸ‘‡
1️⃣ Learn to code HTML and CSS

- Learn how to build beautiful and intuitive websites by way of clear and organized lessons

πŸ–‡οΈ learn.shayhowe.com Image
2️⃣ CSS reference

- CSS Reference is a free visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated content

πŸ–‡οΈ cssreference.io Image
Read 8 tweets
6 May
Do you have videos in your webpage?

Here are 4 tips to style video like a pro ↓
Adding subtitles is always good from accessibility point of view.

You can style the subtitles of video on your website using ::cue pseudo-element Image
The :picture-in-picture CSS pseudo-class matches the element which is currently in picture-in-picture mode.

You can use it for style video on your webpage when its picture-in-picture mode Image
Read 5 tweets
6 May
Powerful part of HTML

πŸ§΅πŸ‘‡πŸ»
1️⃣ <wbr>

The <wbr> (Word Break Opportunity) tag specifies where in a text it would be ok to add a line-break

When a word is too long, the browser might break it at the wrong place. You can use the <wbr> tag to add word break opportunities
2️⃣ <bdi>

The HTML Bidirectional Isolate element (<bdi>) tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text.
Read 8 tweets
6 May
Web development is a beauty :)
I love learning beautiful things so I'm doing it.

Often beautiful things are difficult to master so it is
Too many languages to learn
Too many frameworks
Too many things....

Focusing on one at a time can make the process easier.
Read 4 tweets
6 May
Aurora UI is a latest visual trend in 2021. Let's see how we can create that using CSS in 4 simple steps

Thread πŸ§΅πŸ‘‡πŸ»
You can create beautiful aurora design hardly in 10 minutes. It is all about creating mesh gradients.

You can create gradient backgrounds using `linear-gradient()` or `radial-gradient()` but here we are creating cambered gradients

{ 2 / 8 }
Step 1️⃣: Create container

Just create a simple div with fixed height and width.

{ 3 / 8 }
Read 8 tweets
6 May
Websites that will help you if you're a web developer or designer

Thread🧡
Free high-resolution images that you can use in personal and commercial projects

πŸ”— gratisography.com
Web design resources, including a ton of categorized photos, plus icons and templates

πŸ”— imcreator.com/free
Read 6 tweets
5 May
If you know CSS then do not write CSS code, use these free generators instead that can help you tremendously

A Thread 🧡
1️⃣ Gradient Animator

- A CSS generator to create beautiful animated gradients 🎨

πŸ”— gradient-animator.com
2️⃣ CSS Accordion Slider Generator

- Create fully responsive, css only accordion sliders

πŸ”— accordionslider.com
Read 6 tweets
4 May
Are you learning JavaScript?

These 12 amazing resources will boost your skills

πŸ§΅πŸ‘‡πŸ»
1️⃣ JavaScript visualizer

- A great visualizer for JavaScript code

πŸ”— jsv9000.app
2️⃣ Learn JavaScript

- Interactive JavaScript tutorial.

πŸ”— learn-js.org/en/
Read 14 tweets
3 May
A complete beginner's guide to styling your website with CSS.

Thread πŸ§΅πŸ‘‡πŸ»
CSS is an amazing and unique language that servers a great purpose. We can make our website visually good using CSS. It describe the presentation of web pages, including typography,. layouts, color etc...

{ 2 / 27 }
First and foremost

The characterstic of a great website is it's color scheme. Forget about everything and learn about background and color properties initially.

The colors are something from which users interact first whenever they visit your webpage

{ 3 / 27 }
Read 27 tweets
2 May
Check out these 10 amazing GitHub repositories 😼

🧡 πŸ‘‡πŸ»
1. github.com/gztchan/awesom…
- 🌟Curated design resources

2. github.com/DovAmir/awesom…
- A curated list of software and architecture related design patterns 🎨
3. github.com/lnishan/awesom…
- πŸ’Ž A curated list of awesome Competitive Programming, Algorithm and Data Structure resources

4. github.com/microsoft/node…
- Tips, tricks, and resources for working with Node.js
Read 6 tweets
1 May
z-index is a powerful yet confusing concept of CSS. But this short thread will solve all your doubts related to it.

Thread🧡 πŸ‘‡πŸ»
z-index is a CSS property that controls stacking order of elements along z axis.

Image a hypothetical line starting from your eye to screen, that is z-axis
Note that z-index only works on positioned elements.

You need to specify the position (relative, absolute, sticky, fixed) if you want to arrange an element using z-index
Read 8 tweets
30 Apr
5 seamless single div css art that anyone can create for fun πŸ“±πŸŒ₯οΈπŸŽ§πŸ‘“πŸš€

🧡 πŸ‘‡πŸ»
1️⃣ Mobile Phone πŸ“±

Complete code: codepen.io/prathkum/pen/W… .phone {   position: relative;   height: 128px;   width: 72p
2️⃣ Cloud πŸŒ₯️

Complete code: codepen.io/prathkum/pen/V… .cloud {   height: 50px;   width: 140px;   background: #6EC4
Read 8 tweets
29 Apr
10 HTML tips I bet you are not familiar with 🧡 πŸ‘‡πŸ»
HTML Tip 1

The input with type image defines an image as a submit button. With src attribute that specifies the link to the image
HTML Tip 2

The "step" attribute specifies the interval between legal numbers in an <input> element

Suppose I want the user to only select Sundays in the input date then I'll mention the upcoming Sunday date with 7 stepsDown pointing backhand index
Read 11 tweets
29 Apr
6 amazing GitHub repositories that can help you in your web development journey

🧡 πŸ‘‡πŸ»
1️⃣ frontend-guidelines

- Some HTML, CSS and JS best practices.

πŸ”— github.com/bendc/frontend…
2️⃣ awesome-learning-resources

- Awesome list of resources on Web Development.

πŸ”— github.com/lauragift21/aw…
Read 7 tweets
29 Apr
The next 19 tweets will help you start your JavaScript journey with zero inconvenience

🧡 πŸ‘‡πŸ»
Some valid reasons why you should learn JavaScript

πŸ”Ή Currently used by 94.5% websites
πŸ”Ή Wide range of applications including mobile and desktop devices
πŸ”Ή Most in-demand language

{ 2 / 20 }
Here's a crash course of JavaScript by Freecodecamp.

Crash courses are just for quick look. Don't just stop learning after it. Keep exploring things by your own



{ 3 / 20 }
Read 20 tweets
28 Apr
5 amazing CSS properties you won't believe really exist 🎨

🧡 πŸ‘‡πŸ»
1️⃣ touch-action

The touch-action CSS property sets how an element's region can be manipulated by a touchscreen user (for example, by zooming features built into the browser).

This propety accepts the following values πŸ‘‡πŸ»
2️⃣ will-change

You can optimize the performance of your web page by adding one line of CSS🀯

The will-change CSS property hints to browsers how an element is expected to change. It can increase the speed by doing potentially expensive work before they are actually required.
Read 9 tweets
27 Apr
5 simple single div CSS arts you can try 🎨

{ 1 / 5 } 🧡
2. Yin and Yang ☯️
3. Coffee β˜•
Read 5 tweets
27 Apr
These 13 web development code snippet websites can save you a lot of time

A thread 🧡
1️⃣ W3 Schools How to

- Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS and JavaScript

πŸ”— w3schools.com/howto/default.…
2️⃣ Code My UI

- Handpicked collection of Web Design & UI Inspiration with Code Snippets.

πŸ”— codemyui.com
Read 14 tweets
26 Apr
5 amazing tips of CSS you need to know 🎨

🧡 πŸ‘‡πŸ»
1️⃣ Image reflection

You can create reflection of an image using one CSS property -webkit-box-reflect: below 0px linear-gradient(to bottom, rg
2️⃣ 3D element

The Perspective property helps you give your elements a 3D look.
Read 6 tweets