Frontend & Web Dev, Marketing, SEO, GEO | HI Web
15.2K subscribers
581 photos
17 videos
51 files
196 links
• Guides on HTML, CSS, JavaScript, React
• Free Figma templates
• Tips on UI/UX design
• Career advice
• Portfolio tips, GitHub help, and soft skills for devs
• Live projects, coding challenges, tools, and more

For all inquiries contact @haterobots
Download Telegram
⚡️How To Create Cut-Out Shapes using The clip-path property

We will see how to invert a shape created using polygon(). Such shapes are also called cut-out shapes.
🔥8👍2
Free Figma Template: Watch Shop

🧠 Difficulty: 🥕🥕

#Figma #Template
8👍5
💠 How to parse HTML in JavaScript

In this guide, we'll explore the fundamentals of parsing HTML content and the various methods and libraries for parsing HTML in JavaScript. We'll also cover best practices and common issues, as well as practical applications.
👍8🔥1
Free Figma Template: Brand Shop

🧠 Difficulty: 🥕🥕🥕

#Figma #Template
🔥85👍2
CSS Flexbox Layout Guide

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.
6👍6🔥1
Free Figma Template: Pay System

🧠 Difficulty: 🥕🥕

#Figma #Template
12👍2🔥2
Free Figma Template: Crypto Trading

🧠 Difficulty: 🥕🥕🥕

#Figma #Template
👍84👏2
📝 How does map.entries() work?

The Map.entries() function returns a new iterator that contains [key, value] arrays for each pair of elements in the map object, in the order they were added to the object.

This method can be useful when you want to iterate over all the elements of a Map object and perform some action on each pair.

Map.entries() returns an iterator, not an array, for an array in the end, you should use other methods
👍53
Feature Detect CSS @starting-style Support

Bramus Van Damme shows a clever way to detect @starting-style at-rule support.
👍5🔥1
Free Figma Template: Good4me shop

🧠 Difficulty: 🥕🥕🥕

#Figma #Template
👍127
🖥 How does Object.create() work?

The Object.create method creates a new object with the specified prototype and properties.

It takes two arguments: the first is an object that will be the prototype for the new object.
The second is an optional object containing the properties and their descriptors that will be added to the new object.

If the first argument is not passed or is null, the new object will be created with Object.prototype as the prototype.
👍82🔥1
Free Figma Template: Boldo service

🧠 Difficulty: 🥕🥕

#Figma #Template
11👍4
Free Figma Template: Building company

🧠 Difficulty: 🥕🥕🥕

#Figma #Template
12👍3
💻 What are React Server Components? Understanding the Future of React Apps

React Server Components (RSC) is the latest and perhaps the most significant change since React hooks. Notably, big voices in the React community have endorsed RSCs, highlighting their importance in the future of React. However, this change has met with mixed reactions within the community
8👍2
🔧 How to Build Reusable React Components

What are reusable React components? You can think of them as building blocks. They are independent pieces of code that can be reused throughout your website to save you time and effort.
8👍3
🏄 CSS Grid Areas

CSS Grid support has been widely available since March 2017 in all major browsers. Yet, here we are in 2024, and I still see few people using the grid template areas feature.

It’s no surprise that many avoid template areas as making sense of the grid is challenging enough. In this interactive article, I aim to shed light on this feature and, hopefully, convince you to use it more often. Once you see the simplicity and power of template areas, you may reach for them much more frequently.
👍103
Free Figma Template: Handmade Portfolio

🧠 Difficulty: 🥕🥕🥕

#Figma #Template
👍84