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

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/

I joined Tech Twitter 11 months ago and during this time I made around 72K audience.

Everyone can do this. Let me share how 🧵

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 👇🏻

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....

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

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

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

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

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.

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.

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 }

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

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

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/

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 }

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

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

5 seamless single div css art that anyone can create for fun 📱🌥️🎧👓🚀

🧵 👇🏻

1️⃣ Mobile Phone 📱

Complete code: codepen.io/prathkum/pen/W…

2️⃣ Cloud 🌥️

Complete code: codepen.io/prathkum/pen/V…

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

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…

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 }

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.

5 simple single div CSS arts you can try 🎨

{ 1 / 5 } 🧵

2. Yin and Yang ☯️

3. Coffee ☕

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

5 amazing tips of CSS you need to know 🎨

🧵 👇🏻

1️⃣ Image reflection

You can create reflection of an image using one CSS property

2️⃣ 3D element

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