FreeCodeCamp - Technical Documentation Page
In this exercise, I was tasked with creating a documentation page. I chose to be a bit facetious with this one, discussing the rise, fall, and renewal of drywall as a food. It was very much inspired by this enlightening article.
It was a big confidence boost to take this project all the way to completion. In the Responsive Web Design course, this was one of the key projects that I was nervous about. However, by inspecting the HTML/CSS of their demo page, reviewing past projects, and a reading a lot of W3Schools, I was able to piece it all together. I learned a lot about using nav and section elements, color pallets/CSS, media queries, and the difference between padding and margins.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport">
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<nav id="navbar">
<header>Eat More Drywall</header>
<ul>
<li><a class="nav-link" href="#importance">Importance</a></li>
<li><a class="nav-link" href="#inception">Inception</a></li>
<li><a class="nav-link" href="#success">Success</a></li>
<li><a class="nav-link" href="#present_existence">Present Existence</a></li>
<li><a class="nav-link" href="#hopefull_future">A Hopefull Future</a></li>
</ul>
</nav>
<main id="main-doc">
<section class="main-section" id="importance">
<header>Importance</header>
<article>
<p>Throughout the ages, people of all kinds have been frowned upon for eating drywall. However, with recent activists ths social stigma has slowly been dropped. With this, it has also lead to a increased effort to remove laws oppressive governments. Most notably, the EU, France, and Antarctica have all voted unanimously to protect those who wish to eat drywall under their constitutions. </p>
<p>The right to eat drywall is a basic human right and should be respected by all societies, governments, and entities everywhere.</p>
</article>
</section>
<section class="main-section" id="inception">
<header>Inception</header>
<p>The history of eating drywall goes all the way back to the Greeks. Unfortunately, due to massive efforts of various governments and historical destructavists, all images of Romans eating drywall have been lost or have had those aspects painted over of gouged out.</p>
<img alt="image of Romans eating drywall" src="https://imgs.search.brave.com/F1sYZ6GTTqDY69WYJVMbC_4BJnEU2t72uFVCKcN4IzE/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/dGFzdGluZ3RhYmxl/LmNvbS9pbWcvZ2Fs/bGVyeS9kaWQtdGhl/LWFuY2llbnQtcm9t/YW5zLWFjdHVhbGx5/LXZvbWl0LWJldHdl/ZW4tY291cnNlcy9p/bnRyby0xNzA0MjEz/MDQ2LmpwZw">
<p> For example, take the above absolutely original picture. All of the drywall on their plates has been vandalized and been replaced with steryotypical food choices of our own modern day.<p>
<p>This is very unfortunate, because it was the Greeks who first mastered the formula for drywall. In one of their ancient documents (Paries gypseus cibus sapidus est) the writer lays it out: "Drywall is primarily made of gypsum, which is calcium sulfate dihydrate <code>(CaSO4·2H2O)</code>, sandwiched between two layers of paper"</p>
<article></article>
</section>
<section class="main-section" id="success">
<header>Success</header>
<article>
<p>For many years, the Greeks and early cultures used Drywall as a great source of food. It was used in many cultures including the:</p>
<ul>
<li><code>Egyptions</code></li>
<li><code>Romans</code></li>
<li><code>Native Americans</code></li>
<li><code>East German</code></li>
</ul>
<p>It was also used in many ancient dishes, often treated as a delicacy. These included:
<ul>
<li>Wild Boar stuffed with crushed Drywall</li>
<li>Rhamsees' Famous Date & Drywall Jam</li>
<li>Claudius Drywall parfe (a delicious stack of different types of drywall)</li>
<li>Napoleon's Napoleon tri-variety drywall sunday</li>
</ul>
</article>
</section>
<section class="main-section" id="present_existence">
<header>Present Existence</header>
<article>
<p>In more recent history, the popularity of drywall as a delicacy has drastically decreased. This is mostly due to Hitler's hatred of drywall, mostly due because he thought it was philosophically insulting to being white. For him, he believed that drywall should be rock hard and strong, not made out of paper. This obsession led him to really hate it and create propoganda against it. Below is an example gif that the Nazis would use in indoctrination camps to brainwash their captives into not eating drywall.</p>
<img alt="Nazi propaganda against drywall" src="https://c.tenor.com/UrZGHw036AoAAAAC/rainbow-six-siege-siege.gif">
<p>Sadly, this propaganda gif was so successful that it spread to the entire world. It wasn't untill very recent (2016) that countries began creating protecitons for those who wish to eat drywall and serve it as a dish</p>
</article>
</section>
<section class="main-section" id="hopefull_future">
<header>A Hopefull Future</header>
<article>
<p>Hopefully, as people become more aware the eating drywall is a normal and self-respectable thing, society's stigma against it will gradually be dropped.
<p>With the social stigma gone, the people can then force their governments (by forcefull means if necessary) to grant them their undeniable human right. That is: to eat drywall whenever, however, and whereever they wish. Absolute freedom of the self above all else.</p>
<p>P.S. Consider helping support societal movers like <a href="https://store.steampowered.com/app/3749110/Drywall_Eating_Simulator/">this game</a></p>
</article>
</main>
</body>
</html>CSS Code
body {
font-family: sans-serif;
background:#211f28ff;
color:white;
}
header {
padding-top:2rem;
font-size:1.75rem;
text-align:center;
}
a {
color:#96453bff;
}
p {
padding-left:15px;
padding-right:10px;
}
.main-section header {
font-size:1.25rem;
color:#96453bff;
text-align:left;
padding-left:5px;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
@media (hover:hover) {
p a:hover {
color: black;
background: white;
}
}Finished Product
AI Usage
The usage of AI & ML technologies was kept to a minimum in order to maximize deep learning. I do not consider tools like search engines and "AI Summaries" in search engines to be notable AI assistance.
In this work, Claude AI was briefly used to troubleshoot a code issue. It was instructed to not rewrite the code or improve it, merely tell me what the issue was. Here is the full transcript of my conversation.
Claude AI Transcription
Human:
what would be "drywall is a tasty food" in Greek be?
Claude:
"Drywall is a tasty food" in Greek would be:
"Το γυψοσανίδα είναι νόστιμο φαγητό"
Breaking it down:
- Το γυψοσανίδα (to gypsosanida) = the drywall
- είναι (einai) = is
- νόστιμο (nostimo) = tasty
- φαγητό (faghito) = food
Though I should mention that drywall is definitely not edible and would be quite harmful if consumed!
Human:
what would it be in latin?
Claude:
"Drywall is a tasty food" in Latin would be:
"Paries gypseus cibus sapidus est"
Breaking it down:
- Paries gypseus = drywall (literally "gypsum wall")
- cibus = food
- sapidus = tasty/flavorful
- est = is
Since "drywall" is a modern construction material, there's no direct classical Latin term for it, so I used "paries gypseus" (gypsum wall) as the closest equivalent, referring to the gypsum content in drywall.
Human:
Here is my code so far. Do not re-write it. I merely need you to troubleshoot why this rule isn't passing "20. Each .nav-link should have an href attribute that links to its corresponding .main-section (e.g. If you click on a .nav-link element that contains the text "Hello world", the page navigates to a section element with that id)."
Claude:
Looking at your code, the issue is with your href attributes in the navigation links. You're missing the # symbol that's required for internal page links.
Currently you have:
<li><a class="nav-link" href="importance">Importance</a></li>
<li><a class="nav-link" href="inception">Inception</a></li>
<li><a class="nav-link" href="success">Success</a></li>
<li><a class="nav-link" href="present_existence">Present Existence</a></li>
<li><a class="nav-link" href="hopefull_future">Hopefull Future</a></li>
But it should be:
<li><a class="nav-link" href="#importance">Importance</a></li>
<li><a class="nav-link" href="#inception">Inception</a></li>
<li><a class="nav-link" href="#success">Success</a></li>
<li><a class="nav-link" href="#present_existence">Present Existence</a></li>
<li><a class="nav-link" href="#hopefull_future">Hopefull Future</a></li>
The # symbol tells the browser to look for an element with that specific id on the same page. Without it, the browser treats it as a link to a different page or file.
Member discussion