Best of Kevin Powell — 2024
- 1
- 2
Kevin Powell·2y
This new CSS property just solved animating to height auto
Animating height to auto in CSS is now easy with a new property. By using 'interpolate size: allow keywords', you can transition to height auto without hacks. This method also works with other intrinsic keywords like min-content, max-content, and fit-content. Using this property at the root level applies the effect sitewide. Tips on managing visibility during transitions are also included.
- 3
- 4
- 5
Improve your reset with these modern CSS additions
Discover three modern CSS additions to enhance your CSS reset. Learn about the text-wrap balance to improve heading appearance, setting max width on text elements to ensure readability, and utilizing container queries for better responsive design. These tips aim to make your web typography and layout more visually appealing and easier to manage.
- 6
Stop Writing Extra Code: HTML Inputs Are More Powerful Than You Think
Developers often overlook the capabilities of HTML inputs and CSS. For example, number inputs can be limited using min and max attributes. CSS pseudo-classes like 'in-range' can enhance user feedback. The color picker input allows users to choose colors from any open window. There's an array of native input features and pseudo-classes that can enrich user interfaces.
- 7
- 8
Design to Code // HTML & CSS from scratch // Frontend Mentor Form
A developer walks through building a project from scratch based on a design from the Frontend Mentor platform. The process involves creating HTML structures, styling with CSS, and handling various states such as error and hover states for forms. Emphasis is placed on tools like Emmet in VS Code and implementing locally hosted fonts. The tutorial also highlights using grid layouts and customizing form input validations.
- 9
"Smart" design patterns with container queries
Container queries are a powerful CSS feature that allows styling based on the size of an element's container, rather than the viewport. This can lead to more flexible and meaningful breakpoints, particularly for component-based designs. The post explores practical examples, including making components adapt to the number of columns in a layout and how units like REM and EM work differently in container queries. The ability to create more intelligent design patterns without relying solely on viewport-based media queries is a key advantage.
- 10
Improve your forms with this underused HTML element
Learn how to enhance user experience in forms by using the HTML datalist element. The datalist attribute allows you to create dropdown lists for input fields, which can be used for text, color, and time inputs. This lets users choose from predefined options while still allowing manual input.
- 11
My top 5 most popular front-end tips
The post outlines the top five front-end tips based on the author's short-form video views. It covers various tips like debugging CSS overflows, adjusting favicons for different color schemes, handling HTML input types and modes, modern CSS practices, and strategies for better learning and retaining web development skills outside of tutorials. Key highlights include using an outline to locate hidden elements, using media queries for favicons, enhancing user experience with input fields, and the importance of building projects independently to overcome 'tutorial hell'.
- 12
npm for absolute beginners
Learn how to get started with npm, including installing Node.js, using the command line, initializing new projects, and understanding package.json files for managing dependencies and scripts. The guide covers basic navigation within the command line and provides an example of creating a project with Vite, adding dependencies, and using package managers efficiently.
- 13
Use this instead of white-space: nowrap
When dealing with text wrapping issues in buttons, using 'white-space: nowrap' may cause overflows if there's too much text. A better approach is to use 'min-width: fit-content'. This maintains the benefits of 'nowrap' but allows wrapping if necessary to prevent overflow, offering a more flexible solution.