Core web vitals recommendations, AI prompt principles, avatar fancy hover effect, CSS named colors
Web Design Weekly
Issue #445 – January 18, 2023
Read on the web
# Highlights
Visual design rules you can safely follow every time
Anthony shares 23 visual design rules that are inherently present in any good layout design.
Anthony Hobday
Axe-con 2023 – Online Digital Accessibility Conference (free!)
Axe-con welcomes developers and designers to a free, virtual accessibility conference on March 15-16! Hear from experts at Google, Microsoft, GitHub, and more. Register to join live or access the recordings.
Deque – Sponsor
Top Core Web Vitals recommendations for 2023
Google’s top recommendations to improve performance for each of the Core Web Vitals metrics. If you’re new to web performance, or if you’re trying to decide what will give you the biggest bang for your buck, these recommendations are the best place to start.
Google
Microsoft Designer: AI prompt design principles
With the unpredictability of AI generators, and the nuances around prompt engineering, this article observes Microsoft’s approaches to guiding new users to creating prompts that get more reliable outputs, without wasting much time.
Graeme Fulton
How to make a website
Write meaningful HTML that communicates the structure of your document before any style or additional interactivity has loaded.
Henry Desroches
# 👨💻 Tutorials
Fancy hover effect on avatar
Add a nice hover effect to your profile picture using a minimalist code.
Temani Afif
CSS named colors
Did you know there are 148 CSS named color keywords? This article by Austin provides a complete list of all color choices.
Austin Gil
CSS color functions and custom properties
Matuzo explains how working with color functions – `hsl() `, `hwb()`, or `lab()` is easier and cleaner compared to working with hex colors or `rbg()`.
Matuzo
Optimizing the image element LCP
In this article, Eloïse Martin provides an overview of the best practices for the integration and optimization of an LCP image.
Eloïse Martin
CSS style queries
Although still experimental and currently implemented only in Chrome Canary, style queries let us query a CSS property or CSS variable for a container.
Ahmad Shadeed
# 🛠 Tools
Pixelicious – Pixel art converter.
# ⚡ Snippets
* Coding fonts used by Chris Coyier
Web Design Weekly
Issue #445 – January 18, 2023
Read on the web
# Highlights
Visual design rules you can safely follow every time
Anthony shares 23 visual design rules that are inherently present in any good layout design.
Anthony Hobday
Axe-con 2023 – Online Digital Accessibility Conference (free!)
Axe-con welcomes developers and designers to a free, virtual accessibility conference on March 15-16! Hear from experts at Google, Microsoft, GitHub, and more. Register to join live or access the recordings.
Deque – Sponsor
Top Core Web Vitals recommendations for 2023
Google’s top recommendations to improve performance for each of the Core Web Vitals metrics. If you’re new to web performance, or if you’re trying to decide what will give you the biggest bang for your buck, these recommendations are the best place to start.
Microsoft Designer: AI prompt design principles
With the unpredictability of AI generators, and the nuances around prompt engineering, this article observes Microsoft’s approaches to guiding new users to creating prompts that get more reliable outputs, without wasting much time.
Graeme Fulton
How to make a website
Write meaningful HTML that communicates the structure of your document before any style or additional interactivity has loaded.
Henry Desroches
# 👨💻 Tutorials
Fancy hover effect on avatar
Add a nice hover effect to your profile picture using a minimalist code.
Temani Afif
CSS named colors
Did you know there are 148 CSS named color keywords? This article by Austin provides a complete list of all color choices.
Austin Gil
CSS color functions and custom properties
Matuzo explains how working with color functions – `hsl() `, `hwb()`, or `lab()` is easier and cleaner compared to working with hex colors or `rbg()`.
Matuzo
Optimizing the image element LCP
In this article, Eloïse Martin provides an overview of the best practices for the integration and optimization of an LCP image.
Eloïse Martin
CSS style queries
Although still experimental and currently implemented only in Chrome Canary, style queries let us query a CSS property or CSS variable for a container.
Ahmad Shadeed
# 🛠 Tools
Pixelicious – Pixel art converter.
# ⚡ Snippets
* Coding fonts used by Chris Coyier
* Retro logos collection by Rafael Serra
* Wikipedia’s makeover: The journey to a new desktop identity
* Web Design history timeline from 1990 to the present
Comments or feedback? Hit reply to this email!
Never want to hear from us again? Break our hearts and unsubscribe