HTML & CSS

Curated collection of HTML & CSS related resources.

webkit.org

Designing Websites for iPhone X

Out of the box, Safari displays your existing websites beautifully on the edge-to-edge display of the new iPhone X. Content is automatically inset within the display’s safe area so it is not…

Read the full story⇀
smashingmagazine.com

How New Font Technologies Will Improve The Web

Words are the primary component of content for the web. However, until a short while ago, all we had at our disposal were but a few system fonts. Adding to that, those…

Read the full story⇀
Sponsored

Sympli

Design Handoff and Collaboration for PS, Sketch, AS and Xcode

Bring digital products to life faster and easier. Design handoff, implementation, and collaboration for web and mobile product teams. Sympli works with Photoshop, Sketch, Android Studio, and Xcode and integrates into your existing product development process.

Get started⇀
youtube.com

Creating CSS Grid

A look at how CSS Grid Layout went from an idea to a reality shipping in all major browsers in 2017.

Read the full story⇀
freecodecamp.org

The Ultimate Guide to Flexbox — Learning Through Examples

What’s the best way to understand Flexbox? Learn the fundamentals, then build lots of stuff. And that’s exactly what we’re going to do in this article. A few things to note This…

Read the full story⇀
css-tricks.com

“The Notch” and CSS

Apple's iPhone X has a screen that covers the entire face of the phone, save for a "notch" to make space for a camera and other various components. The result is some…

Read the full story⇀
youtube.com

The Road to Styled Components: CSS in Component-Based Systems

Building user interfaces on the web is hard, because the web, and thus CSS, was inherently made for documents. Because UIs fundamentally are not documents, we've seen a mindset shift towards building…

Read the full story⇀
campaignmonitor.com

The All-New Guide to CSS Support in Email

Fun fact: It’s more than a decade since the Guide to CSS Support in Email was first released. Not so fun fact: It has been nearly 4 years since our last complete…

Read the full story⇀
ayogo.com

Understanding the WebView Viewport in iOS 11

iOS 11 brings some new, perhaps unintuitive, behaviour around the status bar area which will be particularly important for developers using tools like Apache Cordova or Ionic. In particular, this change in…

Read the full story⇀
adamwathan.me

CSS Utility Classes and “Separation of Concerns”

Over the last several years, the way I write CSS has transitioned from a very "semantic" approach to something much more like what is often called "functional CSS." Writing CSS this way…

Read the full story⇀
falkus.co

Remove Unused CSS Rules

A monolithic style sheet is difficult to reason about, which is challenging as CSS files tend to attract bloat. Removing unused styles can help make the situation more manageable. Before we start…

Read the full story⇀
zendev.com

CSS in JS Is Like Replacing a Broken Screwdriver With Your Favorite Hammer

There's a ton of interest these days in 'CSS in JS'. The premise is simple: CSS operates in a global namespace, which can result in undesirable side effects, spaghetti code, and extremely…

Read the full story⇀
sitelocity.com

Critical Path CSS Generator

All the CSS Styles loaded from external files is considered render blocking. Why ? In order for the browser to display your web page and use the styles you specified in the…

Read the full story⇀
chenhuijing.com

Basic Grid Layout With Fallbacks Using Feature Queries

I’ve been using CSS grid (which henceforth will be referred to as Grid) for quite a bit now, and although I often talk about how we can use grid to make all…

Read the full story⇀
svelte.technology

The Zen of Just Writing CSS

It's fashionable to dislike CSS. There are lots of reasons why that's the case, but it boils down to this: CSS is unpredictable. If you've never had the experience of tweaking a…

Read the full story⇀
daverupert.com

Breaking the Grid

As a Front-End developer nothing bothers me more than seeing an unexpected horizontal scrollbar on a website. While building out a checkout layout with CSS Grid I was surprised to find something…

Read the full story⇀
tutsplus.com

Solve Your Specificity Headaches With CSS Modules

“CSS Modules” is nothing to do with the W3C, rather part of a suggested build process. It compiles your project, renaming the selectors and classes so that they become unique, scoped to…

Read the full story⇀

Next Page

Get the most interesting design and frontend stories from our curation every day or week.