DEV Community: Idriss Douiri

Important things to know about the anchor tag

Idriss Douiri — Sun, 23 Jun 2024 23:35:39 +0000

Most of us are familiar with using the anchor tag to link to other pages on the web, but there's so much more to this versatile element that often goes unnoticed by beginners. In this article, we'll explore some of the lesser-known features and functionalities of the anchor tag that can enhance your HTML skills and web development projects.

href attribute

The URL that the hyperlink points to. which can be one of these schemes:

HTTP URL:

<a href="https://douiri.org">read more</a>

targeting specific id by using # sign:

<a href="#content">skip to main content</a>

<main id="content">
</main>

a piece of media using media fragments

<a href="https://example.com/video.mp4#t=30,60">Watch from 30 to 60 seconds</a>

a text fragment with this syntax

https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]

try this example to see how it works in action: https://douiri.org/blog/css-floating-label/#:~:text=support

learn more about text fragments

telephone, email, or sms

<a href="mailto:drisspennywise@gmail.com">send email</a>
<a href="tel:+212651501766">call me</a>
<a href="sms:+212651501766">send SMS</a>

download attribute

The download attribute instructs the browser to download the linked resource instead of navigating to its URL, provided the resource is from the same origin or uses :blob or :data schemes. You can either specify the desired file name or allow the browser to determine the appropriate name and extension.

<a href="/videos/video.mp4" download>download video</a>
<a href="/cat-4321.png" downalod="cat.png">download image</a>

rel attribute

The rel attribute accepts multiple values and can be used with various elements. While you can view the full list here, I want to focus on the values that control search engine crawlers: nofollow, ugc, and sponsored.

<a href="https://example.com" rel="nofollow">some link</a>

nofollow: indicates that the link should not pass ranking credit (i.e., Non-Endorsed)
ugc: indicates that the link is user-generated content (i.e., comments, posts...)
sponsored: indicates that the link is a sponsored content.

Learn CSS with these Games

Idriss Douiri — Wed, 19 Jun 2024 14:16:33 +0000

CSS can be frustrating to learn, but what is better than learning by playing fun and enjoyable games? That's why I want to share games that helped me in my CSS journey and others that you might find useful.

CSS Diner

CSS Diner will help you master every CSS selector by selecting various items on the table. The game provides multiple use cases for each selector, allowing you to experiment and understand where to apply them. Additionally, it includes helpful hints if you get stuck.

Flexbox Zombies

In Flexbox Zombies, you activate your crossbow using the power of Flexbox to kill zombies. Following the instructions of your teacher, you'll learn Flexbox properties and techniques. This game combines engaging storytelling with practical Flexbox exercises to enhance your learning experience.

Flexbox Froggy

Flexbox Froggy teaches Flexbox by having you help Froggy and his friends reach the lilypad using only flex properties. Each level presents a new challenge, requiring you to apply different Flexbox concepts. The game's progressive difficulty ensures that you build a solid understanding of Flexbox as you advance.

Knights of the Flexbox Table

Knights of the Flexbox Table helps you learn Flexbox layout and Tailwind CSS by writing Tailwind classes to move knights to their proper chests from the dungeon. The game presents a medieval fantasy theme, making learning both Flexbox and Tailwind CSS enjoyable and immersive.

CSS Grid Garden

CSS Grid Garden is similar to Flexbox Froggy but focuses on CSS Grid. In this game, you help water the garden by using CSS Grid properties. Each level introduces new grid concepts, gradually increasing in complexity, ensuring that you gain a comprehensive understanding of CSS Grid layout.

Don't forget to share with us the games you know in the comment section 🙂

Top 5 Chrome Extensions for UI/UX Designers

Idriss Douiri — Sun, 09 Jun 2024 23:16:39 +0000

Chrome web store offers a lot of extensions that can be helpful in various domains, in this article I want to share the 10 extensions that I found useful and can help designers or frontend developers.

1. WhatFont

this extension shows you the font styles when hovering over any text and more details on click.

2. ColorZilla

a tool with colorful tools to help you get the pixel color from anywhere on your screen even outside of the browser, a color picker, and a gradient generator.

3. Page Ruler

this extension is helpful if you want to measure elements on a web page.

4. GoFullPage

Take a screenshot of the entire webpage with a single click for future reference and inspiration.

5. SVG Gobbler

with SVG Gobbler you can optimize and download SVGs that you like from any page

these are the extensions I use regularly, feel free to leave the ones you think are the best in the comment section.

this list was taken from this article Top 10 Chrome Extensions for Frontend Developers in 2024 give me your feedback about the blog so I can improve it 😊.