Full Access Locked
You are viewing this roadmap in Preview Mode. Upgrade your membership to unlock all missions.
Your Journey
0 / 13 MissionsHTML Text and Paragraphs – Structuring Content
<p> Create an HTML page that contains at least two paragraphs. Each paragraph should have some meaningful text. </p> <pre> Expected Output Example: This is the first paragraph. This is the second paragraph. </pre> <p> This challenge will help you practice adding text and paragraphs to an HTML page. </p>
HTML Images – Adding Pictures to Your Page
<p> Create an HTML page that displays an image using the <code><img></code> tag. Add an alternate text for the image. </p> <pre> Expected Output Example: [Image is displayed on the page with alternate text "My Picture"] </pre> <p> This challenge will help you practice adding images to your HTML page. </p>
HTML Links and Anchors – Connecting Web Pages
<p> Create an HTML page that contains a link to an external website and another link that points to a section on the same page. </p> <pre> Expected Output Example: Visit Google Go to Section </pre> <p> This challenge will help you practice creating links and using anchors in HTML. </p>
HTML Ordered and Unordered Lists – Organizing Items
<p> Create an HTML page that contains an unordered list with three items and an ordered list with three items. </p> <pre> Expected Output Example: - HTML - CSS - JavaScript 1. Learn HTML 2. Practice CSS 3. Build Projects </pre> <p> This challenge will help you practice creating lists in HTML using both bullet points and numbers. </p>
HTML Forms – Inputs & Buttons
<p> Create an HTML form that asks the user for their name and email, and includes a submit button. </p> <pre> Expected Output Example: Name: [__________] Email: [__________] [Submit] </pre> <p> This challenge will help you practice creating basic forms with input fields and buttons in HTML. </p>
HTML Semantic Structure – Organizing Content Meaningfully
<p> Create an HTML page using semantic tags: <code><header></code>, <code><nav></code>, <code><main></code>, <code><section></code>, <code><article></code>, and <code><footer></code>. </p> <pre> Expected Output Example: Header: My Website Navigation: Home | About | Contact Main Section with articles Footer: © 2025 My Website </pre> <p> This challenge will help you structure your HTML content in a meaningful, semantic way. </p>
HTML Divs and Spans – Grouping and Styling Content
<p> Create an HTML page using a <code><div></code> to group a heading and paragraph, and use a <code><span></code> to style a word inside the paragraph. </p> <pre> Expected Output Example: Welcome to My Page This is a <span>highlighted</span> word in the paragraph. </pre> <p> This challenge will help you practice using <code><div></code> and <code><span></code> to structure and style content. </p>
HTML IDs and Classes – Targeting Elements for Styling
<p> Create an HTML page with two paragraphs: one with a unique ID and one with a shared class. Apply different styles to each using CSS. </p> <pre> Expected Output Example: Paragraph 1 (styled differently) Paragraph 2 (styled the same as Paragraph 3) Paragraph 3 (styled the same as Paragraph 2) </pre> <p> This challenge will help you understand how to use IDs and classes to target elements for styling. </p>
HTML Tables – Organizing Data in Rows and Columns
<p> Create an HTML page with a table that has 3 columns (Name, Age, City) and 3 rows of data. </p> <pre> Expected Output Example: Name Age City Alice 25 Paris Bob 30 London Charlie 28 New York </pre> <p> This challenge will help you practice creating tables to display structured data in HTML. </p>
HTML Checkboxes and Radio Buttons – User Selections
<p> Create an HTML form that includes a group of checkboxes for selecting hobbies and a group of radio buttons to select gender. </p> <pre> Expected Output Example: Hobbies: [ ] Reading [ ] Traveling [ ] Cooking Gender: (o) Male ( ) Female </pre> <p> This challenge will help you practice using checkboxes and radio buttons to allow multiple and single selections in forms. </p>
HTML Dropdowns and Textareas – User Input Fields
<p> Create an HTML form that includes a dropdown menu for selecting a country and a textarea for writing a short message. </p> <pre> Expected Output Example: Country: [Dropdown: USA, Canada, UK] Message: [Textarea for user input] </pre> <p> This challenge will help you practice using dropdowns and textareas to collect user input. </p>
HTML Multimedia – Adding Video
<p> Create an HTML page that embeds a video which can be played, paused, and supports controls. </p> <pre> Expected Output Example: [Video Player with play, pause, and volume controls] </pre> <p> This challenge will help you practice adding video content to your webpage. </p>
HTML Comments – Adding Notes in Code
<p> Add comments in your HTML page to explain the purpose of each section: header, main content, and footer. </p> <pre> Expected Output Example: [No visible output in the browser, but comments exist in the HTML code] </pre> <p> This challenge will help you practice adding comments to make your HTML code more readable and maintainable. </p>
Path Completion
Complete all missions to earn your certificate of mastery.