FreeCodeCamp - Tribute Page Project
In this exercise, I was tasked with creating a tribute page. Using FreeCodeCamp projects to remind me of specific functions, I was able to create a decent looking HTML page that talks about the 10th Mountain Division.
It helped build my confidence a lot in being able to see the finished product, however rough it may be. I got more confident with using padding to space objects and using CSS to customize the look of both types of content in addition to specific content identified by an ID.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0"/>
<meta name="description"
content="A short tribute page to the 10th mountain division"/>
<title id="title">10th Mountain Division</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<header>
<h1>10th Mountain Division</h1>
<h3>The elite alpine unite that helped take Italy</h3>
<img id="10th-picture" alt="10th Mountain Division soldiers posing for a picture in arctic camoflague" src="https://imgs.search.brave.com/1sIqaMWkwzzys9f6OKQYhOrNhRS9rWWsX5detbGYCbo/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly9zbm93/YnJhaW5zLmNvbS93/cC1jb250ZW50L3Vw/bG9hZHMvMjAxNS8x/MS9za2l0cm9vcHMu/anBn">
</header>
<main id="main">
<section id="foundation">
<h3>Foundation</h3>
<p>The 10th Light Division (Alpine), later known as the 10th Mountain Division, was constituted on July 10, 1943, and officially activated on July 15 at Camp Hale, Colorado under the command of Maj. Gen. Lloyd E. Jones. This highly specialized unit was trained for arctic and mountain warfare, originally preparing for combat in the rugged, icy terrain of Italy during World War II. On November 6, 1944, it was re-designated as the 10th Mountain Division to reflect its mission more accurately. The division has undergone many transformations over the years and continues to serve today.</p>
<p><b>Key Points</b></p>
<ul>
<li>Constituted on July 10, 1943, as the 10th Light Division (Alpine).</li>
<li>Activated on July 15, 1943, at Camp Hale, Colorado under Maj. Gen. Lloyd E. Jones.</li>
<li>Specialized in arctic and mountain warfare.</li>
<li>Re-designated as the 10th Mountain Division on November 6, 1944.</li>
<li>Trained for combat in the mountainous, arctic conditions of Italy during WWII.</li>
</section>
<section id="training">
<h3>Training</h3>
<figure id="img-div"><img id="image" id="tenth_training" alt="10th Mountain Division soldiers standing around" src="https://imgs.search.brave.com/itJ3dU6fcDejE2gy0XMPXA3udFqpAQUnuhRUFi-Q51g/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9jZG4u/YnVpbGRlci5pby9h/cGkvdjEvaW1hZ2Uv/YXNzZXRzLzA2OGUz/ZTc4MTdjYjQzNTFi/NzE1MzhmYTI0MzZj/YmMyLzFmYTQ3N2Rk/M2RhZjQxYTc4ZWJi/OWExNTY4ZTU1ZmM0/P3dpZHRoPTgwMA"><figcaption id="img-caption">10th Mountain Division soldiers standing around waiting for training</figcaption></figure>
<p>To prepare for combat in Italy’s rugged terrain, the 10th Mountain Division trained extensively in the Rocky Mountains, the closest U.S. equivalent to the Alps and Apennines. There, they learned critical mountaineering and arctic survival skills—like skiing, rock climbing, avalanche safety, and first aid—while also mastering combat techniques. Their training was grueling: skiing while shooting, hauling artillery through snow, and carrying 90-pound packs across mountainous terrain. By deployment, they were elite soldiers, blending athleticism with military precision. Still, many in the military underestimated them—some, like General Eisenhower, even mocked them as “playboys” due to their backgrounds in skiing and Ivy League schools. Despite this, their skill and determination proved them a force to be reckoned with.</p>
<p><b>Key Points</b></p>
<ul>
<li>Trained in the Rocky Mountains to mimic Italy’s alpine terrain.</li>
<li>Mastered both mountaineering skills and WWII combat techniques.</li>
<li>Many came from athletic, academic backgrounds—often dismissed as "playboys."</li>
<li>Despite skepticism, they became elite, battle-ready troops.</li>
</section>
<section id="combat">
<h3>Combat</h3>
<img id="tenth_training" alt="10th Mountain Division soldiers standing around" src="https://imgs.search.brave.com/7deeR5HH4G7Y7wOXoWwaAKpOZqSp01r2RhiG2DUVKJc/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/Y3ByLm9yZy9jZG4t/Y2dpL2ltYWdlL3dp/ZHRoPTM4NDAscXVh/bGl0eT03NSxmb3Jt/YXQ9YXV0by9odHRw/czovL3dwLWNwci5z/My5hbWF6b25hd3Mu/Y29tL3VwbG9hZHMv/MjAxOS8wNi9sb3N0/X3NraV9hcmVhc18t/XzEwdGhfbXRuX2Rp/dmlzaW9uX3Ryb29w/ZXJfY291cnRlc3lf/b2ZfZWFnbGVfY291/bnR5X2hpc3Rvcmlj/YWxfc29jaWV0eV9h/bmRfZWFnbGVfdmFs/bGV5X2xpYnJhcnku/anBn">
<p>The 10th Mountain Division proved their worth during the pivotal Battle of Po Valley. To advance, Allied forces had to take Riva Ridge, a heavily defended high ground impossible for regular troops to scale. But the 10th, using their mountaineering skills, silently climbed the cliffs at night and surprised the German garrisons—reportedly before they’d had their first cup of coffee. After securing the entire ridge, they pushed through the Apennines, became the first U.S. troops to cross the Po River, and eventually reached Lake Garda, occupying Mussolini’s villa. Despite early doubts, the 10th never lost a battle or surrendered ground.
</p>
<p><b>Key Points</b></p>
<ul>
<li>Riva Ridge was key to advancing into the Po Valley.</li>
<li>Only the 10th had the skill to scale the ridge and surprise the enemy.</li>
<li>Their night assault was swift and effective, catching Germans off guard.</li>
<li>Helped drive German forces out of the Apennines and crossed the Po River.</li>
<li>Reached Lake Garda and took over Mussolini’s villa.</li>
<li>Proved their value—never lost a battle or gave up ground.</li>
</section>
<section id="tribute-info">
<p>The 10th Mountain Division was a very impressive WW2 special forces unit. To learn more about them, check out <a id="tribute-link" target="_blank" href="https://warfarehistorynetwork.com/battle-of-po-valley-the-10th-mountain-division-in-wwii-italy">this excellent article.</a></p>
</section>
</main>CSS Code
body {
background: #fffef8;
color: #1b1b32;
font-family: Rubik;
margin: 0;
}
header {
text-align: center;
padding-bottom:60 px;
}
h3 {
padding-top:110 px;
}
section {
width: 90%;
margin: 0 auto 10px auto;
max-width: 700px;
padding-top:30px;
}
img {
border-radius:8px;
display:block;
margin-left:auto;
margin-right:auto;
}
#img-caption {
padding-top:5px;
}
#image {
max-width:100%;
height:auto;
}
#tenth_training {
max-width: 600px;
height: auto;
margin-left:35px
}Finished Product
0:00
/0:30
Member discussion