CSS Foundations: Style Your First Web Page - Web Development (Professional Practice)
4
14 hrs
[Beginner] Modern Web Development Foundations - From Zero to Your First Interactive WebsiteThis 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.
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. Introduction3
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. Welcome8:24
1-2. Preparing for CSS5:22
2. CSS Fundamentals7
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. Selectors32:35
2-2. Colours16:57
2-3. Length dimensions37:48
2-4. Typography31:53
2-5. The box model30:46
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. Specificity24:45
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 responsiveness12:41
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. Setting Global Styles3
This chapter covers the critical initial setup for any professional web project. You'll establish a consistent styling foundation, ensuring your design appears predictably across all browsers, and centralize core design values for efficient project management. By the end of the chapter, you will master CSS resets, define global design tokens, and integrate custom web fonts to precisely match your design's aesthetic.
Chapter lessons
3-1. CSS reset32:16
Learn to organize your stylesheet for simplicity and apply a robust CSS reset, providing a clean, predictable design canvas across all browsers.
3-2. Global CSS variables39:56
Establish a centralized design system by defining global colors, font families, and spacing units as CSS variables, directly from your design for consistency.
3-3. Web fonts18:40
Integrate custom web fonts, like Google Fonts, into your project, ensuring your font variables correctly display the intended typefaces.
4. Layout with Flexbox6
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. Introduction12:22
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 items15:55
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. Header layout56:49
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. Hero layout39:19
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. Skills and projects grids24:22
This lesson uses Flexbox with the flex-wrap property to create the responsive grid-like layout for our skills icons and project cards.
4-6. Footer layout12:55
Construct the portfolio's footer, integrating copyright information and social media icons. Learn to use Flexbox to create a responsive, cleanly aligned footer for both mobile and desktop views.
5. Styling the Components4
With the main page layout complete, this chapter focuses on styling individual components. We will apply the visual polish required to transform our raw structure into a professional user interface, moving from broad architecture to detailed aesthetics. Key topics include styling cards with shadows and spacing, making tables readable with custom borders and colours, creating consistent form elements, and adding interactive hover effects with transitions.
Chapter lessons
5-1. Styling project cards43:41
This lesson transforms the raw project list items into professional card components. We will apply backgrounds, padding, and a box-shadow to create a clean, self-contained layout for each project, a fundamental skill for organising content in modern web design.
5-2. Styling the table18:24
This lesson transforms the default HTML table to improve data clarity. We will use border-collapse, cell padding, and header styling to make the tabular data professional and easy to scan, a critical skill for presenting information effectively.
5-3. Styling the form33:57
This lesson tackles inconsistent browser default styles for forms. We will apply uniform styling to all inputs, create a clear call-to-action button, and implement :focus states to deliver a professional and user-friendly experience.
5-4. Interactivity with pseudo-classes19:29
A static site lacks professional polish. This lesson introduces the :hover pseudo-class and transition property to add smooth, interactive feedback to buttons and cards, making the user interface feel responsive and professional.
6. Element Context2
This chapter covers the position property, a tool for taking elements out of the normal document flow. While Flexbox manages the main layout, mastering positioning is essential for creating complex, layered user interfaces like sticky headers and overlay menus. Key topics include using the position property's values (sticky, absolute, relative), creating positioning contexts to anchor elements, and managing overlapping layers with the z-index property to control stacking order.
Chapter lessons
6-1. Positioning29:07
This lesson focuses on creating a sticky header that remains visible during scroll. You will use the position: sticky property to achieve this, while also learning how it compares to other core positioning values like fixed and absolute.
6-2. Stacking context27:34
This lesson tackles the creation of an overlay menu for mobile devices. You will use position: absolute to detach the menu from the document flow and the z-index property to control the stacking context it creates, ensuring it always appears on top of other content.
7. Conclusion2
This final chapter provides a comprehensive review of the project and a clear roadmap for your continued learning. We will recap the key CSS concepts applied to build the portfolio page and look ahead to the next steps in your journey as a web developer. Key topics include a review of the responsive layouts and styled components you created. We will then outline a path for further practice, introduce advanced CSS concepts like Grid and animations, and explain how JavaScript will bring your project to life.
Chapter lessons
7-1. What you built5:31
This lesson provides a final review of the complete portfolio project. We will trace the journey from an unstyled HTML document to a fully responsive webpage, reinforcing the core layout, styling, and positioning techniques you have mastered.
7-2. Your next step8:14
This lesson provides a clear roadmap for your continued development. You will receive specific project ideas for immediate practice, an introduction to advanced CSS topics like Grid and animations, and a look ahead to the next course on JavaScript.