Josh W Comeau·4yMy Custom CSS Reset
This tutorial explains how to use your own custom CSS reset. It includes all of the little tricks I've discovered to improve both the user experience and the CSS authoring experience. We'll dig into each rule, and you'll learn what it does and why you might want to use it.
gitconnected·5yHow I Structure HTML for Better SEO Results
Stephan Romhart explains how to use semantic HTML 5 tags for better machine readability. He also explains how he organize his CSS for websites without a framework. In his 20 years of web development experience, he’s developed a standard CSS approach for myself. He says that most websites can be built with the following boilerplate.
DEV·5yResponsive Design CSS tips
Using em/percentage/rem instead of px, so that the text, images size adjust with respect to the device width. Flex-wrap - Using flexbox to align your HTML elements such as <div> etc. Media query - Media query should be used to set width and height according to the breakpoints.
Hashnode·4yMy honest opinion on Tailwind CSS
Tailwind is a utility framework that can be used to optimize and speed up your development. Tailwind should not be used if you don't have medium experience with CSS in general. Even though Tailwind has uniform classes, every website built with it is so different.
Hashnode·5yHow to make blob menu using HTML, CSS and JavaScript
I wanted to make something simple with a little transition animation to make it look cool, so I created this blob menu. I got a lot of positive feedback when I shared it so here is the step-by-step process on how to create it. First, we got the <link> tag which is used to import font awesome icons. We got our menu items Menu icon from font-awesome icons. A "links" div that wraps all the items in the menu in one element to be shown or hidden. JavaScript code to show and hide the menu items and the blob.
DEV·5yTap bar with liquid animation using CSS and JavaScript
In this article, we will create a tap bar that you can use in your mobile projects. In the HTML code, the "bar" class is the container of our tap bar and "bar-item" class are the buttons that trigger the animations. Let's first look at what are we building:
Josh W Comeau·5yIntroducing “Shadow Palette Generator”
Shadows exist to give our application a sense of depth, but that illusion is spoiled if the shadows aren't consistent. When we use a cohesive set of shadows, our app will feel more realistic and tangible. Shadow Palette Generator produces a set of 3 shadows, representing 3 different elevations.
DevDojo·5y100+ Free front-end resources, learn and earn (repost)
This post covers everything about front-end development. The roadmap makes sure that gaps in the plan are identified and can be closed as needed in the future. It also serves as a guide for the developers during their journey, allowing them to recognize and act on events that require a change of direction.
Product Hunt·5yColorHub - Find the perfect color palette for your next project
ColorHub helps web developers find the perfect color palette for their next project. Simply select a palette, edit and preview it on a range of layouts, and export a CSS, SCSS or Tailwind snippet in seconds. Use the ColorHub tool to help you with your next web project.
gitconnected·4yCode a cookie-based darkmode switch in CSS and vanilla JavaScript
Code a cookie-based darkmode switch in CSS and vanilla JavaScript. The darkmode button is located inside the <header> element on line 13. In the stylesheet, I define the body in its light and dark state. Also I set the design for dark mode button in lightmode und darkmode (classname active) status.
Hashnode·5yMaking pixel-art with pure CSS
When I started learning HTML and CSS back in September, one of the very first properties I discovered was box-shadow. Box-shadow lets us add shadow effects around our elements. One of these properties is pixel-art, which lets us draw with pixels. We'll start by creating an HTML element with a "pixel" class. Then, we'll create our own pixel grids.
Hashnode·4yMake your website stand out with a custom scrollbar 🌟
scrollbar is easily one of the most neglected UI components out there that are not leveraged by many websites to enhance their users' experience. By default, on all HTML, when the content of the website exceeds the viewport height, a scrollbar will automatically appear on the right, just like the one you're seeing as you read this article now.
DEV·4yResponsive Side Navigation Bar in HTML CSS and JavaScript
In this article you will learn how to create Responsive Sidebar Menu using HTML CSS JavaScript. Below I have shared a video tutorial for you which will help you to know how to make this Responsives Side Navigation Bar step by step. I created this project with the help of HTML CSS and JavaScript. First I created a top menu bar with a logo and a menu button. I then created a site bar that contains a lot of icons and menu items.
DEV·5yCSS Grids Simplified
CSS Grid is a two-dimensional grid-based layout system that is specifically designed to make the layout work easy on CSS. Grid is the first CSS Module which is created specifically to solve the layout problems. It can be used to layout web pages using tables, float, then positioning, and inline-block.
DevDojo·5yResources to practice web development
In order to practice tech , you need challenges and ideas for side projects. In this blog post I have compiled a list of sites which provides more challenges and idea for us to practice web development. Let me know if you found the post useful and if I have missed something in the comments section.
Product Hunt·5yCSS Loaders - Easy to use 300 css loaders with source code copier
Developed using pure CSS. Hence it will load fast and is easily customizable too. A collection of such loaders. It's developed using pure HTML, CSS, and Javascript. It will load quickly and easily. It is available for iOS, Android, Windows, Mac and Linux.
CSS-Tricks·5yIcon Glassmorphism Effect in CSS
I recently came across a cool effect known as glassmorphism in a Dribble shot. My first thought was I could quickly recreate it in a few minutes if I just use some emojis for the icons without wasting time on SVG-ing them. I couldn’t have been more wrong about those “few minutes” — they ended up being days of furiously and frustratingly scratching this itch!
Product Hunt·5yHTMLgApp - Convert (HTML, CSS, JS) to an Android App in 8 min for free
HTMLgApp is a tool that converts your HTML, CSS, and JS code into an Android app automagically. It works with any responsive project. Simply, fill out the form, and we'll get it ready in a few minutes. The tool is free to download and use.
