Lab 2
<!DOCTYPE html>
<html lang="en"
<head>
<meta charset="utf-8">
<title>CH 1 Apply Your Knowledge</title>
</head>
<body>
<p>Chapter 1, Apply Your Knowledge.</p>
<p>Julie, October 20, 2025</p>
<hr>
<p>The text editor I am using to complete this assignment is The Code Editor inside WordPress
<p>When planning a website, it helps to start by thinking about who you're building it for, what you want it to achieve, how your content should be organized, and how to make everything easy and accessible for your visitors.</p>
<p> Chapter 1 showed me how HTML acts as the framework for a webpage, with each tag helping organize the content. I also learned that using meaningful tags improves how easily people and devices can understand and navigate the site.</p>
</body>
</html>
Lab 3
<!-- contact.html - October 26, 2025 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Contact</title>
</head>
<body>
<!-- Navigation bar -->
<nav>
<a href="index.html">Home</a>
<a href="lessons.html">Lessons</a>
<a href="instructors.html">Instructors</a>
<a href="rentals.html">Rentals</a>
<a href="contact.html">Contact</a>
</nav>
<!-- Main content -->
<main>
<div id="contact">
<h2>Contact us today to schedule your first lesson.</h2>
<p>Phone Number: (814) 555-9228</p>
<p>Email: <a href="mailto:lessons@strikeachord.net">lessons@strikeachord.net</a></p>
<p>We are located at: 1122 Music Lane, Chicago, IL 60007</p>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d95038.20783721513!2d-87.853942!3d41.833903!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x880e2c9e3e3e3e3e%3A0x3e3e3e3e3e3e3e3e!2sChicago%2C%20IL!5e0!3m2!1sen!2sus!4v1698350000000"
width="400"
height="300"
style="border:0;"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
</main>
<!-- Footer with email link -->
<footer>
<p>Contact us at <a href="mailto:lessons@strikeachord.net">lessons@strikeachord.net</a></p>
</footer>
</body>
</html>
Lab 4
/*
Author: Julie
Date: 10/26/2025
File Name: styles.css
*/
/* CSS Reset */
body, header, nav, main, footer, img, h1 {
margin: 0;
padding: 0;
border: 0;
}
/* Style rule for images */
img {
max-width: 100%;
display: block;
}
/* Style rules for header content */
header {
text-align: center;
font-size: 3em;
color: #373684;
}
header h1 {
font-style: italic;
}
/* Style rules for navigation area */
nav {
background-color: #373684;
}
nav ul {
list-style-type: none;
margin: 0;
text-align: center;
}
nav li {
display: inline-block;
font-size: 2em;
}
nav li a {
display: block;
color: #fff;
text-align: center;
padding: 0.5em 1em;
text-decoration: none;
}
/* Style rules for main content */
main {
padding: 2%;
background-color: #e5e9fc;
overflow: auto;
font-family: Verdana, Arial, sans-serif;
}
main p {
font-size: 1.25em;
}
.action {
font-size: 1.75em;
color: #373684;
font-weight: bold;
}
/* Style rules for instrument sections */
#piano, #guitar, #violin {
width: 29%;
float: left;
margin: 0 2%;
}
/* Style rules for info section */
#info {
clear: left;
background-color: #c0caf7;
padding: 1% 2%;
}
/* Style rules for contact section */
#contact {
text-align: center;
}
#contact a {
color: #4645a8;
text-decoration: none;
font-weight: bold;
}
/* Style rules for map */
.map {
border: 5px solid #373684;
}
/* Style rules for footer content */
footer {
text-align: center;
font-size: 0.65em;
clear: left;
}
footer a {
color: #4645a8;
text-decoration: none;
}