the build log · view source welcome
PROJECTS & INSTRUCTIONS
everything i've shipped, split two ways: cold builds coded from scratch with no hand-holding (the build-it-cold drills), and freeCodeCamp cert projects built to the user-story spec. open a section, tap any project, then flip between ▶ preview (what the build looks like) and </> code (the copy-able source). steal freely. ^_^
cold builds
freeCodeCamp RWD
view source welcome
▸ cold instructions 4 builds · from scratch, no tutorial
▸ from scratch Box Model html + css
a two-box demo proving how box-sizing: border-box folds padding and border into the declared width instead of adding on top, centered with a flex container. every line is commented so the model actually sticks.
<!DOCTYPE html> <!-- tells the browser this is modern HTML5 -->
<html> <!-- root element — everything lives inside it -->
<head> <!-- metadata + styles; nothing here renders on the page -->
<style>
/* .box — targets every element with class="box" */
.box {
box-sizing: border-box; /* padding + border count INSIDE the width, not added on top */
width: 200px; /* total outer width — 110px of it is actual content space */
padding: 40px; /* inner breathing room, eats into the 200px */
border: 5px solid black; /* also eats into the 200px because of border-box */
margin: 40px; /* space OUTSIDE the box — never counted in the width */
background-color: lightblue; /* fills content + padding, stops at the border */
}
/* .container — targets the wrapper div holding both boxes */
.container {
display: flex; /* children line up in a row instead of stacking vertically */
justify-content: center; /* pushes the whole group to the horizontal center */
}
</style>
</head>
<body> <!-- everything visible on the page goes here -->
<div class="container"> <!-- the flex parent — controls how the boxes are arranged -->
<div class="box">BOX 1</div> <!-- flex child, styled by .box -->
<div class="box">BOX 2</div> <!-- flex child, same styling -->
</div>
</body>
</html>▸ from scratch Flexbox html + css
the smallest possible flex layout — display: flex with space-between and align-items: center — spreading three children across a row. commented line-by-line as a memory anchor.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex; /* turns the container into a flex box — children line up in a row by default */
justify-content: space-between; /* spreads children out with equal gaps between them, no gap at edges */
align-items: center; /* centers children vertically along the cross-axis */
}
</style>
</head>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</body>
</html>▸ from scratch CSS Positioning html + css
a full walkthrough of all five position values — static, relative, absolute, fixed and sticky — each in its own labelled section. built cold to lock the differences in.
<!DOCTYPE html>
<html lang="en">
<head> <!-- Open the head section where metadata is defined -->
<meta charset="UTF-8"> <!-- Tell the browser to use UTF-8 encoding for all text (includes emojis, accents, etc)-->
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Viewport tells mobile browsers to treat the page width as device width, not zoomed out -->
<title>Positioning Cold Build Instructional</title> <!-- Title appears in browser tab and search results -->
<link rel="stylesheet" href="positioning.css"> <!-- Link to external CSS file so styles apply to this HTML -->
</head> <!-- Close the head section, page content starts after this -->
<body> <!-- Open body where all visible content lives -->
<div class="container"> <!-- Container div holds all positioning examples, easier to manage layout -->
<h1>CSS Positioning Cold Build Instructional</h1> <!-- Main heading for the page, largest; most important-->
<p>CSS positioning changes how elements flow on the page. The are five values: static (default), relative, absolute, fixed, and sticky.</p>
</div>
<section class="positionin-section"> <!-- Section for static posotioning examples -->
<h2>Static Positioning</h2> <!-- Heading for static positioning section -->
<p>Static positioning is the default value for all elements. Elements stact in normal document flow. Top, right, Bottom, Left properties do not apply; are ignored.</p> <!-- Paragraph explaining static positioning -->
<div class="static-example"> <!-- Create a div with class "static-example" to hold static positioned elements -->
</section> <!-- Close the static positioning section -->
<section class="positionin-section"> <!-- Section for relative posotioning examples -->
<h2>Relative Positioning</h2> <!-- Heading for relative positioning section -->
<p>Relative positioning moves an element relative to its normal position. Top, right, bottom, left properties will move the element from where it would normally be.</p> <!-- Paragraph explaining relative positioning -->
<div class="relative-example"> <!-- Create a div with class "relative-example" to hold relative positioned elements -->
<p>I am relative. I move from my normal position.</p> <!-- Paragraph is relatively positioned -->
</div> <!-- Close the relative positioning div -->
<div class="positioning-example"> <!-- Create a div with class "positioning-example" to hold relative positioned elements -->
<h2>Relative Positioning</h2> <!-- Heading for relative positioning section -->
<p>Relative positioning moves an element from its normal position using top, right, bottom, left. It still takes up space where it would normally sit.</p> <!-- Paragraph explaining relative positioning -->
<div class="relative-example"> <!-- Create a div with class "relative-example" to hold relative positioned elements -->
<p>I am relative. I moved 20px from the top.</p> <!-- Paragraph that will be moved with CSS -->
</div> <!-- Close the relative example div -->
</section> <!-- Close the relative positioning section -->
</section> <!-- Close the relative positioning section -->
<section class="positioning-section"> <!-- Section for absolute positioning examples -->
<h2>Absolute Positioning</h2> <!-- Heading for absolute positioning section -->
<p>Absolute positioning removes an element from normal document flow. It positions relative to the nearest positioned ancestor (or the document if none exists).</p> <!-- Explain that absolute takes element out of flow -->
<div class="absolute-example"> <!-- Create a div with class "absolute-example" for the absolutely positioned element -->
<p>I am absolutely positioned. I'm taken out of normal flow.</p> <!-- Paragraph positioned absolutely, doesn't reserve space -->
</div> <!-- Close the absolute example div -->
</section> <!-- Close the absolute positioning section -->
<section class="positioning-section"> <!-- Section for fixed positioning examples -->
<h2>Fixed Positioning</h2> <!-- Heading for fixed positioning section -->
<p>Fixed positioning anchors an element to the viewport. It stays in place even when you scroll. Removed from normal document flow.</p> <!-- Explain that fixed stays visible during scroll -->
<div class="fixed-example"> <!-- Create a div with class "fixed-example" for the fixed positioned element -->
<p>I am fixed. I stay in place when you scroll.</p> <!-- Paragraph stays visible as page scrolls -->
</div> <!-- Close the fixed example div -->
</section> <!-- Close the fixed positioning section -->
<section class="positioning-section"> <!-- Section for sticky positioning examples -->
<h2>Sticky Positioning</h2> <!-- Heading for sticky positioning section -->
<p>Sticky positioning is a hybrid. Element flows normally until you scroll past it, then it sticks to the viewport edge you defined.</p> <!-- Explain that sticky is a hybrid of relative and fixed -->
<div class="sticky-example"> <!-- Create a div with class "sticky-example" for the sticky positioned element -->
<p>I am sticky. I flow normally, then stick when you scroll.</p> <!-- Paragraph that sticks on scroll -->
</div> <!-- Close the sticky example div -->
</section> <!-- Close the sticky positioning section -->
</div> <!-- Close the container div -->
</body> <!-- Close the body section -->
</html> <!-- Close the HTML document -->/* Reset default browser margins and padding on all elements */
* {
margin: 0; /* Remove default margin from all elements */
padding: 0; /* Remove default padding from all elements */
box-sizing: border-box; /* Make width and height include padding and border */
}
/* Style the container div that wraps all positioning examples */
.container {
max-width: 1000px; /* Limit container width so it doesn't stretch too wide */
margin: 0 auto; /* Center the container on the page (auto margins on sides) */
padding: 2rem; /* Add space inside the container around all content */
}
/* Style all positioning section divs */
.positioning-section {
margin-bottom: 3rem; /* Add space below each section so they don't feel cramped */
padding: 1.5rem; /* Add internal padding inside the section */
border: 2px solid #333; /* Add a border around each section for clarity */
background-color: #f5f5f5; /* Light gray background to distinguish sections */
}
/* Style the static positioning example */
.static-example {
position: static; /* Static is the default, element follows normal document flow */
background-color: #e8f5e9; /* Light green background to see the element */
padding: 1rem; /* Add space inside the element */
margin-bottom: 1rem; /* Add space below this element */
}
/* Style the relative positioning example */
.relative-example {
position: relative; /* Position relative to where it would normally sit */
top: 20px; /* Move the element 20px down from its normal position */
background-color: #e3f2fd; /* Light blue background to see the element */
padding: 1rem; /* Add space inside the element */
margin-bottom: 1rem; /* Add space below this element */
}
/* Style the absolute positioning example */
.absolute-example {
position: absolute; /* Position relative to nearest positioned ancestor */
top: 100px; /* Distance from top of positioned ancestor */
left: 50px; /* Distance from left of positioned ancestor */
background-color: #fff3e0; /* Light orange background to see the element */
padding: 1rem; /* Add space inside the element */
}▸ from scratch Survey Form html
a fully semantic survey form — labelled text / email / number inputs, a select, radio + checkbox groups, and a textarea — every field wired with matching for/id and required validation.
<!-- Main heading of the page -->
<h1 id="title">Survey Form</h1>
<!-- Brief description explaining the purpose of the survey -->
<p id="description">
Thank you for taking the time to help us improve the platform.
</p>
<!-- Contains all form fields that the user will complete -->
<form id="survey-form">
<!-- Label associated with the Name input field -->
<label for="name" id="name-label">Name</label>
<!-- Collects the user's name. Required before the form can be submitted. -->
<input
type="text"
id="name"
name="name"
placeholder="Enter your name"
required
>
<!-- Label associated with the Email input field -->
<label for="email" id="email-label">Email</label>
<!-- Collects the user's email address. Browser validates the format. -->
<input
type="email"
id="email"
name="email"
placeholder="Enter your email"
required
>
<!-- Label associated with the Age input field -->
<label for="number" id="number-label">Age</label>
<!-- Collects the user's age. Only numbers from 10 to 99 are allowed. -->
<input
type="number"
id="number"
name="age"
min="10"
max="99"
placeholder="Age"
required
>
<!-- Label associated with the dropdown menu -->
<label for="dropdown" id="dropdown-label">
Which option best describes your current role?
</label>
<!-- Allows the user to choose one role -->
<select id="dropdown" name="role">
<option value="">Select an option</option>
<option value="student">Student</option>
<option value="full-time-job">Employee</option>
<option value="full-time-learner">Other</option>
</select>
<!-- Radio button group: only one option may be selected -->
<p>Would you recommend this platform to a friend?</p>
<label>
<input type="radio" name="recommend" value="definitely">
Definitely
</label>
<label>
<input type="radio" name="recommend" value="maybe">
Maybe
</label>
<label>
<input type="radio" name="recommend" value="not-sure">
Not Sure
</label>
<!-- Checkbox group: multiple options may be selected -->
<p>What is your favorite feature of the platform?</p>
<label>
<input type="checkbox" name="improvements" value="frontend">
Front-end Projects
</label>
<label>
<input type="checkbox" name="improvements" value="backend">
Back-end Projects
</label>
<label>
<input type="checkbox" name="improvements" value="data-visualization">
Data Visualization
</label>
<label>
<input type="checkbox" name="improvements" value="challenges">
Challenges
</label>
<!-- Allows the user to enter additional comments -->
<p>Any comments or suggestions?</p>
<textarea
id="comments"
name="comments"
placeholder="Enter your comments here..."
></textarea>
<!-- Submits the completed form -->
<button id="submit" type="submit">Submit</button>
</form>▸ freeCodeCamp project instructions 1 shipped · 4 coming soon
▸ rwd cert · shipped 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.
<!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 -->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 */▸ soon Tribute Page not started
🚧 coming soon…
▸ soon Technical Documentation Page not started
🚧 coming soon…
▸ soon Product Landing Page not started
🚧 coming soon…
▸ soon Personal Portfolio Webpage not started
🚧 coming soon…
the shipped builds embed their real, full source and a live preview — copy any block straight into an editor. the “coming soon” cert projects fill in as each one gets built and claimed.