Background image
logologo symbol

3 - The fundamentals

Modern web development

Description

Web development has always been a field of big changes. It has been through many "wars" or rather fierce debates: The browser wars became the framwork wars, Vim vs Emacs, tabs vs spaces, TypeScript vs JavaScript, functional programming vs object oriented programming and so on. Teaching such a dicipline is not easy and every decision needs very careful consideration.
Today we stand at yet another such crossroads as AI becomes a larger and larger part of every day working life of web developers. Ignoring that in the education would be foolish. We need to tackle this beast and use it to our advantage. The use of AI can allow us to dig deeper into the rabbit hole of web development and that is exactly waht we are going to do. In this guide, that is an introduction to CSS framewords, now for the first time, instead of diving deep into one specific framework, we can try them all out and compare them with the help of AI
In this guide we will use the power of AI to help us develop a website in two or more UI frameworks. We will look into how the framework handles responsiveness, animations and theme colors. We will also compare the different frameworks and compare them to vanilla CSS (vanilla means without any framework)
The slides frome the lecture, introducing this guide can be found here

Topics

  • CSS frameworks
  • CSS preprocessors: Sass and SCSS
  • LLM agents and AI-assisted web development
  • Tailwind CSS and utility-first styling
  • Bootstrap components and grid system
  • StyleX and CSS-in-JS
  • shadcn/ui and reusable React components
  • Vanilla CSS: cascade, inheritance and specificity
  • Responsive web design: mobile-first layouts, media queries and breakpoints
  • CSS layout: Flexbox and Grid
  • CSS transitions, keyframe animations and prefers-reduced-motion
  • CSS custom properties (variables) and design tokens
  • Color themes, dark mode and accessible color contrast
  • Comparing styling tools: use cases, customization, maintainability and performance
  • Prompt engineering: generating interactive learning materials and verifying AI explanations

Goals

Knowledge

Understand what a CSS framework is
Understand the difference between different CSS frameworks

Skills

Be able to create your own learning material using AI
Be able to compare different technologies using AI

Idea for return

1. Choose any two or of the following frameworks:

  • Tailwind
  • Bootstrap
  • StyleX
  • Shadcn
  • Sass
  • something else you find yourself

2. Create your design

  • Create a new project and ask an AI agent of your choice to create the design you did in the design guides using one of the frameworks
  • Create another project and ask the same AI agent to create the design you did in another framework

3. Create a third project for your personal learning material

Ask the AI to make an interactive website that explains the following, using animations and clear, easy to understand explanations:
  • Compare the two frameworks with pros and cons and a clear example of when you would choose each framework
  • How responsive web design is handled by each framewodk
  • How animations are handled by each framework
  • How color themes are handeled by each framewodk
  • Any other questions that come to your mind

Look through the material

Look at the interactive learning material your AI made for you, compare it to what it made for you when it created your design. If somethings are not adding up, have a talk with the AI about it and make it fix the learning material so it is as clear and easy to understand as can be.

Return the guide

  • The return should be a landing page with links to all of the pages you created in this project:
    • Your design, using one of the frameworkds
    • Your design again using another framework
    • The learning material that the AI made for you
  • Return the guide in io.vefskoli.is and look at what kind of learning material other students made, tell them what you think about it and if something could be clearer or easier to understand

Materials

Tailwind CSS: installation and official documentationBootstrap: getting started, components and layoutStyleX: introduction, styling and themesshadcn/ui: introduction, components and customizationSass Basics: variables, nesting, modules and mixinsweb.dev course: Learn Responsive DesignMDN tutorial: Using CSS animationsGitHub guide: prompt engineering for AI coding assistanceTailwind CSS: responsive breakpoints and mobile-first stylingTailwind CSS: theme variables and design tokensBootstrap: color modes and custom themesMDN CSS reference: verify vanilla CSS properties and behavior