CSS Foundations: Style Your First Web Page - Web Development (Professional Practice)

This course covers the full spectrum of modern CSS. We will guide you from the essentials of colours, text, and the box model, right through to advanced layout techniques using positioning and floats. You'll finish by mastering responsive design and adding polish with transitions and transforms. Plain HTML is functional, but great design is what truly captures attention. This course gives you the power to turn boring documents into beautiful, engaging experiences. Learn the skills to build websites that not only work well, but also look absolutely stunning on any device. This programme is designed for everyone. If you're a complete beginner, we'll give you a clear path from the ground up. For the seasoned professional, this is the perfect opportunity to sharpen your layout skills and master modern responsive techniques.

Payment required for enrolment

Enrolment valid for 12 months

This course is also part of the following learning track. You may join the track to gain comprehensive knowledge across related courses.

[Beginner] Modern Web Development Foundations - From Zero to Your First Interactive Website

This is the direct path to building professional-grade web development skills. This learning track is a comprehensive programme covering the entire modern front-end stack, engineered to take you from zero knowledge to possessing a practical, portfolio-worthy skillset. It moves logically from foundational web concepts and professional tools, through structuring content with HTML5, styling with modern CSS, and finally, building dynamic user experiences with JavaScript. This programme is built for individuals starting a career in technology with no prior coding experience. It is the essential curriculum for aspiring front-end developers, full-stack engineers, and computer science students. It also serves professionals in adjacent roles - such as UI/UX designers and product managers - who require a practical understanding of web technologies to excel in their careers. By the end of this learning track, you will have the ability to build, style, and launch a fully interactive, responsive website from a blank file. You will master the professional developer's toolkit - Git, the command line, and an AI-assisted editor - and write clean, semantic code. This track provides the foundational project and technical skills to confidently begin your career path toward junior developer roles and to build robust personal or business projects.

Course Chapters

1. Introduction

This chapter sets the stage for styling our portfolio. We will connect our stylesheet to the project and establish the core concepts and workflow you will use to bring your design to life. By the end, you will: understand the role of CSS; connect a stylesheet to your project; and be prepared to translate your visual design into code.

Chapter lessons

1-1. Welcome

8:24

This lesson provides a formal welcome to the CSS course. We will review the unstyled HTML project and outline our goal of transforming it into the professional design we generated with AI.

1-2. Preparing for CSS

5:22

This is a practical lesson on setting up your styling environment. We will create a style.css file and use the <link> tag to connect it to our index.html document.

1-3. CSS language basics

10:51

This lesson covers the fundamental syntax of CSS. We will explain the core concepts of selectors, properties, and values, which are the building blocks of all styling.

2. CSS Fundamentals

This chapter covers the fundamental 'physics' of CSS. Using simple, isolated examples, you will master the core concepts of selectors, the box model, typography, colours, and the rules of specificity before we apply them to our main project. By the end, you will: master the most common CSS selectors; define and use colours effectively; control typography; understand the box model; and explain how CSS specificity works.

Chapter lessons

2-1. Selectors

This lesson covers how to target HTML elements. We will explain element, class, and ID selectors, which are the primary tools for applying styles to your page.

2-2. Colours

We will explore the different ways to define colours in CSS. This lesson covers keywords, hexadecimal codes, and the RGB format for specifying colour values.

2-3. Length dimensions

This lesson explains absolute units like px and relative units like em, rem, and percentages. We will focus on rem as the professional standard for scalable design.

2-4. Typography

This lesson covers the core properties for controlling the appearance of text. We will learn how to use font-family, font-size, and font-weight to style your typography.

2-5. The box model

This is a critical lesson on the core concept of CSS layout. We will use simple examples to explain how every element is a box, and how to control its size and space with padding, border, and margin.

2-6. Specificity

This lesson explains how a browser decides which CSS rule to apply when multiple rules target the same element. Understanding this hierarchy is essential for debugging styles.

2-7. Introduction to responsiveness

This is a conceptual introduction to responsive design. We will explain why websites need to adapt to different screen sizes and briefly introduce the media query as the tool for doing so.

3. Applying Core Styles

