Community Picks·3ySuper Useful CSS Resources 🌈
A collection of 70 hand-picked, web-based tools which are actually useful. Each will generate pure CSS without the need for JS or any external libraries. Full credit goes to the authors behind each of these apps (where possible I've linked to their GH/ socials) The collection includes Property Generators - Animations - Backgrounds.
Product Hunt·3yuiverse.io - Universe of UI; Hundreds of Open Source UI elements
All elements are open source and free to use. We make it easy to find and customize the perfect element for your project. We also offer hundreds of community-made CSS and HTML UI elements like buttons, inputs, checkboxes and cards.
JetBrains·3yHour of Code: Top 5 Frontend Projects
JetBrains Academy has released three frontend projects for frontend developers this summer. The most popular projects are HTML, CSS, and JavaScript. These tracks include a huge variety of real-life projects to keep you engaged during your studies. To help you develop and train this useful skill, we invite you to create a Virtual Piano app.
freeCodeCamp·3yImprove Your JavaScript Skills by Coding a Card Game
Coding a Card Game Building projects is a great way to improve your programming skills. We just published a course on the freeCodeCamp.org YouTube channel that will teach you how to create a digital card game with JavaScirpt, HTML, and CSS.
Community Picks·3yHow to Become a Front-End Developer
Front-end development involves building the visual and interactive elements of websites and applications that users interact with. As a front-end developer, you will be responsible for designing and implementing the user interface of web and mobile applications. You can learn web development from basics to advanced topics through online courses and programs.
Community Picks·3yHow to Make a Better Responsive Web Design
responsive web design and adaptive web design are two approaches to creating websites that work well on a wide range of devices and screen sizes. Responsive web design involves creating a single layout that adjusts itself automatically to fit the size of the screen it is being displayed on. Adaptive design requires the browser to load the appropriate layout.
DEV·3yIntroducing Codux
Codux is a new visual IDE for easing and accelerating the development of React projects. Codux analyzes your project to discover its UI components and general structure. When it makes changes - when you’ve changed a property, for example - it will write code the way you would write it.
LogRocket·3yCreating smoother CSS transitions with Animate CSS Grid
In this article, we’ll demonstrate how to use the Animate CSS Grid package to animate all the properties of our Grid. The package allows us to achieve smooth transitions between the state changes of our CSS Grid container without writing any CSS animation code. We'll also look at how we can configure the package to suit our specific needs.
freeCodeCamp·3yHow to Build a Dropdown Menu with JavaScript
In this guide, you'll learn how to build a dropdown menu using HTML, CSS, and JavaScript. At the end of the guide, I'll include the codepen file so you can play around with it. For simplicity, we'll be using a free library called Boxicons. Feel free to pick other alternatives you prefer.
Community Picks·3yResponsive Navbar without Javascript
The major CSS section will be explained, and the remaining code will be provided in the code pen at the end of this blog. I'll use the :has() selector for the toggle effect; you can see which browsers support it here. The bars and cross icons will likewise be toggled by this checkbox.
Pointer·3yBuilding a website like it's 1999... in 2022
Sophia's Homepage Animated GIFs GeoCities sites were absolutely littered with GIFs. Sophie's goal is to show you how we can be just as creative today but using modern and accessible methods. We're talking pre-social media, pre-web 2.0 – the good old fashioned static personal home page.
Community Picks·3yWhy I'm Optimistic About JavaScript's Future
The three major browser engines (Chromium/Chrome, Gecko/Firefox, and Webkit/Safari) now have the best cross-browser support for JavaScript, CSS and Web APIs we’ve ever seen. This post will outline recent improvements to the web platform across the browser, server, and edge.
Community Picks·3y12 Days of Web
CSS:has() is behind a flag in Firefox and supported in Chrome, Edge, and Safari. It can match an ancestor element based on containing a specific descendant, but it can also match antecedent elements based on subsequent content. In the following pseudo-code, you can select any that has a later sibling.
asayer·3yBuilding React components with DaisyUI
DaisyUI is the most popular, free, open-source, and customizable Tailwind CSS component library that prevents expansive markup in front-end applications. DaisyUI provides responsive components that we can always customize to our taste. In this article, we will build a book store using DaisyUI to demonstrate how straightforward and faster it is to style an application.
Moralis·3yEssential Web3 Programming Languages for 2023
Solidity Solidity is a Turing-complete, object-oriented, relatively high-level programming language for building EVM-compatible smart contracts. Rust Rust is a statically typed, multi-paradigm, low- level programming language emphasizing performance and security. Go Go is a Google-designed, open-source, compiled programming language.
asayer·3y30 Ways to Improve Website Performance with CSS
CSS accounts for 7 HTTP requests and 70Kb of code on the average web page. It’s not the worst cause of woeful website performance (I’m looking at you, JavaScript), but there are specific CSS challenges. The following 30 tips will help you optimize CSS to improve actual and perceived response times.
Community Picks·3yrem vs em - Everything you need to know
In this article, we'll look at everything em and rem, their differences, when and how to use them, and practical examples of em. rem vs. em. Rem is another unit of measuring length in CSS, which stands for "root em" This article expects the reader to have a solid grasp of CSS.
asayer·3yTop 5 alternatives to Webpack
Webpack is a free and open-source module bundler for JavaScript applications. It is used to bundle JS files for usage in a web browser, and it can transform front-end assets such as HTML, CSS, and images if corresponding loaders are included. Webpack works by processing your application and internally building a dependency graph.
30 seconds of code·3yTip: Use clamp() in CSS for responsive typography
Use clamp() in CSS to create responsive typography with a single line of code. All you need to do is set the minimum, maximum and preferred value and the browser will do the rest. For a more complex example, take a look at the Fluid typography snippet.
freeCodeCamp·3yCSS display:none and visibility:hidden – What's the Difference?
CSS display:none and visibility:hidden - What's the Difference? and are two style declarations you can use to hide elements on the screen with CSS. Both approaches hide the element visually, they cause the element to behave in different ways. I'll explain these differences in this article if you're interested.
LogRocket·3yExploring Anime.js with an example site animation project
Anime.js is a lightweight library with over 43k stars on GitHub that animates CSS attributes, DOM elements, and SVG on a webpage. You can use it to create simple and complex animation effects of your choice, synchronize multiple instances and control all animation features.
