Web Development
130K subscribers
560 photos
56 videos
541 files
111 links
Learn to code and become a Web Developer with HTML, CSS, JavaScript, React, Node.js

πŸ’³ Paid ads: https://telega.io/c/Webdev_Trainings
Download Telegram
πŸ”° Areas in CSS

Grids are a very cool feature in CSS. Imagine building layouts like these without display: grid; 😲

In grids, the grid template areas property is handy to visualize what the output grid will look like.


Here we have a 3x3 grid, with the first image alone occupying 2x2. The areas definition literally mimics the same!

It is very useful for such use cases.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘33❀17
Did you know that you can instruct the browser to load images from the backend only when the user scrolls near to the actual location of the image? This is possible using the loading attribute in HTML.

The browser runs some heuristics to check when the image might be actually required to be rendered.

πŸ‘‰ For example, an image at a bottom section might be required only when user scrolls into it and not immediately during page load.

This significantly reduces the network bandwidth and initial page load times!
πŸ”₯30❀22πŸ‘15
Media is too big
VIEW IN TELEGRAM
πŸ”° Use these instead of vh

I see people use vh a lot, and then complain that it doesn’t work the way they thought it would, so in this one, I explore a few other options that we have, which are dvh, svh, and lvh. Along with these, you could also use dvb, svb, and lvb, which are the logical property version of the height units, but for the block-size.
Please open Telegram to view this post
VIEW IN TELEGRAM
❀20πŸ‘17
πŸ”° Useful CSS Snippets
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❀49πŸ‘8
⌨️ An Amazing Cheatsheet for Tailwind CSS to master Tailwind in Minutes
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❀27πŸ‘4
⌨️ An Amazing Cheatsheet for Tailwind CSS to master Tailwind in Minutes
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❀34πŸ‘6