the build log · view source welcome
FCC BUILD ARCHIVE
This is an archive of everything i've built and shipped from the freeCodeCamp Responsive Web Design v9 Curriculum & Legacy Responsive Web Design V8 Courses.
Everything built on this page include all Workshops, Labs, and Certification Projects (work-in-progress) — chronologically logged from the first to the very last, every line commented and explained. each build shows the code, with a clickable preview tab.
If you are interested in some displays showcasing a bunch of HTML & CSS Fundamentals as well as two builds for The Odin Project, head on over to the Sandbox and peruse all of what i had built from scratch!
*NOTICE: all of the following builds below were intended for my own archival educational purposes. however, do feel free to "steal" any of them and use them however you see fit.
— Enjoy! ^_^
▸ Responsive Web Design v9 30 built · 67 total · worked chronologically
▸ HTML Basic HTML 13 items · 13 built
▸ rwd workshop Build a Curriculum Outline html
html
<h1>Welcome to freeCodeCamp</h1> <!-- the h1 element is commonly utilized as the webpages title -->
<h2>Full-Stack Curriculum</h2> <!-- This is a subheading. -->
<p>Learn the skills to become a full-stack developer</p> <!-- This is a paragraph element. -->
<h3>Introduction to HTML</h3> <!-- used to create sub-subsections under an h2 section -->
<p>HTML represents the content and structure of a webpage</p>
<h3>Introduction to CSS</h3>
<p>CSS is used to style a webpage</p>
<h3>Introduction to JavaScript</h3>
<p>JavaScript adds interactivity to a webpage</p>preview
▸ rwd lab Debug Camperbot’s Profile Page html
code
<h1>Hello from Camperbot!</h1> <!-- h1 is the main title element -->
<h2>About</h2> <!-- h2 is th e first subheading after the main title element h1. as per fCC Instructions: h2 element tags used instead of heading2 because heading2 does not exist. -->
<p>My name is Camperbot and I love learning new things.</p> <!-- p element defines a paragraph of text. as per fCC Instructions: p element tags used instead of pp because pp element tags do not exist. -->
<h3>Background and Interests</h3> <!-- as per fCC instructions /h3 closing tag used to replace incorrect syntax tag of h3/ -->
<p>I enjoy solving puzzles.</p> <!-- as per fCC Instructions: p element tags used instead of pp because pp element tags do not exist. -->preview
▸ rwd lab Debug a Pet Adoption Page html
preview not shown due to fCC lab's use of internal photos
<h1>Welcome to XYZ Pet Adoption!</h1>
<p>Consider adopting a pet today. We have cats, dogs, rabbits and more.</p>
<h2>See our cats!</h2>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Two tabby kittens sleeping together on a couch."> <!-- as per fCC Lab Tests: src used instead of href which is the appropriate attribute to link an external URL) to a page. alt used instead of att which is the appropriate attribute to describe an img element. closing img tag removed is a void element(does not need a closing tag) -->
<h2>Adopt a cat!</h2>
<a href="/cats">Visit cats page</a> <!-- as per fCC Lab Tests: href used instead of src which is appropriate attribute used to link an <a> element to a URL -->
<h2>Adopt a dog!</h2>
<a href="/dogs">Visit dogs page</a> <!-- as per fCC Lab Tests: href used instead of src because href is appropriate attribute used to link an <a> element to a URL-->▸ rwd workshop Build a Cat Photo App html
code
<!DOCTYPE html> <!-- tells browsers that the document is an HTML5 document-->
<html lang="en"> <!-- html element defines the root of an HTML document. lang attribute sets the language. en value sets language to English -->
<head> <!-- element contains meta information about the webpage -->
<meta charset="UTF-8"> <!-- meta element specifies the character encoding for the HTML document. charset attribute is the character encoding. UTF-8 value is the standard encoding and can encode mostly all characters, symbols, and emoji -->
<title>CatPhotoApp</title> <!-- determines what browsers show in the title bar or tab for the page -->
</head>
<body>
<main> <!-- identifies the main section of webpage -->
<h1>CatPhotoApp</h1> <!-- main title of webpage -->
<section> <!-- defines a section of the webpage -->
<h2>Cat Photos</h2> <!-- second-level heading (subtitle of webpage) -->
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p> <!-- anchor element adds a link to cat photos website. _blank opens link in new tab -->
<a href="https://freecatphotoapp.com"> <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."> <!-- anchor element around the image links image to cat photos website. element adds image. alt attribute describes the image -->
</a>
</section>
<section> <!-- defines a section of the webpage -->
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul> <!-- unordered list element creates a bulleted list -->
<li>catnip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<figure> <!-- figure element groups an image with a caption -->
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
<figcaption>Cats <em>love</em> lasagna.</figcaption> <!-- caption element provides a description for the image. em places emphasises on text -->
</figure>
<h3>Top 3 things cats hate:</h3>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<figure>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Two tabby kittens sleeping together on a couch.">
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
</figure>
</section>
</main>
<footer> <!-- defines footer for a webpage or section which usually contains info about the author of the webpage, copyright data, links to terms of use, contact information, and more. -->
<p>
No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
</p>
</footer>
</body>
</html>preview
▸ rwd lab Build a Recipe Page html
code
<!DOCTYPE html> <!-- tells browsers that the document is an HTML5 document-->
<html lang="en"> <!-- html element defines the root of an HTML document. lang attribute sets the language. en value sets language to English -->
<head> <!-- element contains informatiion about the document for the browser, such as metadata, the title. This content is not displayed on the page -->
<meta charset="UTF-8"> <!-- meta element specifies the character encoding for the HTML document. charset attribute is the character encoding. UTF-8 value is the standard encoding and can encode mostly all characters, symbols, and emoji -->
<title>Classic Pancakes Recipe</title> <!-- determines what browsers show in the title bar or tab for the page -->
</head>
<body> <!-- contains information about the document for the browser, such as metadata and the title (links to stylesheets and scripts will be learned in later in the fCC curriculum) This content is not displayed on the page -->
<h1>Classic Pancakes</h1> <!-- main title of webpage -->
<p>Fluffy, golden pancakes made from scratch, perfect for a warm and satisfying homemade breakfast.</p> <!-- contains a paragraph of text -->
<img src="https://cdn.freecodecamp.org/curriculum/labs/recipe.jpg" alt="A stack of golden pancakes topped with syrup and berries"> <!-- img element displays an image. src attribute points to the image file. alt attribute provides alternative text for screen readers and displays if/when the image cannot load -->
<h2>Ingredients</h2> <!-- second-level heading -->
<ul> <!-- creates a bulleted list -->
<li>1 cup all-purpose flour</li> <!-- list item -->
<li>2 tablespoons sugar</li>
<li>1 teaspoon baking powder</li>
<li>1/2 teaspoon baking soda</li>
<li>1/4 teaspoon salt</li>
<li>1 cup buttermilk</li>
<li>1 large egg</li>
<li>2 tablespoons melted butter</li>
</ul>
<h2>Instructions</h2>
<ol> <!-- creates a numbered (ordered) list -->
<li>In a large bowl, whisk together the flour, sugar, baking powder, baking soda, and salt.</li>
<li>In another bowl, whisk together the buttermilk, egg, and melted butter.</li>
<li>Pour the wet ingredients into the dry ingredients and stir until just combined.</li>
<li>Heat a griddle over medium heat and pour 1/4 cup of batter for each pancake.</li>
<li>Cook until bubbles form on the surface, then flip and cook until golden brown.</li>
</ol>
</body>
</html>preview
▸ rwd workshop Build a Bookstore Page html
code
<!DOCTYPE html> <!-- tells browsers that the document uses HTML5 -->
<html lang="en"> <!-- html element defines the root of an HTML document. lang attribute sets the language. en value sets language to English -->
<head> <!-- contains metadata about the document, such as its title and character encoding -->
<meta charset="UTF-8"> <!-- meta element specifies the character encoding for the HTML document. charset attribute is the character encoding. UTF-8 value is the standard encoding and can encode mostly all characters, symbols, and emoji -->
<title>XYZ Bookstore Page</title> <!-- determines what browsers show in the title bar or tab for the page -->
</head>
<body> <!-- contains the visible webpage content that users see and interact with -->
<h1>XYZ Bookstore</h1> <!-- the main heading of the webpage -->
<p>Browse our collection of amazing books!</p> <!-- contains a paragraph of text -->
<div class="card-container"> <!-- div element groups related content. class attribute assigns a reusable name that can be shared by multiple elements for styling or selection -->
<div class="card" id="sally-adventure-book"> <!-- class can be reused across multiple book cards. id uniquely identifies this specific card -->
<h2>Sally's SciFi Adventure</h2>
<p>This is an epic story of Sally and her dog Rex as they navigate through other worlds.</p>
<button class="btn">Buy Now</button> <!-- button element creates an interactive control. class="btn" groups buttons that may share styling -->
</div>
<div class="card" id="dave-cooking-book">
<h2>Dave's Cooking Adventure</h2>
<p>This is the story of Dave as he learns to cook everything from pancakes to pasta, one recipe at a time.</p>
<button class="btn">Buy Now</button>
</div>
</div>
<p>Review your selections and continue to checkout.</p>
<div class="btn-container"> <!-- groups the cart and checkout navigation buttons together -->
<button class="btn" id="view-cart-btn">View Cart</button> <!-- this button shares the reusable btn class -->
<button class="btn" id="checkout-btn">Checkout</button>
</div>
</body>
</html>preview
▸ rwd lab Build a Travel Agency Page html
code
<!DOCTYPE html> <!-- tells browsers that the document uses HTML5 -->
<html lang="en"> <!-- html element defines the root of an HTML document. lang attribute sets the language. en value sets language to English -->
<head> <!-- contains metadata about the document, such as its title and character encoding -->
<meta charset="UTF-8"> <!-- meta element specifies the character encoding for the HTML document. charset attribute is the character encoding. UTF-8 value is the standard encoding and can encode mostly all characters, symbols, and emoji -->
<title>Travel Agency Page</title> <!-- determines what browsers show in the title bar or tab for the page -->
</head>
<body> <!-- contains the visible webpage content that users see and interact with -->
<header> <!-- contains introductory content, typically a group of introductory or navigational aids -->
<h1>Wanderlust Travel Agency</h1> <!-- main heading of the webpage -->
<p>Discover breathtaking destinations around the globe and let us help you plan the trip of a lifetime.</p> <!-- contains a paragraph of text -->
</header>
<main> <!-- contains the main content of the document. there should be only one main element per document -->
<h2>Packages</h2> <!-- represents a subheading of the webpage -->
<p>We offer a variety of travel packages tailored to fit every type of traveler and budget.</p>
<ul> <!-- creates an unordered list of items -->
<li><a href="https://www.freecodecamp.org/learn" target="_blank">Group Travels</a></li> <!-- li element represents a list item. a element creates a hyperlink. href attribute specifies the URL of the page the link goes to. target="_blank" opens the link in a new tab or window -->
<li><a href="https://www.freecodecamp.org/learn" target="_blank">Private Tours</a></li>
</ul>
<h2>Top Itineraries</h2>
<figure> <!-- represents self-contained content, often with a caption -->
<a href="https://www.freecodecamp.org/learn" target="_blank">
<img src="https://cdn.freecodecamp.org/curriculum/labs/colosseo.jpg" alt="The Colosseum in Rome, Italy"> <!-- img element embeds an image into the document. src attribute specifies the path to the image. alt attribute provides alternative text for the image if it cannot be displayed -->
</a>
<figcaption>Explore the ancient wonders of Rome, Italy.</figcaption> <!-- provides a caption or legend for the content of the figure -->
</figure>
<figure>
<a href="https://www.freecodecamp.org/learn" target="_blank">
<img src="https://cdn.freecodecamp.org/curriculum/labs/alps.jpg" alt="Snow-capped peaks of the Alps">
</a>
<figcaption>Hike through the stunning peaks of the Alps.</figcaption>
</figure>
<figure>
<a href="https://www.freecodecamp.org/learn" target="_blank">
<img src="https://cdn.freecodecamp.org/curriculum/labs/sea.jpg" alt="Crystal clear sea and coastline">
</a>
<figcaption>Relax on the shores of a crystal-clear sea.</figcaption>
</figure>
</main>
</body>
</html>preview
▸ rwd workshop Build an HTML Music Player html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Working with the HTML Audio Element</title>
</head>
<body>
<h1>freeCodeCamp Tunes</h1>
<h2>Can't Stay Down</h2>
<p>Artist: Quincy Larson</p>
<audio src="https://cdn.freecodecamp.org/curriculum/js-music-player/can't-stay-down.mp3" loop controls></audio> <!-- audio element is used to embed sound content in documents. loop attribute makes the audio play in a loop. controls attribute displays the audio controls. loop and controls are boolean values that do not need values -->
<h2>Cruising for a Musing</h2>
<p>Artist: Quincy Larson</p>
<audio src="https://cdn.freecodecamp.org/curriculum/js-music-player/cruising-for-a-musing.mp3" loop controls></audio>
<h2>Scratching the Surface</h2>
<p>Artist: Quincy Larson</p>
<audio src="https://cdn.freecodecamp.org/curriculum/js-music-player/scratching-the-surface.mp3" loop controls></audio>
</body>
</html>preview
▸ rwd workshop Build an HTML Video Player html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Working with the HTML Video Element</title>
</head>
<body>
<h1>Working with the HTML Video Element</h1>
<video
width="640"
loop
controls
muted
poster="https://cdn.freecodecamp.org/curriculum/labs/past-event2.jpg"
> <!-- video is a replaced element that adds a video player to your webpage. width attribute sets the width of the video player. loop attribute makes the video play in a loop. controls attribute adds play, pause, and volume controls. muted attribute mutes the audio. poster attribute sets the image that will be displayed before the video starts playing. -->
<source
src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4"
type="video/mp4"
> <!-- source element specifies the video file and its format. type attribute specifies the format of the video file. video/mp4 value is the format for MP4 videos. -->
<source
src="https://cdn.freecodecamp.org/curriculum/labs/mapmethod.webm"
type="video/webm"
> <!-- video/webm value is the format for WebM videos. -->
<source
src="https://cdn.freecodecamp.org/curriculum/labs/mapmethod.ogg"
type="video/ogg"
> <!-- video/ogg value is the format for OGG videos. -->
<source
src="https://cdn.freecodecamp.org/curriculum/labs/mapmethod.mov"
type="video/quicktime"
> <!-- video/quicktime value is the format for QuickTime videos. -->
</video>
</body>
</html>preview
▸ rwd lab Build an HTML Audio and Video Player html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>HTML Audio and Video Lab</title>
</head>
<body>
<h1>My Favorite Video and Song</h1> <!-- h1 element defines the main heading of the page. -->
<section> <!-- section element groups related content together. -->
<h2>Learning to Code</h2> <!-- h2 element defines a subheading for the section. -->
<video controls width="640"> <!-- video element adds a video player to your webpage. controls attribute adds play, pause, and volume controls. width attribute sets the width of the video player. -->
<source src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4" type="video/mp4"> <!-- source element specifies the video file and its format. src attribute specifies the path to the video file. type attribute specifies the format of the video file. video/mp4 value is the format for MP4 videos. -->
</video>
</section>
<section>
<h2>Sailing Away</h2>
<audio controls loop src="https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3"></audio> <!-- audio element adds an audio player to your webpage. controls attribute adds play, pause, and volume controls. loop attribute makes the audio play in a loop. src attribute specifies the path to the audio file. -->
</section>
</body>
</html>preview
▸ rwd workshop Build a Heart Icon html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Heart Icon</title>
</head>
<body>
<svg width="24" height="24" viewBox="0 0 24 24" fill="red"> <!-- svg element defines a scalable vector graphic. width and height attributes set the dimensions of the SVG. viewBox attribute defines the coordinate system for the SVG. fill attribute sets the fill color for the shapes within the SVG. -->
<path
d="M12 21s-6-4.35-9.33-8.22C-.5 7.39 3.24 1 8.4 4.28 10.08 5.32 12 7.5 12 7.5s1.92-2.18 3.6-3.22C20.76 1 24.5 7.39 21.33 12.78 18 16.65 12 21 12 21z"
></path> <!-- path element defines the shape of the heart icon using a series of coordinates and commands. The d attribute contains the path data that describes the outline of the heart shape. -->
</svg>
</body>
</html>preview
▸ rwd workshop Build a Video Display Using iframe html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Display Videos in an iframe</title>
</head>
<body>
<h1>iframe Video Display</h1>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/I0_951_MPE0"
allow="accelerometer autoplay clipboard-write encrypted-media gyroscope web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
>
</iframe> <!-- iframe element embeds a video file into the page. width and height attributes set the dimensions of the iframe. src attribute specifies the path to the video file. allow attribute specifies which features are allowed for the iframe content. referrerpolicy attribute controls how much referrer information is sent with requests made from the iframe. allowfullscreen attribute allows the iframe content to be displayed in fullscreen mode. -->
</body>
</html>preview
▸ rwd lab Build a Video Compilation Page html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Video Compilation Page</title>
</head>
<body> <!-- sets the body of the document -->
<main> <!-- sets the main content area -->
<h1>Guerz's fCC video compilation</h1> <!-- main heading -->
<p>welcome to Guerz's page! enjoy the videos! ^_^</p> <!-- paragraph element provides a brief introduction to the page -->
<section> <!-- section element groups related content together -->
<h2>first compilation</h2> <!-- heading for the first section -->
<p>this is the first paragraph.</p>
<iframe
src="first-compilation.mp4"
title="guerz's first"
height="315"
width="560">
</iframe> <!-- iframe element embeds a video file into the page. src attribute specifies the path to the video file. title attribute provides a descriptive title for the iframe content. height and width attributes set the dimensions of the iframe. -->
</section>
<section>
<h2>second compilation</h2>
<p>this is the second paragraph.</p>
<iframe
src="second-compilation.ogg"
title="guerz's second compilation"
height="315"
width="560">
</iframe>
</section>
<section>
<h2>third compilation</h2>
<p>this is the third compilation.</p>
<iframe
src="third-compilation.webm"
title="guerz's third compilation"
height="315"
width="560">
</iframe>
</section>
</body>
</html>preview
▸ HTML Semantic HTML 4 items · 4 built
▸ rwd workshop Build a List of Major Web Browsers html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>List of Browsers and Descriptions</title>
</head>
<body>
<h1>List of Major Web Browsers</h1>
<dl> <!-- dl element for defining a list of terms and their descriptions -->
<dt>Google Chrome</dt> <!-- dt element for defining a term -->
<dd>This is a free web browser developed by Google and first released in 2008.</dd> <!-- dd element for defining a description -->
<dt>Firefox</dt>
<dd>This is a free web browser developed by the Mozilla Corporation and first created in 2004.</dd>
<dt>Safari</dt>
<dd>This browser was developed by Apple and is the default browser for iPhone, iPad and Mac devices.</dd>
<dt>Brave</dt>
<dd>This is a free web browser first released in 2016 that is based on the Chromium web browser.</dd>
<dt>Arc</dt>
<dd>This is a free Chromium-based web browser first released in 2023 by The Browser Company.</dd>
</dl>
</body>
</html>preview
▸ rwd workshop Build Quincy’s Job Tips Page html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Quincy's Tips for Getting a Developer Job</title>
</head>
<body>
<h1>Quincy's Tips for Getting a Developer Job</h1>
<p>
Learning to code is hard, but as Quincy Larson says,
<q cite="https://www.freecodecamp.org/news/learn-to-code-book/">You can become a developer.</q> <!-- q element for quoting a short inline quote -->
</p>
<main>
<section>
<h2>Envisioning Success</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/"> <!-- blockquote element for quoting a longer passage. cite attribute provides a link to the source -->
Can you imagine what it would be like to be a successful developer? To have built software systems that people rely upon?
</blockquote>
<p>
—Quincy Larson, <cite>How to Learn to Code and Get a Developer Job [Full Book]</cite> <!-- cite element for citing a source. — is the em dash entity -->
</p>
</section>
<section>
<h2>Importance of Networking</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
<p>So much of getting a job is who you know.</p>
<p>It's OK to be an introvert, but you do need to push your boundaries.</p>
<p>Create GitHub, Twitter, LinkedIn, and Discord accounts.</p>
<p>Go to tech meetups and conferences. Travel if you have to.</p>
</blockquote>
</section>
<section>
<h2>Importance of Building a Reputation</h2>
<blockquote cite="https://www.freecodecamp.org/news/learn-to-code-book/">
<p>Share short video demos of your projects.</p>
<p>Keep applying to speak at bigger and bigger conferences.</p>
<p>Hang out at hackerspaces and help people who are even newer to coding than you.</p>
</blockquote>
</section>
</main>
</body>
</html>preview
▸ rwd workshop Build a Cat Blog Page html
code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mr. Whiskers' Blog</title>
<meta charset="UTF-8" />
</head>
<body>
<header>
<h1>Welcome to Mr. Whiskers' Blog Page!</h1>
<figure>
<img
src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"
alt="a cat in the garden"
/>
<figcaption>Mr. Whiskers in the Garden</figcaption>
</figure>
<nav> <!-- nav element defines a navigation section -->
<ul>
<li><a href="#about">About</a></li>
<li><a href="#posts">Posts</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section id="about">
<h2>About</h2>
<p>
Hi there! I'm Jane Doe, a passionate writer who finds endless inspiration in the antics of my beloved cat, Mr. Whiskers.
</p>
<p>
His playful nature and boundless energy keep me on my toes. I love him so much.
</p>
</section>
<section id="posts">
<h2>Posts</h2>
<article> <!-- article element defines a self-contained piece of content -->
<h3>Mr. Whiskers' First Day Home</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
</p> <!-- Lorem ipsum defines placeholder text -->
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
</p>
</article>
<article>
<h3>Mr. Whiskers' First Bath</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
</p>
</article>
<article>
<h3>Mr. Whiskers' First Birthday Party</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae
quidem voluptatum quas. Quisquam quod, voluptates, quae, quos
quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.
</p>
</article>
</section>
</main>
<footer>
<section id="contact">
<h2>Contact</h2>
<address> <!-- address element defines contact information -->
<p>Phone: <a href="tel:5555555555">555-555-5555</a></p> <!-- tel: value allows users to call the number directly from their device -->
<p>Email: <a href="mailto:fake@email.com">fake@email.com</a></p> <!-- mailto: value allows users to send an email directly from their device -->
</address>
</section>
</footer>
</body>
</html>preview
▸ rwd lab Build an Event Hub html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Event Hub</title>
</head>
<body>
<header>
<h1>Event Hub</h1>
<nav>
<ul>
<li><a href="#upcoming-events">Upcoming Events</a></li>
<li><a href="#past-events">Past Events</a></li>
</ul>
</nav>
</header>
<main>
<section id="upcoming-events">
<h2>Upcoming Events</h2>
<article>
<h3>{decompress}</h3>
<p>June 9, 2027 - meditate to bass weight</p>
</article>
<article>
<h3>{d} after hours</h3>
<p>June 9, 2027 - for the stamina crewdem</p>
</article>
</section>
<section id="past-events">
<h2>Past Events</h2>
<article>
<h3>Pockets [Reunion Set - From Open to Whenever-You-Leave]</h3>
<p>March 20, 2026 - Fern. Guerz. You're Welcome.</p>
<img src="https://cdn.freecodecamp.org/curriculum/labs/past-event1.jpg" alt="Bedroom DJs all night long in your Pockets">
</article>
<article>
<h3>Gathering Fine Wool</h3>
<p>3 Guitars. 1 Drummer. No Bass. No Vocals. Eyes Down.</p>
<img src="https://cdn.freecodecamp.org/curriculum/labs/past-event2.jpg" alt="Wonder.">
</article>
</section>
</main>
</body>
</html>preview
▸ HTML Forms and Tables 4 items · 4 built
▸ rwd workshop Build a Hotel Feedback Form html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Hotel Feedback Form</title>
</head>
<body>
<header>
<h1>Hotel Feedback Form</h1>
<p>
Thank you for staying with us. Please provide feedback on your recent
stay.
</p>
</header>
<main>
<form method="POST" action="https://hotel-feedback.freecodecamp.org">
<fieldset> <!-- fieldset defines a group of related form elements -->
<legend>Personal Information</legend> <!-- legend defines a caption for the fieldset -->
<label for="full-name">Name (required):</label> <!-- label provides a text description for the input field -->
<input type="text" id="full-name" name="name" placeholder="e.g., John Doe" required size="20"> <!-- input defines a field where the user can enter data. name attribute adds a name to the input field. placeholder attribute defines a hint about what to enter. required attribute makes the field mandatory. size attribute sets the width of the input field -->
<label for="email">Email address (required):</label>
<input
placeholder="example@email.com"
required
id="email"
type="email"
name="email"
size="20"
/>
<label for="age">Age (optional):</label>
<input type="number" name="age" id="age" min="3" max="100" /> <!--min and max attributes set the range of values for the input field -->
</fieldset>
<fieldset>
<legend>Was this your first time at our hotel?</legend>
<input id="yes-option" type="radio" name="hotel-stay" value="yes" /> <!-- radio value used when you want users to select one option from a list of options. in this example, the radio buttons are grouped together by using the same name attribute value. This means that only one radio button can be selected at a time. value attribute sets the value of the radio button. -->
<label for="yes-option">Yes</label>
<input id="no-option" type="radio" name="hotel-stay" value="no" />
<label for="no-option">No</label>
</fieldset>
<fieldset>
<legend>
Why did you choose to stay at our hotel? (Check all that apply)
</legend>
<input type="checkbox" id="ads" name="choice" value="ads" /> <!-- checkbox defines a checkable box -->
<label for="ads">Social Media Ads</label>
<input
type="checkbox"
id="recommendation"
name="choice"
value="recommendation"
/>
<label for="recommendation">Personal Recommendation</label>
<input type="checkbox" id="location" name="choice" value="location" />
<label for="location">Location</label>
<input
checked
type="checkbox"
id="reputation"
name="choice"
value="reputation"
/> <!-- checked attribute pre-selects a checkbox -->
<label for="reputation">Reputation</label>
<input type="checkbox" id="price" name="choice" value="price" />
<label for="price">Price</label>
</fieldset>
<fieldset>
<legend>Ratings</legend>
<label for="service">How was the service?</label>
<select name="service" id="service"> <!-- select defines a drop-down list -->
<option value="poor">Poor</option> <!-- option defines an option in a drop-down list. value attribute sets the value of the option -->
<option value="satisfactory">Satisfactory</option>
<option value="good">Good</option>
<option value="very-good">Very Good</option>
<option selected value="excellent">Excellent</option>
</select>
<label for="food">How was the food?</label>
<select name="food" id="food">
<option value="poor">Poor</option>
<option value="satisfactory">Satisfactory</option>
<option value="good">Good</option>
<option value="very-good">Very Good</option>
<option selected value="excellent">Excellent</option> <!-- selected attribute pre-selects an option -->
</select>
</fieldset>
<label for="comments">Other Comments?</label>
<textarea cols="30" rows="10" name="comments" id="comments"></textarea> <!-- textarea defines a multi-line text input field. cols and rows attributes set the dimensions of the text area -->
<button type="submit">Submit</button>
</form>
</main>
</body>
</html>preview
▸ rwd workshop Build a Final Exams Table html
code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Calculus Final Exams Table</title>
<meta charset="UTF-8" />
</head>
<body>
<table>
<caption> <!-- caption element defines a caption for the table -->
Calculus Final Exam Grades
</caption>
<thead> <!--thead element defines a set of rows that define the column headers of the table -->
<tr> <!-- tr element defines a row of cells in the table -->
<th>Last Name</th> <!-- th element defines a header cell in the table -->
<th>First Name</th>
<th>Grade</th>
</tr>
</thead>
<tbody> <!-- tbody element defines a set of rows that define the main content of the table -->
<tr>
<td>Davis</td>
<td>Alex</td>
<td>54</td>
</tr>
<tr>
<td>Doe</td>
<td>Samantha</td>
<td>92</td>
</tr>
<tr>
<td>Rodriguez</td>
<td>Marcus</td>
<td>88</td>
</tr>
<tr>
<td>Thompson</td>
<td>Jane</td>
<td>77</td>
</tr>
<tr>
<td>Williams</td>
<td>Natalie</td>
<td>83</td>
</tr>
</tbody>
<tfoot> <!-- tfoot defines a set of rows that define the footer of the table -->
<tr>
<td colspan="2">Average Grade</td> <!--colspan attribute defines the number of columns a cell should span -->
<td>78.8</td>
</tr>
</tfoot>
</table>
</body>
</html>preview
▸ rwd lab Build a Book Catalog Table html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Catalog</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Publication Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lullaby</td>
<td>Chuck Palahniuk</td>
<td>Dark Comedy/Transgressive Fiction</td>
<td>2002</td>
</tr>
<tr>
<td>Player Piano</td>
<td>Kurt Vonnegut</td>
<td>Social Satire/Dystopian Fiction</td>
<td>1952</td>
</tr>
<tr>
<td>What We Talk About When We Talk About Love</td>
<td>Raymond Carver</td>
<td>Dirty Realism/Minimalist Fiction</td>
<td>1974</td>
</tr>
<tr>
<td>Twelve</td>
<td>Nick McDonell</td>
<td>Bildungsroman/Urban Fiction</td>
<td>2002</td>
</tr>
<tr>
<td>The Rules of Attraction</td>
<td>Bret Easton Ellis</td>
<td>Black Comedy/Literary Fiction</td>
<td>1978</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Total Books: 5</td>
</tr>
</tfoot>
</table>
</body>
</html>preview
▸ rwd cert project Build a Survey Form html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Survey Form</title>
</head>
<body>
<div class="container">
<h1 id="title">Guerz's Web Dev Bootcamp Survey</h1>
<p id="description">Week 1 is done. Tell us how it's going.</p>
<form id="survey-form">
<label id="name-label" for="name">Name</label>
<input id="name" type="text" placeholder="Enter your name" required/>
<label id="email-label" for="email">Email</label>
<input id="email" type="email" placeholder="Enter your email" required/>
<label id="number-label" for="number">Age</label>
<input id="number" type="number" min="10" max="120" placeholder="Enter your age"/>
<label for="dropdown">How are you feeling about HTML so far?</label>
<select id="dropdown">
<option value="">Select one</option>
<option value="confident">Confident</option>
<option value="okay">Okay</option>
<option value="lost">A bit lost</option>
</select>
<p>What's your current learning style?</p>
<label>
<input class="inline" type="radio" name="learning-style" value="visual"/>Visual (videos, diagrams)
</label>
<label>
<input class="inline" type="radio" name="learning-style"value="hands-on"/>Hands-on (just build stuff)
</label>
<label>
<input class="inline" type="radio" name="learning-style" value="reading"/>Reading docs
</label>
<p>Which topics have you covered? (check all that apply)</p>
<label>
<input class="inline" type="checkbox" value="html-basics"/>HTML Basics
</label>
<label>
<input class="inline" type="checkbox" value="tables"/>Tables
</label>
<label>
<input class="inline" type="checkbox" value="forms"/>Forms
</label>
<label>
<input class="inline" type="checkbox" value="css"/>CSS
</label>
<label for="comments">Additional comments</label>
<textarea id="comments" name="comments" rows="4" placeholder="Anything else you'd like to share?"></textarea>
<button id="submit" type="submit">Submit</button>
</form>
</div>
</body>
</html>preview
▸ HTML Accessibility 7 items · 7 built
▸ rwd workshop Debug a Coding Journey Blog Page html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Camperbot's Blog</title>
</head>
<body>
<h1>Welcome to Camperbot's Blog</h1>
<nav>
<h2>Navigation</h2>
<ul>
<li><a href="#post1">My Journey</a></li>
<li><a href="#post2">Accessibility</a></li>
<li><a href="#post3">Next Steps</a></li>
</ul>
</nav>
<main>
<article>
<h2 id="post1">My Journey Learning to Code</h2>
<p>I started learning to code a few months ago and it's been a wild ride!</p>
<h3>Early Challenges</h3>
<p>At first, syntax was really confusing.</p>
<h3>Breakthroughs</h3>
<p>Eventually things started to click.</p>
</article>
<article>
<h2 id="post2">Accessibility Matters</h2>
<p>Today I learned that not everyone uses the web the same way I do.</p>
<h3>Screen Readers</h3>
<p>These tools help visually impaired users browse websites.</p>
</article>
<article>
<h2 id="post3">What's Next?</h2>
<p>I'm excited to dive into JavaScript and build interactive features!</p>
<h3>Coming soon: My first JavaScript project!</h3>
<p>Stay tuned for some exciting interactive blog features.</p>
</article>
</main>
<footer>
<h2>Contact Me</h2>
<p>Email me at <a href="mailto:camperbot@blog.io">camperbot@blog.io</a></p>
</footer>
</body>
</html>preview
▸ rwd workshop Build a Tech Conference Schedule Table html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tech Conference 2025 Schedule</title>
</head>
<body>
<h1>Tech Conference 2025 Schedule</h1>
<table>
<caption>Schedule by Track and Time</caption>
<thead>
<tr>
<th scope="col">Time</th> <!-- scope attribute specifies whether a table header cell applies to a column, a row, or a group of columns or rows -->
<th scope="col">Track A</th>
<th scope="col">Track B</th>
<th scope="col">Track C</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">9:00 AM</th>
<td>Keynote: Tech Future</td>
<td>Intro to Web Dev</td>
<td>UX for All</td>
</tr>
<tr>
<th scope="row">10:00 AM</th>
<td>Accessibility Deep Dive</td>
<td>CSS for Beginners</td>
<td>Inclusive Design Principles</td>
</tr>
<tr>
<th scope="row">11:00 AM</th>
<td colspan="3">Break</td>
</tr>
<tr>
<th scope="row">11:30 AM</th>
<td>AR/VR in Education</td>
<td>JavaScript Fundamentals</td>
<td>Design Systems at Scale</td>
</tr>
<tr>
<th scope="row">12:30 PM</th>
<td colspan="3">Lunch Break</td>
</tr>
<tr>
<th scope="row">2:00 PM</th>
<td>Voice UI Workshop</td>
<td>Git & GitHub Essentials</td>
<td>Color & Contrast in UI</td>
</tr>
</tbody>
</table>
</body>
</html>preview
▸ rwd lab Debug a Donation Form html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Donation Form</title>
</head>
<body>
<h1>Donation Form</h1>
<form>
<label for="name">Full Name:</label>
<input id="name" type="text" name="name" required>
<label for="email">Email Address:</label>
<input id="email" type="email" name="email" required>
<label for="amount">Donation Amount ($):</label>
<input id="amount" type="number" name="amount" required>
<label for="newsletter">
<input id="newsletter" type="checkbox" name="newsletter">
Subscribe
</label>
<input type="submit" value="Send"> <!-- value attribute specifies the text to display on the submit button -->
</form>
</body>
</html>preview
▸ rwd workshop Build an Accessible Audio Controller html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Accessible Controls</title>
</head>
<body>
<h1>Audio Controls</h1>
<button type="button">Play</button>
<div>
<span id="volume-label">Volume</span>
<span id="volume-description">Adjust the sound level</span> <!-- span element for descriptive text -->
<input type="range" min="0" max="100" value="50" aria-labelledby="volume-label volume-description"> <!-- input element for volume control. type="range" is used for slider controls. min and max specify the range. value specifies the initial value. aria-labelledby links the input to its labels for accessibility -->
</div>
<button type="button">Mute</button>
</body>
</html>preview
▸ rwd lab Build a Checkout Page html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Checkout Page</title>
</head>
<body>
<h1>Checkout</h1>
<section>
<h2>Your Cart</h2>
<img src="https://cdn.freecodecamp.org/curriculum/labs/cube.jpg" alt="Rubik's Cube">
</section>
<section>
<h2>Payment Information</h2>
<form>
<label for="card-name">
<input id="card-name" name="card-name" type="text" required aria-hidden="true"> <!-- aria-hidden="true" indicates that the element and its children are not visible to accessibility tools, such as screen readers. This is useful for elements that are purely decorative or redundant, and do not provide any meaningful information to users who rely on assistive technologies. -->
<span aria-hidden="true">*</span>
</label>
<label for="card-number">
<input id="card-number" name="card-number" type="text" required aria-describedby="card-number-help"> <!-- aria-describedby attribute is used to associate the input field with a descriptive text element that provides additional information or instructions about the input. In this case, it links the input field with the paragraph element that has the id "card-number-help", which contains the text "Debit/Credit Card Number". This helps users understand what information is expected in the input field, especially for those using assistive technologies. -->
<span aria-hidden="true">*</span>
</label>
<p id="card-number-help">Debit/Credit Card Number + Expiration Date</p>
</form>
</section>
</body>
</html>preview
▸ rwd lab Design a Movie Review Page html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Review</title>
</head>
<body>
<main>
<h1>La science des rêves [The Science of Sleep]</h1>
<img src="https://upload.wikimedia.org/wikipedia/en/1/1e/Scienceofsleeppromo.jpg?utm_source=en.wikipedia.org&utm_campaign=imageinfo&utm_content=thumbnail_unscaled" alt="The Science of Sleep">
<p>In dreams emotions are overwhelming.</p>
<p><b>Movie Rating:</b><span aria-hidden="true">⭐⭐⭐⭐⭐⭐⭐⭐⭐☆</span> (9.6/10)</p> <!-- aria-hidden="true" indicates that the element and its children are not visible to accessibility tools, such as screen readers. This is useful for elements that are purely decorative or redundant, and do not provide any meaningful information to users who rely on assistive technologies. -->
<h2>Cast Members</h2>
<ul>
<li><b>Gael García Bernal</b> as Stéphane</li>
<li><b>Charlotte Gainsbourg</b> as Stéphanie</li>
</ul>
</main>
</body>
</html>preview
▸ rwd lab Build a Multimedia Player html
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multimedia Player</title>
</head>
<body>
<h1>Multimedia Player</h1>
<section>
<h2>Now Playing: Sailing Away</h2>
<audio controls aria-label="Music Player">
<source src="https://cdn.freecodecamp.org/curriculum/js-music-player/sailing-away.mp3" type="audio/mpeg">
</audio>
</section>
<section>
<h2>What is the Map Method and How Does It Work?</h2>
<video controls width="640" aria-label="Video Player"> <!--aria-label attribute provides a label for the video player for accessibility purposes -->
<source src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.mp4" type="video/mp4">
<track src="https://cdn.freecodecamp.org/curriculum/labs/what-is-the-map-method-and-how-does-it-work.vtt" kind="subtitles" srclang="en" label="English Subtitles"> <!-- track element is used to provide subtitles or captions for the video. src attribute specifies the URL of the subtitle file, kind attribute specifies the type of text track (subtitles in this case), srclang attribute specifies the language of the subtitles, and label attribute provides a label for the subtitles for accessibility purposes. -->
</video>
</section>
<section>
<h2>Transcript</h2>
<p>What is a map method and how does it work? The map method is a powerful and widely used function in JavaScript that operates on arrays. It's designed to create a new array by applying a given function to each element of the original array. This method does not modify the original array, but instead returns the new array containing the results of the function applied to each element.</p>
</section>
</body>
</html>preview
▸ CSS Basic CSS 4 items · 4 built
▸ rwd workshop Design a Cafe Menu html + css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- meta tag defines the viewport for responsive design. name="viewport" defines the viewport. content attribute specifies the width and initial scale. width=device-width ensures the page width matches the device width. initial-scale=1.0 sets the initial zoom level -->
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet" /> <!-- styles defines the relationship between the HTML document and the external CSS file. href attribute specifies the path to the CSS file. rel attribute indicates that the linked file is a stylesheet. -->
</head>
<body>
<div class="menu"> <!-- class attribute defines what class the element belongs to. -->
<main>
<h1>CAMPER CAFE</h1>
<p class="established">Est. 2020</p>
<hr> <!-- hr tag creates a horizontal line to separate content -->
<section>
<h2>Coffee</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
<article class="item">
<p class="flavor">French Vanilla</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
</article>
<article class="item">
<p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
</article>
<article class="item">
<p class="flavor">Hazelnut</p><p class="price">4.00</p>
</article>
<article class="item">
<p class="flavor">Mocha</p><p class="price">4.50</p>
</article>
</section>
<section>
<h2>Desserts</h2>
<img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
<article class="item">
<p class="dessert">Donut</p><p class="price">1.50</p>
</article>
<article class="item">
<p class="dessert">Cherry Pie</p><p class="price">2.75</p>
</article>
<article class="item">
<p class="dessert">Cheesecake</p><p class="price">3.00</p>
</article>
<article class="item">
<p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
</article>
</section>
</main>
<hr class="bottom-line">
<footer>
<address> <!-- address tag defines the contact information for the author or owner of the page -->
<p>
<a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
</p>
<p class="address">123 Free Code Camp Drive</p>
</address>
</footer>
</div>
</body>
</html>css
body {
background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg); /* background-image property sets the background image of the body element. url() function specifies the path to the image file. */
font-family: sans-serif; /* font-family property sets the font family for the body element. sans-serif is a keyword that defines a generic sans-serif font. */
padding: 20px; /* padding property adds space around the content of the body element. 20px value sets the padding to 20 pixels on all sides. */
}
h1 {
font-size: 40px; /* font-size property sets the size of the font for the h1 element. 40px value sets the font size to 40 pixels. */
margin-top: 0; /* margin-top property sets the top margin of the h1 element. 0 value removes any default top margin. */
margin-bottom: 15px; /* margin-bottom property sets the bottom margin of the h1 element. 15px value adds a 15-pixel space below the h1 element. */
}
h2 {
font-size: 30px;
}
.established {
font-style: italic; /* font-style property sets the style of the font for the established class. italic value makes the text italicized. */
}
h1, h2, p {
text-align: center; /* text-align property sets the horizontal alignment of the text for h1, h2, and p elements. center value centers the text horizontally within its container. */
}
.menu {
width: 80%; /* width property sets the width of the menu class. 80% value makes the width 80% of the parent container's width. */
background-color: burlywood; /* background-color property sets the background color of the menu class. burlywood is a named color that gives a light brown shade. */
margin-left: auto; /* margin-left property sets the left margin of the menu class. auto value allows the browser to calculate the left margin automatically, centering the element horizontally. */
margin-right: auto; /* margin-right property sets the right margin of the menu class. auto value allows the browser to calculate the right margin automatically, centering the element horizontally. */
padding: 20px; /* padding property adds space around the content of the menu class. 20px value sets the padding to 20 pixels on all sides. */
max-width: 500px; /* max-width property sets the maximum width of the menu class. 500px value ensures that the width does not exceed 500 pixels, even if the parent container is larger. */
}
img {
display: block; /* display property sets the display behavior of the img element. block value makes the image a block-level element, allowing it to take up the full width available and start on a new line. */
margin-left: auto; /* margin-left property sets the left margin of the img element. auto value allows the browser to calculate the left margin automatically, centering the image horizontally. */
margin-right: auto; /* margin-right property sets the right margin of the img element. auto value allows the browser to calculate the right margin automatically, centering the image horizontally. */
margin: -25px; /* margin property sets the margin of the img element. -25px value moves the image up by 25 pixels, creating a negative top margin. */
}
hr {
height: 2px; /* height property sets the height of the hr element. 2px value makes the horizontal line 2 pixels tall. */
background-color: brown; /* background-color property sets the background color of the hr element. brown is a named color that gives a dark brown shade. */
border-color: brown; /* border-color property sets the color of the border of the hr element. brown value ensures that the border color matches t he background color, creating a consistent appearance. */
}
.bottom-line {
margin-top: 25px;
}
h1, h2 {
font-family: Impact, serif; <!-- font-family property sets the font family for h1 and h2 elements. Impact is a specific font, and serif is a generic font family that provides a fallback option if Impact is not available. -->
}
.item p {
display: inline-block; <!-- display property sets the display behavior of the p element within the item class. inline-block value allows the paragraph to be displayed inline with other elements while still maintaining block-level properties, such as width and height. -->
margin-top: 5px;
margin-bottom: 5px;
font-size: 18px;
}
.flavor, .dessert {
text-align: left;
width: 75%;
}
.price {
text-align: right;
width: 25%;
}
/* FOOTER */
footer {
font-size: 14px;
}
address {
font-style: normal;
}
.address {
margin-bottom: 5px;
}
a {
color: black;
}
a:visited { /* a:visited pseudo-class targets links that have been visited by the user. */
color: black;
}
a:hover { /* a:hover pseudo-class targets links when the user hovers over them with the mouse pointer. */
color: brown;
}
a:active { /* a:active pseudo-class targets links when they are being clicked or activated by the user. */
color: brown;
}preview
▸ rwd lab Design a Business Card html + css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Business Card</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div class="business-card">
<img class="profile-image" src="https://cdn.freecodecamp.org/curriculum/labs/flower.jpg" alt="Pink Flower">
<p class="full-name">Nick Guerz</p>
<p class="designation">Web Dev in Training</p>
<p class="company">{decompress}</p>
</div>
<hr>
<p>nick@guerz.lol</p>
<p>845-675-8402</p>
<a class="portfolio-link" href="https://guerz.lol">Portfolio</a>
<a href="https://guerz.lol">guerz.lol</a>
<hr>
<div class="social-media">
<h2>Connect with me</h2>
<a href="https://x.com/notguerz">Twitter</a>
<a href="https://www.linkedin.com/in/nicholas-guerzon-5baa77410/">LinkedIn</a>
<a href="https://github.com/gitguerz">GitHub</a>
</div>
</body>
</html>css
body {
background: rosybrown;
font-family: Arial, sans-serif;
}
.business-card {
background-color: beige;
width: 300px;
padding: 20px;
margin: 100px;
text-align: center;
font-size: 16px;
margin-right: auto;
margin-left: auto;
}
.profile-image {
max-width: 100%; /* max-width is used to make the image responsive */
}
p {
margin-top: 5px;
margin-bottom: 5px;
}
a {
text-decoration: none; /* text-decoration is used to remove the underline from the link */
}preview
▸ rwd lab Build a Stylized To-Do List html + css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="styles.css" rel="stylesheet">
<title>Styled To-Do List</title>
</head>
<body>
<ul class="todo-list">
<li>
<input type="checkbox" id="item1">
<label for="item1">First Item</label>
<ul class="sub-item">
<li><a class="sub-item-link" href="https://example.org/one" target="_blank">First Link</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="item2">
<label for="item2">Second Item</label>
<ul class="sub-item">
<li><a class="sub-item-link" href="https://example.org/two" target="_blank">Second Link</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="item3">
<label for="item3">Third Item</label>
<ul class="sub-item">
<li><a class="sub-item-link" href="https://example.org/three" target="_blank">Third Link</a></li>
</ul>
</li>
<li>
<input type="checkbox" id="item4">
<label for="item4">Fourth Item</label>
<ul class="sub-item">
<li><a class="sub-item-link" href="https://example.org/four" target="_blank">Fourth Link</a></li>
</ul>
</li>
</ul>
</body>
</html>
css
a { /* a tag selector is for links */
text-decoration: none;
}
a:link { /* a:link selector is used to style unvisited links */
color: #0ce213;
}
a:visited { /* a:visited selector is used to style visited links */
color: #8e44ad;
}
a:hover { /* a:hover selector is used to style links when the user hovers over them */
color: #f39c12;
}
a:focus { /* a:focus selector is used to style links when they are focused (e.g., clicked or tabbed to) */
outline: 2px solid #c0392b;
}
a:active { /* a:active selector is used to style links when they are being clicked */
color: #9063f0;
}
preview
▸ rwd lab Design a Blog Post Card html + css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build an Event Flyer Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header><img src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg">
<h1>{decompress}</h1>
</header>
<main>
<section>
<h2><h2>))<>(( b2b Nein0hNein</h2> b2b Nein0hNein</h2>
</section>
<hr>
<section>
<h2>August 21st</h2>
</section>
</main>
</body>
</html>css
body {
padding-top: 50px;
padding-bottom: 50px;
margin: 0 auto;
width: 90vw; /* 90vw is used to set the width of the body to 90% of the viewport width */
min-height: calc(100vh - 100px); /* calc() function can run calculations. 100vh represents the full viewport height 100px represents the total padding and margin, because min-height is used to ensure the body is at least as tall as the viewport minus the padding and margin */
background-color: #fdf6e3; font-family: sans-serif; text-align: center;
}
header img {
width: 100%;
border-radius: 15opx/* border-radius property is used to create rounded corners */
8px; }
hr, section {
width: 80%;
margin: 20px auto;
}
section {
padding: 10px;
}preview
▸ CSS Absolute and Relative Units 1 items · 1 built
▸ rwd lab Build an Event Flyer Page html + css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build an Event Flyer Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header><img src="https://cdn.freecodecamp.org/curriculum/labs/event.jpg">
<h1>{decompress} 8/20</h1>
</header>
<main>
<section>
<h2>{decompress}</h2>
</section>
<hr>
<section>
<h2>August 20th</h2>
</section>
</main>
</body>
</html>css
body {
padding-top: 50px; /* px is an absolute unit, fixed, never scales with the viewport */
padding-bottom: 50px;
margin-top: 0; /* 0 is the one length that needs no unit (0px = 0% = 0) */
margin-bottom: 0;
margin-left: auto; /* auto eats leftover space evenly → centers the body */
margin-right: auto;
width: 60vw; /* vw is a relative unit, scales with the viewport. 1vw = 1% of the viewport width */
min-height: calc(100vh - 100px); /* vh is a relative unit, scales with the viewport height. calc() mixes relative (100vh) + absolute (100px) to reserve top+bottom padding */
}
hr {
width: 90%; /* 90% = relative to the parent's width */
}
section {
width: 60%; /* 60% of the parent (body = 60vw), so it compounds to ~36vw. relative units nest */
}preview
▸ CSS Pseudo Classes and Elements 3 items · 3 built
▸ rwd workshop Design a Greeting Card html + css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Greeting Card</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<div class="card" id="greeting-card">
<h1>Happy Birthday!</h1>
<p class="message">
Wishing you all the happiness and joy on your special day!
</p>
<div class="card-links">
<a href="#send" class="send-link">Send Card</a> <!-- This is a link that will navigate to the "send" section of the page -->
<a href="#share" class="share-link">Share on Social Media</a> <!-- This is a link that will navigate to the "share" section of the page -->
</div>
</div>
<section id="send"> <!-- This is a section with the id "send" that will be navigated to when the "Send Card" link is clicked -->
<h2>Sending your card...</h2>
<p>Card successfully sent to your recipient!</p>
</section>
<section id="share"> <!-- This is a section with the id "share" that will be navigated to when the "Share on Social Media" link is clicked -->
<h2>Sharing your card...</h2>
<p>Your card was shared on social media!</p>
</section>
</body>
</html>css
body {
font-family: Arial, sans-serif;
padding: 40px;
text-align: center;
background-color: brown;
}
.card {
background-color: white;
max-width: 400px;
padding: 40px;
margin: 0 auto;
border-radius: 10px;
box-shadow: 0 4px 8px gray;
transition: transform 0.3s, background-color 0.3s ease; /* transition property for smooth transform and background color change. 0.3s is the duration of the transition. ease is the timing function */
}
.card:hover { /* .card:hover is a pseudo-class that applies styles when the card is hovered over */
background-color: khaki;
transform: scale(1.1);
}
h1::before { /* h1::before is a pseudo-element that adds content before the h1 element */
content: "🥳 ";
}
h1::after { /* h1::after is a pseudo-element that adds content after the h1 element */
content: " 🥳";
}
.message {
font-size: 1.2em;
margin-bottom: 20px;
}
.card-links {
margin-top: 20px;
display: flex;
justify-content: space-around;
}
.card-links a {
text-decoration: none;
font-size: 1em;
padding: 10px 20px;
border-radius: 5px;
color: white;
background-color: midnightblue;
transition: background-color 0.3s ease; /* transition property for smooth background color change. 0.3s is the duration of the transition. ease is the timing function */
}
.card-links a:hover { /* a hover creates a new state for the link */
background-color: orangered; /* background color changes to orangered when hovered */
}
.card-links a:active { /* a active creates a new state for the link */
background-color: midnightblue; /* background color changes to midnightblue when active */
}
.card-links a:focus { /* a focus creates a new state for the link */
outline: 2px solid yellow; /* outline appears when the link is focused */
}
.card-links a:visited { /* a visited creates a new state for the link */
color: crimson; /* color changes to crimson when the link has been visited */
}
section {
margin: 20px auto;
max-width: 600px;
background-color: whitesmoke;
padding: 20px;
border-radius: 10px;
display: none;
}
section:hover { /* section hover creates a new state for the section */
transform: skewX(10deg); /* transform changes section's orientation. skewX(10deg) changes the section's orientation 10 degrees */
}
section:target { /* section target creates a new state for the section */
display: block; /* display changes to block when the section is targeted */
}preview
▸ rwd workshop Design a Parent Teacher Conference Form html + css
a parent-teacher conference scheduler — four fieldset groups over a translucent card. the interesting part is the contact-method radios: appearance: none wipes the native control, then a ::before dot scales in from zero on :checked, with :not() keeping the generic input rules off them.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parent Teacher Conference Form</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<main class="container">
<h1 class="title center">Parent Teacher Conference Form</h1>
<p class="description center">Please fill out the form below to help schedule your parent-teacher conference.</p>
<form>
<fieldset>
<legend>Student Information</legend>
<label for="student-name">Full Name: </label>
<input
type="text"
name="student-name"
id="student-name"
required
placeholder="E.g., Jane Doe"
/>
<label for="grade">Student Grade: </label>
<input
type="number"
name="grade"
id="grade"
required
placeholder="E.g., 4"
/>
</fieldset>
<fieldset>
<legend>Parent/Guardian Information</legend>
<label for="parent-name">Parent/Guardian Name: </label>
<input
type="text"
name="parent-name"
id="parent-name"
required
placeholder="E.g., Nancy Doe"
/>
</fieldset>
<fieldset>
<legend>Preferred Contact Method</legend>
<label class="contact-method" for="email">Email: </label>
<input
id="email"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="email"
checked
/>
<label class="contact-method" for="phone">Phone: </label>
<input
id="phone"
class="contact-method-radio-btn"
type="radio"
name="contact-method"
value="phone"
/>
</fieldset>
<fieldset>
<legend>Additional Notes</legend>
<label for="notes"
>Any specific concerns or topics you'd like to discuss?</label
>
<textarea id="notes" name="notes" rows="4" cols="50"></textarea>
</fieldset>
<button class="submit-btn" type="submit">Submit Form</button>
</form>
</main>
</body>
</html>css
body {
background-color: MidnightBlue;
color: whitesmoke;
}
.container {
background-color: #ffffff1a; /* 8-digit hex: the last 2 digits (1a) are the alpha channel, making this white at roughly 10% opacity instead of solid */
width: 80%;
max-width: 600px;
border-radius: 10px;
margin: 20px auto;
padding: 10px 20px;
box-shadow: 0 5px 15px black;
}
.center {
text-align: center;
}
.description {
font-size: 1.2rem;
}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}
fieldset legend {
font-size: 1.3rem;
font-weight: 600;
}
label {
font-size: 1.2rem;
}
label:not(.contact-method) { /* :not() is a negation pseudo-class — applies to every label EXCEPT ones carrying the contact-method class */
display: block;
margin: 10px 0;
}
input:not(.contact-method-radio-btn), /* :not() again excludes the custom radios, which get their own separate rule below */
textarea {
background-color: #ffffff1a;
width: 95%;
border: 1px solid gray;
border-radius: 5px;
padding: 10px;
}
input,
input::placeholder, /* ::placeholder is a pseudo-element targeting the greyed hint text specifically, not the real typed value */
textarea {
color: whitesmoke;
}
.contact-method-radio-btn {
appearance: none; /* strips the browser's default radio styling entirely, giving a blank box to restyle from scratch */
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid gray;
vertical-align: bottom;
}
.contact-method-radio-btn::before {
display: block;
content: " ";
width: 10px;
height: 10px;
border-radius: 50%;
transform: translate(3px, 3px) scale(0); /* translate() shifts the dot to visually center it inside the circle; scale(0) starts it invisible */
transition: all 0.3s ease-in;
}
.contact-method-radio-btn:checked::before { /* :checked matches only while this specific radio is the selected one in its group */
transform: translate(3px, 3px) scale(1);
background-color: lightgreen;
}
.submit-btn {
cursor: pointer;
background-color: royalblue;
color: whitesmoke;
border: none;
border-radius: 6px;
padding: 12px 20px;
font-size: 1.1rem;
display: block;
margin: auto;
}
.submit-btn:hover {
background-color: midnightblue;
}preview
▸ rwd lab Build a Job Application Form html + css
a job application form on a white card — name, email, a position select, an availability fieldset of radios, and a vertically-resizable textarea. fields border red or green live off :invalid / :valid, and the + combinator tints a radio's label the moment its input is checked.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Application Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Job Application Form</h1>
<form>
<label for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="Enter your full name" required>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
<label for="position">Position Applying For</label>
<select id="position" name="position" required>
<option value="">Select a position</option>
<option value="developer">Developer</option>
<option value="designer">Designer</option>
<option value="manager">Project Manager</option>
</select>
<fieldset class="radio-group">
<legend>Availability</legend>
<input type="radio" id="full-time" name="availability" value="full-time" required>
<label for="full-time">Full-Time</label>
<input type="radio" id="part-time" name="availability" value="part-time" required>
<label for="part-time">Part-Time</label>
</fieldset>
<label for="message">Additional Message</label>
<textarea id="message" name="message" placeholder="Tell us about yourself"></textarea>
<button type="submit">Submit Application</button>
</form>
</div>
</body>
</html>css
* {
box-sizing: border-box; /* padding and border are now included inside the declared width/height instead of adding to it */
}
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 20px;
}
.container {
max-width: 500px;
margin: 0 auto;
background: #ffffff;
padding: 24px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* rgba() sets color with an added alpha value for transparency — black at 10% opacity here */
}
h1 {
text-align: center;
color: #2c3e50;
}
form {
display: flex;
flex-direction: column;
}
label {
margin-top: 14px;
margin-bottom: 6px;
font-weight: bold;
color: #34495e;
}
input,
select,
textarea {
padding: 10px;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
input:first-of-type { /* :first-of-type is a structural pseudo-class matching only the first <input> among its siblings */
border-radius: 20px;
}
input:focus,
textarea:focus {
border-color: #3498db;
outline: none;
}
input:invalid,
select:invalid,
textarea:invalid { /* :invalid is a native pseudo-class that auto-matches any field currently failing its own built-in validation — no JS needed */
border-color: red;
}
input:valid,
select:valid,
textarea:valid { /* :valid is the inverse — matches fields currently passing validation */
border-color: green;
}
textarea {
min-height: 90px;
resize: vertical; /* lets the user drag-resize the textarea vertically only; horizontal resize is disabled */
}
.radio-group {
border: 1px solid #ccc;
border-radius: 6px;
margin-top: 14px;
padding: 10px 14px;
}
.radio-group legend {
font-weight: bold;
color: #34495e;
}
.radio-group label {
margin-left: 6px;
margin-right: 20px;
font-weight: normal;
display: inline;
}
.radio-group input[type="radio"] { /* attribute selector — targets only inputs whose type attribute is exactly "radio" */
width: 16px;
height: 16px;
}
.radio-group input[type="radio"]:checked {
border-color: #3498db;
background-color: #3498db;
box-shadow: 0 0 5px 1px rgba(52, 152, 219, 0.8);
}
.radio-group input[type="radio"]:checked + label { /* the + is an adjacent-sibling combinator — matches an element only when it comes immediately after the matched one in the markup */
color: #3498db;
}
button {
margin-top: 20px;
padding: 12px;
background-color: #3498db;
color: #ffffff;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}preview
▸ CSS Colors 2 items
☐
Build a Set of Colored Markers
workshop
☐
Design a Set of Colored Boxes
lab
▸ CSS Styling Forms 4 items · 1 built
▸ rwd workshop Build a Registration Form html + css
the fCC registration form — three fieldset groups (personal details, account type, optional profile), radios, a file picker, a number field with min/max, a select, a textarea, a pattern-validated password and a required terms checkbox. posts to the fCC demo endpoint. every line commented.
html
<!DOCTYPE html> <!-- tells the browser this is a modern HTML5 document; must be the very first line -->
<html lang="en"> <!-- root element wrapping the whole page; lang="en" tells screen readers and search engines the content is English -->
<head> <!-- opens the head: metadata the browser needs but the user never sees on the page -->
<meta charset="UTF-8"> <!-- sets character encoding to UTF-8 so accented letters, symbols, and emoji render correctly instead of as garbage -->
<title>Registration Form</title> <!-- text shown in the browser tab and used as the default bookmark name; also read first by screen readers -->
<link rel="stylesheet" href="styles.css" /> <!-- pulls in the external CSS file; rel says what kind of link it is, href says where the file lives -->
</head> <!-- closes the head section -->
<body> <!-- opens the body: everything visible on the page goes here -->
<h1>Registration Form</h1> <!-- the page's main heading; there should only ever be one h1 per page for proper document outline -->
<p>Please fill out this form with the required information</p> <!-- short instruction paragraph telling the user what to do -->
<form method="post" action='https://register-demo.freecodecamp.org'> <!-- opens the form; method="post" sends data in the request body (not the URL), action is the server endpoint receiving it -->
<fieldset> <!-- groups related form controls together; browsers and screen readers treat the group as one logical unit -->
<label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label> <!-- label's for matches the input's id, so clicking the text focuses the input; name is the key the server receives; required blocks submit if empty -->
<label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label> <!-- same pattern as above; type="text" is the default single-line text field -->
<label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label> <!-- type="email" makes the browser validate the @ format and shows an email-optimized keyboard on mobile -->
<label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label> <!-- type="password" masks the characters; pattern is a regex requiring 8+ chars using only a-z and 0-5 -->
</fieldset> <!-- closes the first fieldset (personal details) -->
<fieldset> <!-- opens the second fieldset (account type) -->
<legend>Account type (required)</legend> <!-- legend is the visible caption for a fieldset; screen readers announce it before each control in the group -->
<label for="personal-account"><input id="personal-account" type="radio" name="account-type" value="personal" class="inline" checked /> Personal</label> <!-- radio buttons sharing the same name become mutually exclusive; value is what the server receives; checked makes this the default selection -->
<label for="business-account"><input id="business-account" type="radio" name="account-type" value="business" class="inline" /> Business</label> <!-- same name="account-type" as above, so selecting this one automatically deselects Personal -->
</fieldset> <!-- closes the account type fieldset -->
<fieldset> <!-- opens the third fieldset (optional profile info) -->
<label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label> <!-- type="file" renders a file picker button that opens the OS file browser -->
<label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label> <!-- type="number" restricts input to digits and adds stepper arrows; min and max set the allowed range -->
<label for="referrer">How did you hear about us? <!-- label text sits above the dropdown; the for attribute still ties it to the select below -->
<select id="referrer" name="referrer"> <!-- select creates a dropdown menu; the chosen option's value is what gets submitted -->
<option value="">(select one)</option> <!-- empty value acts as a placeholder prompt so no real choice is pre-selected -->
<option value="1">freeCodeCamp News</option> <!-- each option's value is the data sent to the server; the text between the tags is what the user sees -->
<option value="2">freeCodeCamp YouTube Channel</option> <!-- second choice -->
<option value="3">freeCodeCamp Forum</option> <!-- third choice -->
<option value="4">Other</option> <!-- catch-all final choice -->
</select> <!-- closes the dropdown -->
</label> <!-- closes the referrer label, which wraps both the text and the select -->
<label for="bio">Provide a bio: <!-- label text for the multi-line text area below -->
<textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea> <!-- textarea is for multi-line input; rows/cols set its default size, placeholder shows greyed hint text that disappears on typing -->
</label> <!-- closes the bio label -->
</fieldset> <!-- closes the third fieldset -->
<a href="https://www.freecodecamp.org/news/terms-of-service">Read our terms and conditions</a> <!-- anchor element creating a clickable link; href is the destination URL -->
<label for="terms-and-conditions"> <!-- label for the checkbox below; put on its own line here because the text sits after the input -->
<input class="inline" name="terms" id="terms-and-conditions" type="checkbox" required /> <!-- type="checkbox" is an independent on/off toggle; required means the form won't submit unless it's ticked -->
I accept the terms and conditions <!-- the visible label text, placed after the checkbox so it reads left-to-right naturally -->
</label> <!-- closes the terms label -->
<input type="submit" value="Submit" /> <!-- type="submit" renders a button that sends the form to the action URL; value sets the button's visible text -->
</form> <!-- closes the form -->
</body> <!-- closes the body -->
</html> <!-- closes the root html element; end of document -->css
body { /* targets the body element, styling the entire visible page at once */
width: 100%; /* body spans the full width of its parent (the html element) */
height: 100vh; /* 100vh = 100% of the viewport height, so the dark background covers the whole screen even on short pages */
margin: 0; /* kills the browser's default 8px margin around the body, removing the white gap at the page edges */
background-color: #1b1b32; /* dark navy page background */
color: #f5f6f7; /* near-white default text color; inherited by every child element unless overridden */
font-family: Tahoma; /* sets the typeface for all text on the page */
font-size: 16px; /* base font size; other elements using rem units will calculate against this */
} /* closes the body rule */
h1, p { /* comma-separated selector applies these declarations to both h1 and p elements */
margin: 1em auto; /* 1em top/bottom spacing, auto left/right which centers the block horizontally */
text-align: center; /* centers the text inside the element */
} /* closes the h1, p rule */
form { /* targets the form element */
width: 60vw; /* 60vw = 60% of the viewport width, so the form scales with the browser window */
max-width: 500px; /* caps the width so it never gets uncomfortably wide on large monitors */
min-width: 300px; /* floors the width so it never collapses too narrow on small screens */
margin: 0 auto; /* no vertical margin, auto horizontal margin to center the form on the page */
padding-bottom: 2em; /* breathing room below the submit button so it isn't flush against the page bottom */
} /* closes the form rule */
fieldset { /* targets every fieldset element */
border: none; /* removes the browser's default box outline around fieldsets */
padding: 2rem 0; /* 2rem top/bottom padding, 0 left/right; rem is relative to the root font size */
border-bottom: 3px solid #3b3b4f; /* adds a subtle divider line under each group to visually separate sections */
} /* closes the fieldset rule */
fieldset:last-of-type { /* :last-of-type pseudo-class targets only the final fieldset among its siblings */
border-bottom: none; /* removes the divider from the last group so the form doesn't end with a dangling line */
} /* closes the last-of-type rule */
label { /* targets every label element */
display: block; /* makes labels full-width block elements so each one starts on its own line */
margin: 0.5rem 0; /* small vertical gap between labels, no horizontal margin */
} /* closes the label rule */
input, /* first selector in the group: all input elements */
textarea, /* second selector: the bio text area */
select { /* third selector: the referrer dropdown */
margin: 10px 0 0 0; /* 10px top margin only (top, right, bottom, left order) to push the field below its label text */
width: 100%; /* fields stretch to fill the full width of the form */
min-height: 2em; /* guarantees a comfortable tap/click height even for small fields */
} /* closes the shared input/textarea/select rule */
input, textarea { /* narrower group: only inputs and text areas get these colors, not the select dropdown */
background-color: #0a0a23; /* very dark field background so it reads as an input well against the navy page */
border: 1px solid #0a0a23; /* border matching the background, giving a flat borderless look */
color: #ffffff; /* pure white text so typed characters stay legible on the dark field */
} /* closes the input, textarea rule */
.inline { /* class selector (note the leading dot) applied to the radio buttons and the terms checkbox */
width: unset; /* unset cancels the width: 100% inherited from the input rule above, letting the box shrink to its natural size */
margin: 0 0.5em 0 0; /* right margin only, creating a small gap between the box and its label text */
vertical-align: middle; /* aligns the small box with the middle of the adjacent text instead of sitting on the baseline */
} /* closes the .inline rule */
input[type="submit"] { /* attribute selector targeting only inputs whose type attribute equals "submit" */
display: block; /* makes the button a block element so margin: auto can center it */
width: 60%; /* button spans 60% of the form's width */
margin: 1em auto; /* 1em vertical spacing, auto horizontal to center the button */
height: 2em; /* fixed button height */
font-size: 1.1rem; /* slightly larger than base text so the button label stands out */
background-color: #3b3b4f; /* muted purple-grey button fill */
border-color: white; /* white outline making the button edge visible against the dark page */
min-width: 300px; /* floor on button width so it stays tappable on narrow screens */
} /* closes the submit button rule */
input[type="file"] { /* attribute selector targeting only the profile picture file picker */
padding: 1px 2px; /* tight padding so the native file button isn't stretched by the min-height set earlier */
} /* closes the file input rule */
a { /* targets every anchor (link) element on the page */
color: #dfdfe2; /* light grey link color, replacing the browser default blue that clashes with the dark theme */
} /* closes the anchor rule */preview
☐
Design a Contact Form
lab
☐
Build a Game Settings Panel
workshop
☐
Design a Feature Selection Page
lab
▸ CSS Box Model / Layout & Effects 2 items
☐
Design a Rothko Painting
workshop
☐
Build a Confidential Email Page
lab
▸ CSS Flexbox 4 items
☐
Build a Flexbox Photo Gallery
workshop
☐
Design a Set of Colorful Boxes
workshop
☐
Design a Pricing Plans Layout Page
lab
☐
Build a Page of Playing Cards
cert project
▸ CSS Typography 2 items
☐
Build a Nutritional Label
workshop
☐
Build a Newspaper Article
lab
▸ CSS Accessibility 2 items
☐
Build a Quiz Webpage
workshop
☐
Build a Tribute Page
lab
▸ CSS Positioning 2 items
☐
Build a Cat Painting
workshop
☐
Build a House Painting
lab
▸ CSS Attribute Selectors 2 items
☐
Build a Balance Sheet
workshop
☐
Build a Book Inventory App
cert project
▸ CSS Responsive Design 2 items
☐
Design a Piano
workshop
☐
Build a Technical Documentation Page
cert project
▸ CSS Variables 2 items
☐
Build a City Skyline
workshop
☐
Build an Availability Table
lab
▸ CSS Grid 3 items · 1 built
▸ rwd workshop CSS Grid html + css
the fCC grid workshop — a full holy-grail layout in pure grid: a three-column body (sidebar / main / aside) with a full-width header and footer, sized with fr units and pinned by explicit grid-column / grid-row lines. every line commented so the track math sticks.
html
<!DOCTYPE html> <!-- tells the browser this is HTML5 -->
<html lang="en"> <!-- root element, lang helps accessibility/SEO -->
<head> <!-- metadata, not visible on page -->
<meta charset="UTF-8"> <!-- sets character encoding -->
<link rel="stylesheet" href="styles.css"> <!-- connects this file to your CSS -->
</head>
<body> <!-- everything visible goes here -->
<div class="container"> <!-- the GRID CONTAINER — matches display:grid in CSS -->
<div class="header">Header</div> <!-- grid item, spans full width row 1 -->
<div class="sidebar">Sidebar</div> <!-- grid item, column 1 row 2 -->
<div class="main">Main</div> <!-- grid item, column 2 row 2 -->
<div class="aside">Aside</div> <!-- grid item, column 3 row 2 -->
<div class="footer">Footer</div> <!-- grid item, spans full width row 3 -->
</div>
</body>
</html>css
.container {
display: grid; /* turns the element into a grid container */
grid-template-columns: 1fr 2fr 1fr; /* 3 columns: side, middle (2x wider), side */
grid-template-rows: auto 1fr auto; /* 3 rows: header, main content, footer */
gap: 1rem; /* space between grid cells, both directions */
min-height: 100vh; /* grid fills the full screen height */
}
.header {
grid-column: 1 / -1; /* spans from column line 1 to the last line (full width) */
grid-row: 1; /* sits in row 1 */
}
.sidebar {
grid-column: 1; /* sits in first column; column 1 */
grid-row: 2; /* sits in row 2 */
}
.main {
grid-column: 2; /* sits in second column; column 2 */
grid-row: 2; /* sits in row 2 */
}
.aside {
grid-column: 3; /* sits in third column; column 3 */
grid-row: 2; /* sits in row 2 */
}
.footer {
grid-column: 1 / -1; /* spans full width again, from column line 1 to the last line */
grid-row: 3; /* sits in row 3 */
}preview
☐
Design a Newspaper Layout
lab
☐
Build a Product Landing Page
cert project
▸ CSS Animations 4 items
☐
Build an Animated Ferris Wheel
workshop
☐
Build a Moon Orbit
lab
☐
Build a Flappy Penguin
workshop
☐
Build a Personal Portfolio
lab
▸ Legacy Responsive Web Design V8 1 built · 20 total · fCC's order
▸ V8 Courses + Certification Projects 20 items · 1 built
↗ fCC's legacy Responsive Web Design (V8) curriculum
☐
Learn HTML by Building a Cat Photo App
course
☐
Learn Basic CSS by Building a Cafe Menu
course
☐
Learn CSS Colors by Building a Set of Colored Markers
course
☐
Learn HTML Forms by Building a Registration Form
course
☐
Build a Survey Form
cert project
☐
Learn the CSS Box Model by Building a Rothko Painting
course
☐
Learn CSS Flexbox by Building a Photo Gallery
course
☐
Learn Typography by Building a Nutrition Label
course
☐
Learn Accessibility by Building a Quiz
course
☐
Build a Tribute Page
cert project
☐
Learn More About CSS Pseudo Selectors by Building A Balance Sheet
course
☐
Learn Intermediate CSS by Building a Cat Painting
course
☐
Learn Responsive Web Design by Building a Piano
course
☐
Build a Technical Documentation Page
cert project
☐
Learn CSS Variables by Building a City Skyline
course
▸ legacy rwd v8 Learn CSS Grid by Building a Magazine html + css
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Magazine</title>
<link
href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
rel="stylesheet"
/> <!-- loads the 3 Google Fonts used across the page (Anton, Baskervville, Raleway) -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
/> <!-- loads Font Awesome so the social media icons (<i> tags) have something to render -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main> <!-- the GRID CONTAINER — matches display:grid on main in the CSS -->
<section class="heading"> <!-- top section holding the hero image, title, byline, social icons -->
<header class="hero"> <!-- groups the banner image + big title + subtitle together -->
<!-- alt = description for screen readers if the image fails to load -->
<!-- loading="lazy" = browser delays loading this image until it's near the viewport, improves page speed -->
<img
src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
alt="freecodecamp logo"
loading="lazy"
class="hero-img"
/>
<h1 class="hero-title">OUR NEW CURRICULUM</h1> <!-- the big headline, styled orangered/8rem in CSS -->
<p class="hero-subtitle">
Our efforts to restructure our curriculum with a more project-based
focus
</p> <!-- subtitle under the headline -->
</header>
<div class="author"> <!-- groups the byline name + publish date -->
<p class="author-name">
By
<!-- target="_blank" opens link in a new tab; rel="noreferrer" blocks the new page from seeing where the link came from (security) -->
<a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
>freeCodeCamp</a
>
</p>
<p class="publish-date">March 7, 2019</p>
</div>
<div class="social-icons"> <!-- row of 5 social links, styled as a grid in CSS -->
<a href="https://www.facebook.com/freecodecamp/">
<i class="fab fa-facebook-f"></i> <!-- Font Awesome icon class, renders the Facebook icon glyph -->
</a>
<a href="https://twitter.com/freecodecamp/">
<i class="fab fa-twitter"></i> <!-- renders the Twitter icon glyph -->
</a>
<a href="https://instagram.com/freecodecamp">
<i class="fab fa-instagram"></i> <!-- renders the Instagram icon glyph -->
</a>
<a href="https://www.linkedin.com/school/free-code-camp/">
<i class="fab fa-linkedin-in"></i> <!-- renders the LinkedIn icon glyph -->
</a>
<a href="https://www.youtube.com/freecodecamp">
<i class="fab fa-youtube"></i> <!-- renders the YouTube icon glyph -->
</a>
</div>
</section>
<section class="text"> <!-- main article body, styled with column-width in CSS so text flows into newspaper-style columns -->
<p class="first-paragraph"> <!-- gets the drop-cap effect via ::first-letter in CSS -->
Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
</p>
<p>
After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
</p>
<p>
It wasn't as dramatic as Doc's revelation in Back to the Future. It
just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
</p>
<blockquote> <!-- semantic wrapper marking this as a pulled quote -->
<hr /> <!-- decorative line above the quote -->
<p class="quote">
The entire curriculum should be a series of projects
</p> <!-- gets quotation marks added automatically via ::before/::after in CSS -->
<hr /> <!-- decorative line below the quote -->
</blockquote>
<p>
No more walls of explanatory text. No more walls of tests. Just one
test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
</p>
<p>
The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
</p>
<p>
Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
</p>
</section>
<section class="text text-with-images"> <!-- second content section: text list on the left, images on the right (two classes = two sets of CSS rules apply) -->
<article class="brief-history"> <!-- semantic wrapper for the standalone "Brief History" content -->
<h3 class="list-title">A Brief History</h3>
<p>Of the Curriculum</p>
<ul class="lists"> <!-- bullet styling removed via list-style-type in CSS -->
<li>
<h4 class="list-subtitle">V1 - 2014</h4>
<p>
We launched freeCodeCamp with a simple list of 15 resources,
including Harvard's CS50 and Stanford's Database Class.
</p>
</li>
<li>
<h4 class="list-subtitle">V2 - 2015</h4>
<p>We added interactive algorithm challenges.</p>
</li>
<li>
<h4 class="list-subtitle">V3 - 2015</h4>
<p>
We added our own HTML+CSS challenges (before we'd been relying on
General Assembly's Dash course for these).
</p>
</li>
<li>
<h4 class="list-subtitle">V4 - 2016</h4>
<p>
We expanded the curriculum to 3 certifications, including Front-End,
Back-End, and Data Visualization. They each had 10 required
projects, but only the Front-End section had its own challenges.
For the other certs, we were still using external resources like
Node School.
</p>
</li>
<li>
<h4 class="list-subtitle">V5 - 2017</h4>
<p>We added the back-end and data visualization challenges.</p>
</li>
<li>
<h4 class="list-subtitle">V6 - 2018</h4>
<p>
We launched 6 new certifications to replace our old ones. This was
the biggest curriculum improvement to date.
</p>
</li>
</ul>
</article>
<aside class="image-wrapper"> <!-- <aside> = content related but off to the side, matches the theater-hook meaning from Anki; styled as its own grid in CSS -->
<!-- image-1 spans full width of .image-wrapper via grid-column in CSS -->
<!-- width/height reserve space in the layout before the image loads, prevents page jump -->
<img
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
alt="image of the quote machine project"
loading="lazy"
class="image-1"
width="600"
height="400"
/>
<!-- image-2 has no full-span rule, sits in its own grid cell -->
<img
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
alt="image of a calculator project"
loading="lazy"
class="image-2"
width="400"
height="400"
/>
<blockquote class="image-quote"> <!-- second pull-quote, nested inside the image group -->
<hr />
<p class="quote">
The millions of people who are learning to code through freeCodeCamp
will have an even better resource to help them learn these
fundamentals.
</p>
<hr />
</blockquote>
<!-- image-3 spans full width again, same rule as image-1 -->
<img
src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
alt="four people working on code"
loading="lazy"
class="image-3"
width="600"
height="400"
/>
</aside>
</section>
</main>
</body>
</html>css
*,
::before,
::after {
padding: 0; /* removes default padding browsers add to every element */
margin: 0; /* removes default margin browsers add to every element */
box-sizing: border-box; /* padding/border count INSIDE the element's width, not added on top */
}
html {
font-size: 62.5%; /* resets base font to 10px (62.5% of default 16px), makes rem math easy: 1.6rem = 16px */
}
body {
font-family: 'Baskervville', serif; /* sets the default body text font */
color: linen; /* sets default text color (off-white) */
background-color: rgb(20, 30, 40); /* dark navy background for the whole page */
}
h1 {
font-family: 'Anton', sans-serif; /* bold display font just for h1 headings */
}
h2, h3, h4, h5, h6 {
font-family: 'Raleway', sans-serif; /* different font for all other heading levels */
}
a {
text-decoration: none; /* removes the default underline on links */
color: linen; /* makes links match body text color instead of default blue */
}
main {
display: grid; /* turns <main> into a grid container */
grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr); /* 3 columns: flexible margin, capped-width center content, flexible margin — this centers the page */
row-gap: 3rem; /* vertical space between grid rows */
}
img {
width: 100%; /* image fills its container's width */
object-fit: cover; /* crops image to fill its box without stretching/distorting */
}
hr {
margin: 1.5rem 0; /* space above/below horizontal rule, none on the sides */
border: 1px solid rgba(120, 120, 120, 0.6); /* thin semi-transparent gray line */
}
.heading {
grid-column: 2 / 3; /* places this section in the center column of main's grid */
display: grid; /* this section is ALSO its own grid container */
grid-template-columns: repeat(2, 1fr); /* 2 equal-width columns inside .heading */
row-gap: 1.5rem; /* vertical space between rows inside .heading */
}
.text {
grid-column: 2 / 3; /* places this section in the center column of main's grid */
font-size: 1.8rem; /* body paragraph text size */
letter-spacing: 0.6px; /* slight spacing between letters for readability */
column-width: 25rem; /* text auto-flows into multiple columns, each ~25rem wide */
text-align: justify; /* stretches each line so both edges align, like a newspaper */
}
.hero {
grid-column: 1 / -1; /* spans the FULL width of main's grid (edge to edge, ignoring the centered column) */
position: relative; /* lets child elements be positioned relative to this box later if needed */
}
.hero-title {
text-align: center; /* centers the big headline text */
color: orangered; /* headline color */
font-size: 8rem; /* large headline size */
}
.hero-subtitle {
font-size: 2.4rem; /* subtitle text size */
color: orangered; /* subtitle color matches headline */
text-align: center; /* centers the subtitle text */
}
.author {
font-size: 2rem; /* byline text size */
font-family: "Raleway", sans-serif; /* byline uses the heading font instead of body font */
}
.author-name a:hover {
background-color: #306203; /* highlights the author link green when hovered */
}
.publish-date {
color: rgba(255, 255, 255, 0.5); /* faded/dimmed white for the date, de-emphasizing it */
}
.social-icons {
display: grid; /* icons row is its own grid */
font-size: 3rem; /* icon size */
grid-template-columns: repeat(5, 1fr); /* 5 equal columns, one per icon */
grid-auto-flow: column; /* lays items out column-by-column instead of row-by-row */
grid-auto-columns: 1fr; /* any extra icons get equal-width columns too */
align-items: center; /* vertically centers icons within their grid cell */
}
.first-paragraph::first-letter {
font-size: 6rem; /* makes just the first letter huge (drop cap effect) */
color: orangered; /* drop cap color */
float: left; /* pulls the letter left so text wraps around it */
margin-right: 1rem; /* space between the drop cap and the wrapped text */
}
.quote {
color: #00beef; /* pull-quote color (cyan) */
font-size: 2.4rem; /* pull-quote text size */
text-align: center; /* centers the quote */
font-family: "Raleway", sans-serif; /* quote uses heading font */
}
.quote::before {
content: '" '; /* inserts an opening quotation mark before the text, no HTML needed */
}
.quote::after {
content: ' "'; /* inserts a closing quotation mark after the text, no HTML needed */
}
.text-with-images {
display: grid; /* this section is its own grid */
grid-template-columns: 1fr 2fr; /* 2 columns: narrow (text list) + wide (images), 1:2 ratio */
column-gap: 3rem; /* horizontal space between the two columns */
margin-bottom: 3rem; /* space below this whole section */
}
.lists {
list-style-type: none; /* removes default bullet points */
margin-top: 2rem; /* space above the list */
}
.lists li {
margin-bottom: 1.5rem; /* space between each list item */
}
.list-title, .list-subtitle {
color: #00beef; /* matches the pull-quote cyan color for visual consistency */
}
.image-wrapper {
display: grid; /* image group is its own grid */
grid-template-columns: 2fr 1fr; /* 2 columns, left one twice as wide as right */
grid-template-rows: repeat(3, min-content); /* 3 rows, each only as tall as its content needs */
gap: 2rem; /* space between grid cells, both directions */
place-items: center; /* centers items both horizontally and vertically in their cells */
}
.image-1, .image-3 {
grid-column: 1 / -1; /* these two images span the FULL width of .image-wrapper */
}
@media only screen and (max-width: 720px) {
.image-wrapper {
grid-template-columns: 1fr; /* on narrow screens, collapse to a single column */
}
}
@media only screen and (max-width: 600px) {
.text-with-images {
grid-template-columns: 1fr; /* on narrow screens, stack list and images instead of side-by-side */
}
}
@media only screen and (max-width: 550px) {
.hero-title {
font-size: 6rem; /* shrink headline for small screens */
}
.hero-subtitle,
.author,
.quote,
.list-title {
font-size: 1.8rem; /* shrink several text elements together for small screens */
}
.social-icons {
font-size: 2rem; /* shrink icons for small screens */
}
.text {
font-size: 1.6rem; /* shrink body text for small screens */
}
}
@media only screen and (max-width: 420px) {
.hero-title {
font-size: 4.5rem; /* shrink headline further for the smallest screens */
}
}preview
☐
Build a Product Landing Page
cert project
☐
Learn CSS Animation by Building a Ferris Wheel
course
☐
Learn CSS Transforms by Building a Penguin
course
☐
Build a Personal Portfolio Webpage
cert project
the archive lists every workshop, lab and certification project in the freeCodeCamp Responsive Web Design v9 curriculum (plus the legacy V8 courses), in order. built ones expand with their real, full source and a live preview — copy any block straight into an editor. the rest fill in as i work down the list.