These repositories are meant to be read, explored, and experimented with. They are reference points, not finished solutions.
HTML Core Elements
This repository focuses on the foundational building blocks of HTML.
It covers:
- Basic document structure
- Semantic elements like
header, nav, section, and footer
- Lists, links, and headings
- How hierarchy is created before any styling is applied
Open the HTML core elements repository
CSS Foundations
This repository builds on the HTML foundations and focuses on how CSS targets and styles elements.
It covers:
- External, embedded, and inline CSS
- Selectors and the cascade
- Spacing, color, and typography
- The relationship between reusable rules and specific overrides
Open the CSS foundations repository
<header class="site-header">
<p class="eyebrow">Student portfolio</p>
<h1>Structure comes first</h1>
<nav class="main-nav" aria-label="Primary navigation">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main class="page-layout">
<section class="card" id="about">
<h2>About this page</h2>
<p>Semantic HTML gives the content meaning before CSS changes how it looks.</p>
</section>
<section class="card card--featured" id="skills">
<h2>What I am practicing</h2>
<ul class="skill-list">
<li>Clear heading hierarchy</li>
<li>Reusable class selectors</li>
<li>Spacing, color, and typography</li>
</ul>
</section>
</main>
<footer class="site-footer" id="contact">
<p>Built with semantic HTML and reusable CSS.</p>
</footer>* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.6;
color: #1f2937;
background: #f4f7fb;
}
.site-header,
.site-footer {
padding: 2rem;
text-align: center;
}
.site-header {
color: #ffffff;
background: #25476a;
}
.eyebrow {
margin: 0 0 0.5rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.site-header h1 {
margin: 0;
font-size: clamp(2rem, 7vw, 4rem);
line-height: 1;
}
.main-nav ul {
display: flex;
gap: 1rem;
justify-content: center;
list-style: none;
margin: 1.5rem 0 0;
padding: 0;
}
.main-nav a {
color: #ffffff;
font-weight: 700;
}
.page-layout {
display: grid;
gap: 1rem;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
max-width: 56rem;
margin: 0 auto;
padding: 2rem 1rem;
}
.card {
padding: 1.25rem;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 0.5rem;
}
.card h2 {
margin-top: 0;
}
.card--featured {
border-color: #c2410c;
border-width: 3px;
}
.skill-list {
padding-left: 1.25rem;
}
.site-footer {
color: #475569;
border-top: 1px solid #cbd5e1;
}