Web Development
133K subscribers
767 photos
76 videos
590 files
178 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
πŸ”° Zoom Over in CSS
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❀17πŸ‘6
πŸ”° Divider between items in CSS

Want to add dividers between items? But unsure how to handle the last element? This snippet is for you!


This also features the very cool inline direction selection property 🀩 check it out if you haven't already, they are quite useful
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘13❀10πŸ”₯2
πŸ”° Container Queries Explained

Container queries make components truly smart. They adapt to their space, not the screen.


Once you use them, layout bugs feel like a thing of the past.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❀14πŸ‘5
πŸ”… CSS: Inheritance, Specificity, and the Cascade

πŸ“ Understand the C in CSSβ€”the cascadeβ€”and how its three parts work together to determine the style of a website or document.

🌐 Author: Jen Kramer
πŸ”° Level: Intermediate
⏰ Duration: 1h 36m

πŸ“‹ Topics: Cascading Style Sheets

πŸ”— Join Web Development for more courses
Please open Telegram to view this post
VIEW IN TELEGRAM
❀14
CSS: Inheritance, Specificity, and the Cascade.zip
266.6 MB
πŸ“±Web Development
πŸ“±CSS: Inheritance, Specificity, and the Cascade
Please open Telegram to view this post
VIEW IN TELEGRAM
❀3
Please open Telegram to view this post
VIEW IN TELEGRAM
❀4
πŸ”° CSS Trick: Aligning Icons to text

Try this the next time when you are placing an icon next to some text in CSS.


Instead of using the em unit to make the icon the same size as the text, try using the cap unit 🀩

1em is equal to the font size, which is not a direct measurement of the height of the letters

However, 1cap is the size of a capital letter of the font, which helps to neatly align the icon with the text.

⚠️ You may also need flex and align baseline to achieve an alignment as demonstrated above!
Please open Telegram to view this post
VIEW IN TELEGRAM
❀27πŸ‘7πŸ”₯2
πŸ”° How to Lazily load images

Lazy loading is a strategy to load images only when required (when the browser detects that the user is going to scroll near it)
Please open Telegram to view this post
VIEW IN TELEGRAM
❀18πŸ‘8
πŸ”° Slanted Section

Using the clip-path to create a slanted section in CSS!

More developers should start using clip-path, it is very underrated 😁 you can create any shape you want with it!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❀23πŸ‘7
πŸ”… Learning Markdown: Formatting Text without the Complexity

πŸ“ Evaluate the benefits of Markdown compared to other text formats for creating portable and efficient documentation, and learn how it works with ChatGPT and other AI tools

🌐 Author: Ray Villalobos
πŸ”° Level: Beginner
⏰ Duration: 1h 1m

πŸ“‹ Topics: Web Development, Markdown

πŸ”— Join Web Development for more courses
Please open Telegram to view this post
VIEW IN TELEGRAM
❀8πŸ‘2
Learning Markdown: Formatting Text without the Complexity.zip
184.7 MB
πŸ“±Web Development
πŸ“±Learning Markdown: Formatting Text without the Complexity
Please open Telegram to view this post
VIEW IN TELEGRAM
πŸ‘7