Using a simple CSS framework

3 views
29 minutes watched
1 completion

This lesson demonstrates how to use Pico CSS to quickly style a web project with minimal classes, covering setup, layout adjustments, and adding a navigation bar.

Video thumbnail

Get full access

You need to subscribe to get full access to the video and lesson content.

Join 4.3K+ learners from companies like Shopify, Microsoft, Tiktok, AppSumo and Instacart.

$197
one-time payment

Using Pico CSS for Simple Styling

In this tutorial, we'll explore how to use Pico CSS to quickly style a web project. Many developers are familiar with frameworks like Tailwind, Bootstrap, or Bulma, but Pico offers a simpler approach with minimal classes required.

Getting Started with Pico CSS

To begin, we'll use a CDN to add Pico CSS to our project:

  1. Open your layout.html file (or equivalent).
  2. Locate the <head> section.
  3. Add the following line to include Pico CSS:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">

Initial Results

After adding the CDN link, you'll notice immediate improvements:

  • The table layout becomes more visually appealing.
  • ...

Subscribe now to get full access to the lesson content.

Get started →