Full Access Locked
You are viewing this roadmap in Preview Mode. Upgrade your membership to unlock all missions.
Your Journey
0 / 35 MissionsCSS Syntax & Selectors – Styling HTML Elements
<p> Create a CSS block inside your HTML file that changes the color of all paragraphs to blue and sets the background color of all headers to lightgray. </p> <pre> Expected Output Example: Header background: lightgray Paragraph text color: blue </pre> <p> This challenge will help you practice writing CSS rules and using selectors within the same HTML file. </p>
CSS Colors & Backgrounds – Styling Text and Page
<p> Create an HTML page where the header has a lightblue background, paragraphs have different text colors, and the page body has a lightyellow background. </p> <pre> Expected Output Example: Header background: lightblue Paragraph 1 text color: red Paragraph 2 text color: green Page background: lightyellow </pre> <p> This challenge will help you practice setting colors for text, backgrounds, and different HTML elements. </p>
CSS Typography Basics – Styling Tex
<p> Create an HTML page where you apply different font styles, sizes, and text alignment to headings and paragraphs. </p> <pre> Expected Output Example: Header: centered, bold, font-family: Arial Paragraph 1: italic, font-size: 18px Paragraph 2: normal, font-size: 16px, color: gray </pre> <p> This challenge will help you practice CSS typography properties to style text on a webpage. </p>
CSS Classes & IDs – Targeting Specific Elements
<p> Create an HTML page with multiple elements and use classes and IDs to style them differently using CSS. </p> <pre> Expected Output Example: Header with ID "main-header" has blue background Paragraphs with class "highlight" have yellow background Other paragraphs remain normal </pre> <p> This challenge will help you practice using classes and IDs to target specific elements in CSS. </p>
CSS Box Model – Understanding Element Layout
<p> Create an HTML page with a box (a div) and apply CSS to give it width, height, padding, border, and margin. Observe how each property affects the box. </p> <pre> Expected Output Example: A box with: - 200px width, 100px height - 20px padding - 5px solid black border - 30px margin </pre> <p> This challenge will help you understand the CSS Box Model and how different properties affect the layout of elements. </p>
CSS Borders & Corners – Styling Element Edges
<p> Create an HTML page with a box (a div) and apply CSS to add a border with color, thickness, style, and rounded corners. </p> <pre> Expected Output Example: A box with: - 200px width, 100px height - 3px solid red border - 15px rounded corners - Lightgray background </pre> <p> This challenge will help you practice styling borders and corners in CSS. </p>
CSS Box Shadows – Adding Depth to Elements
<p> Create an HTML page with a box (a div) and apply a shadow effect using CSS to make it look raised above the page. </p> <pre> Expected Output Example: A box with: - 200px width, 100px height - Lightgray background - Shadow offset 5px right, 5px down, blur 10px, color rgba(0,0,0,0.5) </pre> <p> This challenge will help you practice adding shadows to elements for a 3D effect. </p>
CSS Text Formatting – Styling Your Text
<p> Create an HTML page with multiple paragraphs and headings. Apply CSS to change text alignment, decoration, transform, spacing, and line height. </p> <pre> Expected Output Example: - Header: uppercase, centered, bold - Paragraph 1: italic, underlined - Paragraph 2: normal style, letter spacing 2px, line height 1.5 </pre> <p> This challenge will help you practice various CSS properties for text formatting. </p>
CSS Display Property – Controlling Element Visibility and Layout
<p> Create an HTML page with multiple elements (divs, paragraphs, and images). Use CSS <code>display</code> property to show elements as block, inline, inline-block, or hide elements using <code>none</code>. </p> <pre> Expected Output Example: - A div displayed as block - Span displayed inline - A div displayed inline-block - One paragraph hidden (display: none) </pre> <p> This challenge will help you practice controlling how elements appear and behave on a page. </p>
CSS Link States – Styling Hyperlinks
<p> Create an HTML page with multiple hyperlinks. Use CSS to style them differently for their states: normal, hover, active, and visited. </p> <pre> Expected Output Example: - Normal link: blue - Hover: green - Active (while clicking): red - Visited: purple </pre> <p> This challenge will help you practice controlling the appearance of links based on user interaction. </p>
CSS Units – Controlling Size and Spacing
<p> Create an HTML page with multiple elements (divs, paragraphs, headers) and apply different CSS units to control their width, height, font size, padding, and margin. </p> <pre> Expected Output Example: - Div width: 200px - Paragraph font-size: 1.5em - Header font-size: 20pt - Padding: 2rem - Margin: 10% </pre> <p> This challenge will help you practice using different CSS units for layout and typography. </p>
CSS Handling Overflow – Controlling Content Overflow
<p> Create an HTML page with a box (div) that contains more content than its height. Use CSS to control how the overflow is handled: visible, hidden, scroll, or auto. </p> <pre> Expected Output Example: - Box with fixed height - Content exceeds height - Overflow handled with scroll or hidden as specified </pre> <p> This challenge will help you practice controlling overflowing content in containers. </p>
CSS Flexbox Container – Layout with Flexbox
<p> Create an HTML page with a container that holds multiple items. Use CSS Flexbox on the container to arrange items horizontally, vertically, or with space distribution. </p> <pre> Expected Output Example: - Container displays items in a row - Items are spaced evenly - Items wrap to next line if container is small </pre> <p> This challenge will help you practice creating flexible layouts using CSS Flexbox. </p>
CSS Flexbox Vertical Alignment – Aligning Items Vertically
<p> Create an HTML page with a flex container holding multiple items. Use CSS Flexbox to align the items vertically in the center, top, or bottom of the container. </p> <pre> Expected Output Example: - Container height: 300px - Items centered vertically - Items spaced horizontally across the container </pre> <p> This challenge will help you practice vertical alignment using Flexbox properties. </p>
CSS Flex Direction – Controlling Flex Layout Direction
<p> Create an HTML page with a flex container and multiple items. Use CSS <code>flex-direction</code> to arrange the items in different directions: row, row-reverse, column, and column-reverse. </p> <pre> Expected Output Example: - Items arranged in a row - Items arranged in a column - Items reversed horizontally or vertically depending on direction </pre> <p> This challenge will help you practice controlling the main axis direction of a flex container. </p>
CSS Flex Wrap – Wrapping Flex Items
<p> Create an HTML page with a flex container holding multiple items. Use CSS <code>flex-wrap</code> to control whether items wrap to the next line or stay in a single line when the container is too small. </p> <pre> Expected Output Example: - Items arranged in a row - Items wrap to next line if they do not fit - No overlap or overflow outside container </pre> <p> This challenge will help you practice controlling the wrapping behavior of flex items. </p>
CSS Flex Grow – Making Flex Items Expand
<p> Create an HTML page with a flex container holding multiple items. Use CSS <code>flex-grow</code> to control how much each item expands to fill available space. </p> <pre> Expected Output Example: - Container width: 600px - Item 1 grows twice as much as Item 2 - Item 3 does not grow </pre> <p> This challenge will help you practice making flex items expand proportionally inside a flex container. </p>
CSS Grid Intro – Creating Grid Layouts
<p> Create an HTML page with a container holding multiple items. Use CSS Grid to arrange the items in rows and columns. </p> <pre> Expected Output Example: - Container with 3 columns and 2 rows - Items aligned neatly in the grid </pre> <p> This challenge will help you practice creating basic grid layouts using CSS Grid. </p>
CSS Grid Gap – Spacing Between Grid Items
<p> Create an HTML page with a CSS Grid container holding multiple items. Use <code>gap</code> to set spacing between rows and columns. </p> <pre> Expected Output Example: - Grid with 3 columns and 2 rows - 15px spacing between columns and rows - Items not touching each other </pre> <p> This challenge will help you practice adding spacing between grid items using CSS Grid. </p>
CSS Grid Spanning – Extending Items Across Rows and Columns
<p> Create an HTML page with a CSS Grid container holding multiple items. Use <code>grid-column</code> and <code>grid-row</code> to make certain items span multiple columns or rows. </p> <pre> Expected Output Example: - A grid with 3 columns and 2 rows - The first item spans 2 columns - The last item spans 2 rows </pre> <p> This challenge will help you practice making grid items occupy more space than a single cell. </p>
CSS Position Absolute – Placing Elements Precisely
<p> Create an HTML page with a container and multiple items. Use <code>position: absolute</code> to place one item at a specific position inside the container. </p> <pre> Expected Output Example: - Container with a border and fixed width/height - One item positioned at the top-right corner - Other items remain in normal flow </pre> <p> This challenge will help you practice positioning elements precisely using CSS absolute positioning. </p>
CSS Position Fixed & Sticky – Anchoring Elements
<p> Create an HTML page with multiple items. Use <code>position: fixed</code> to keep an item always visible in the viewport, and <code>position: sticky</code> to make an item stick within its parent container when scrolling. </p> <pre> Expected Output Example: - Fixed header always stays at the top of the page - Sticky item sticks at a certain point when scrolling within its container - Other items scroll normally </pre> <p> This challenge will help you practice anchoring elements using fixed and sticky positioning. </p>
Layering with Z-Index
<p> Create an HTML page with multiple overlapping elements. Use <code>z-index</code> to control which element appears on top. </p> <pre> Expected Output Example: - Three overlapping boxes - Box 3 appears above Box 2, which appears above Box 1 </pre> <p> This challenge will help you practice controlling the stacking order of elements using CSS. </p>
CSS Pseudo-Elements – Styling Specific Parts of Elements
<p> Create an HTML page with text elements. Use CSS pseudo-elements like <code>::before</code> and <code>::after</code> to add content or styling before or after an element. </p> <pre> Expected Output Example: - A paragraph with a symbol before it - A heading with a decorative line after it </pre> <p> This challenge will help you practice using pseudo-elements to enhance design without extra HTML markup. </p>
CSS :nth-child Selector – Targeting Specific Elements
<p> Create an HTML page with a list of items. Use the <code>:nth-child()</code> selector to style specific items in the list. </p> <pre> Expected Output Example: - The 2nd item has a red background - Every even item has a light gray background - Every 3rd item has bold text </pre> <p> This challenge will help you practice selecting elements based on their position in a parent container. </p>
CSS Attribute Selectors – Styling Elements by Attributes
<p> Create an HTML page with multiple input fields and links. Use CSS attribute selectors to style elements based on their attributes. </p> <pre> Expected Output Example: - Inputs with type="text" have a blue border - Inputs with type="password" have a red border - Links with target="_blank" have an underline </pre> <p> This challenge will help you practice selecting and styling elements using their attributes. </p>
CSS Transparency – Controlling Opacity of Elements
<p> Create an HTML page with multiple boxes or text elements. Use CSS to make some elements partially transparent using <code>opacity</code> or RGBA colors. </p> <pre> Expected Output Example: - Box 1 with full opacity - Box 2 partially transparent - Box 3 semi-transparent with background color using RGBA </pre> <p> This challenge will help you practice controlling the transparency of elements for design effects. </p>
CSS Gradients – Creating Smooth Color Transitions
<p> Create an HTML page with boxes or sections using CSS gradients as backgrounds. Use linear and radial gradients to create smooth color transitions. </p> <pre> Expected Output Example: - Box 1 with a linear gradient from red to yellow - Box 2 with a diagonal gradient - Box 3 with a radial gradient from blue to white </pre> <p> This challenge will help you practice creating visually appealing backgrounds using gradients. </p>
CSS Transitions – Smoothly Animate Property Changes
<p> Create an HTML page with buttons or boxes. Use CSS transitions to smoothly animate property changes, like background color, width, or opacity, when hovered over. </p> <pre> Expected Output Example: - Box changes background color smoothly on hover - Button increases in size smoothly when hovered </pre> <p> This challenge will help you practice using CSS transitions to create smooth animations without JavaScript. </p>
CSS Transforms – Rotate, Scale, Translate, and Skew Elements
<p> Create an HTML page with boxes or elements. Use CSS transforms to rotate, scale, move, or skew elements on hover or by default. </p> <pre> Expected Output Example: - Box rotates when hovered - Box scales bigger when hovered - Box moves to a new position when hovered </pre> <p> This challenge will help you practice using CSS transforms to create interactive and dynamic designs. </p>
CSS Scale Transform – Resize Elements Dynamically
<p> Create an HTML page with boxes or images. Use the CSS <code>scale()</code> transform to enlarge or shrink elements when hovered. </p> <pre> Expected Output Example: - Box enlarges smoothly on hover - Image shrinks when hovered </pre> <p> This challenge will help you practice using the scale transform to make interactive elements. </p>
CSS Keyframes – Creating Animations
<p> Create an HTML page with boxes or text elements. Use CSS <code>@keyframes</code> to animate properties like position, color, or size over time. </p> <pre> Expected Output Example: - Box moves from left to right continuously - Box changes background color smoothly </pre> <p> This challenge will help you practice using CSS animations without JavaScript. </p>
CSS Running Animations – Continuous Motion Effects
<p> Create an HTML page with elements that continuously move, rotate, or change using CSS animations. Use <code>@keyframes</code> and animation properties to create running animations. </p> <pre> Expected Output Example: - Box moves left to right infinitely - Text rotates continuously </pre> <p> This challenge will help you practice creating smooth, looping animations using CSS only. </p>
CSS Variables – Reusable Custom Properties
<p> Create an HTML page with multiple elements. Use CSS variables to define colors, fonts, or sizes, and apply them to the elements for consistent styling. </p> <pre> Expected Output Example: - All boxes use the same background color defined in a variable - Text color is consistent using a variable </pre> <p> This challenge will help you practice defining and using CSS custom properties to simplify your styles. </p>
CSS Media Queries – Responsive Design
<p> Create an HTML page with boxes or text elements. Use CSS media queries to change styles based on screen size, such as layout, colors, or font sizes. </p> <pre> Expected Output Example: - Box has one width on large screens - Box becomes smaller on screens narrower than 600px </pre> <p> This challenge will help you practice creating responsive designs that adapt to different devices. </p>
Path Completion
Complete all missions to earn your certificate of mastery.