Accessibility: Live coding
Forms
A simple form demo, with focus styles and high color contrast ratios.
html
<h1>What’s your birthday?</h1>
<form method="post" action="save-birthday-data.html">
<div>
<label for="first-name">Your name</label>
<input id="first-name" name="first-name" type="text" />
</div>
<div>
<label for="birthday">Your birthday</label>
<input id="birthday" name="birthday" type="date" />
</div>
<button type="submit">Send</button>
</form>css
h1,
p,
form label,
form input,
form button {
display: block;
margin: 0.5rem;
}
form input,
form button {
padding: 0.5rem;
}
input {
font: inherit;
border: 1px solid #36565f;
background-color: #fdf3e3;
}
button {
font: inherit;
font-size: 1.2rem;
color: #fdf3e3;
border: none;
background-color: #bb4e30;
}
input:hover,
input:focus,
button:hover,
button:focus {
outline-color: #36565f;
outline-style: dashed;
outline-width: 2px;
outline-offset: 2px;
}Landmark regions
The typical arrangement of main landmark regions on many webpages.
html
<html>
<head> </head>
<body>
<header>
<nav>...</nav>
</header>
<main>
<article></article> <!-- depends on content -->
<section></section> <!-- depends on content -->
</main>
<aside></aside> <!-- depends on content -->
<footer></footer>
</body>
</html>Flexing a list for site navigation
How to restyle a ul while maintaining semantic properties.
html
<nav class="site-nav">
<ul class="site-nav-flex-container">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Contact</a></li>
</ul>
</nav>css
/* Reset default browser styles */
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.site-nav a {
text-decoration: none;
}
/* Style the elements how I want */
.site-nav-flex-container {
margin: auto;
max-width: min-content;
display: flex;
flex-direction: column;
gap: 2rem;
}
.site-nav-flex-container a {
color: #fdf3e3;
display: block;
padding: 1rem;
}
@media (width > 50rem) {
.site-nav-flex-container {
flex-direction: row;
}
}