This chapter is our bridge from theory to practice. We will take the fundamental concepts you have just learned and apply them for the first time to our portfolio project, setting up the global styles that will define the entire look and feel of the page. By the end, you will: create and use CSS variables for your brand colours; and apply the foundational background, colour, and font styles to your project.

Chapter lessons

3-1. Project setting CSS variables

We will learn the professional habit of storing our brand colours in CSS variables. This allows for easy reuse and consistency throughout our project stylesheet.

3-2. Project global styles

We will write our first block of project CSS. This lesson covers setting the foundational background, colour, font, and box-sizing properties for our <body>.

4. Layout with Flexbox

This chapter introduces Flexbox, the essential tool for modern layouts. We will use it to arrange and align the components of our portfolio page, transforming our vertical stack of elements into a professional layout that matches our design. By the end, you will: understand the core concepts of Flexbox; align items horizontally and vertically; and build the main layouts for our portfolio's header, hero, and skills sections.

Chapter lessons

4-1. Introduction to Flexbox

This lesson explains the 'why' behind Flexbox and introduces the core display: flex property. We will cover the main concepts of the main axis and the cross axis.

4-2. Aligning flex items

We will learn how to control the position of items along both axes. This lesson covers justify-content for main-axis alignment and align-items for cross-axis alignment.

4-3. Project header layout

This is a practical lesson where we will use Flexbox to style our portfolio header, placing the logo on the left and the navigation links on the right.

4-4. Project hero layout

We will use Flexbox to create the two-column layout for our hero section, placing the headshot on one side and the name and tagline on the other.

4-5. Project skills grid

This lesson uses Flexbox with the flex-wrap property to create the responsive grid-like layout for our skills icons and project cards.

5. Styling the Components

With our main layout in place, this chapter focuses on styling the individual components of our portfolio. We will add the visual polish to our project cards, experience table, and contact form to make them match our design. By the end, you will: style the project cards with spacing and colour; add hover effects to interactive elements; and apply styling to make the experience table and form readable and professional.

Chapter lessons

5-1. Styling project cards

This lesson focuses on making our project cards look professional. We will use padding, background colours, and borders to style the <div> containers for each card.

5-2. Understanding pseudo-classes

This lesson introduces pseudo-classes, specifically :hover. You will learn how to change an element's style when a user moves their mouse over it.

5-3. Project hover effects

We will apply our knowledge of pseudo-classes to our project, adding a subtle hover effect to our links and project card buttons to improve user experience.

5-4. Styling the table

We will learn how to apply basic styles to our <table> element, adjusting padding and borders to make the data clean and easy to read.

5-5. Styling the form

This lesson covers the basics of styling form elements, applying consistent styles to our input fields and submit button.

6. Advanced Responsive Design

A professional website must look great on all devices. This chapter is a deep dive into the practical application of responsive design, ensuring our portfolio layout adapts perfectly from large desktop screens to small mobile phones. By the end, you will: understand the mobile-first design approach; write media queries to apply styles based on screen size; and make your portfolio project fully responsive.

Chapter lessons

6-1. Mobile-first approach

This lesson explains the modern professional workflow for responsive design. We will discuss why we should write our styles for mobile devices first, and then adapt them for larger screens.

6-2. Using media queries

We will learn the core tool of responsive design: the media query. This lesson explains how to write a @media rule that applies CSS only when the screen is a certain size.

6-3. Project responsive layout

This is a practical lesson where we will write our first media query to change our multi-column layouts into a single column on mobile screens.

6-4. Project responsive navigation

This is the capstone lesson for this chapter. We will use display: none within a media query to hide the desktop navigation and show the hamburger menu icon instead.

7. Conclusion

This concluding chapter summarises your significant achievements. We will review the fully styled, responsive portfolio you have built and look ahead to the next logical step: making it interactive with JavaScript. By the end, you will: appreciate the professional, styled, and responsive website you have created; and understand the role of JavaScript in bringing your static design to life.

Chapter lessons

7-1. What you built

This lesson provides a comprehensive recap of your journey, from an unstyled HTML document to a complete, professionally styled, and responsive portfolio page.

7-2. Your next step

This final lesson serves as a motivational look ahead to the next course, 'JavaScript Foundations,' where you will make your navigation menu and contact form fully functional.