Scribd
Upload
2 views

Example Code

The document consists of multiple HTML files for a website called The Four-Legged Café, which offers a dining experience for pets and their owners. It includes a homepage with menu items, an about page detailing the café's story and unique offerings, and a reflection page with insights on web development challenges and concepts. Additionally, a CSS file provides styling for the website's layout and design elements.

Uploaded by

00055038
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Example Code

The document consists of multiple HTML files for a website called The Four-Legged Café, which offers a dining experience for pets and their owners. It includes a homepage with menu items, an about page detailing the café's story and unique offerings, and a reflection page with insights on web development challenges and concepts. Additionally, a CSS file provides styling for the website's layout and design elements.

Uploaded by

00055038
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

INDEX.

HTML
<!DOCTYPE html>
<html>

<head>
<title>The Four-Legged Café | Home</title>
<!-- Link to external CSS -->
<link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Simple text-based navigation at the top -->
<p>
<a href="index.html">| HOME |</a>
<a href="about.html">| ABOUT |</a>
</p>

<!-- Main heading (ID selector) -->


<h1 id="mainHeader"><u>THE</u> <u>FOUR-LEGGED</u> <u>CAFE</u></h1>
<p id="tagline" class="highlight">A Pawsitive Place to Dine Where Every Belly Finds a Treat!</p>

<!-- Image with a fun border (class="imgFrame") -->


<img class="imgFrame" src="Dogs.png" alt="Happy Dogs">
<p class="cred">PIXABAY | dandelion_tea</p>

<!-- Introductory Text -->


<p>
<strong>Welcome</strong> to our colorful café, where humans and pets share
a delightful dining experience! We've got fresh-baked treats
for furry friends and indulgent delights for their favorite humans,
all in a bright and cozy atmosphere.
</p>

<!-- Example Menu Items -->


<h2 class="highlight"><u>Today's</u> <u>Tasty</u> <u>Treats</u></h2>
<ul class="index-list">
<li>Peanut Butter Pupcakes</li>
<li>Canine Carrot Cake</li>
<li>Feline Fish Sticks</li>
<li>Human-Only Latte Specials</li>
<li>Yummy Yogurt Bites <b>|</b> Pet-Friendly</li>
</ul>

<!-- Footer-like text -->


<p><h6>© 2025 The Four-Legged Café. All rights reserved.</h6></p>

<!-- Reflection link at the BOTTOM of the page -->


<p>
<a href="reflection.html">| Go to Reflection |</a>
</p>
</body>
</html>
ABOUT.HTML
<!DOCTYPE html>
<html>
<head>
<title>About - The Four-Legged Café | About</title>
<!-- Link to external CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Simple text-based navigation at the top -->
<p>
<a href="index.html">| HOME |</a>
<a href="about.html">| ABOUT |</a>
</p>
<h2 class="highlight"><u>OUR</u> <u>STORY</u></h2>
<!-- Image with a fun border -->
<img class="imgFrame" src="cats.png" alt="Happy Cats">
<p class="cred">PIXABAY | ArzuSumer</p>
<p>
The Four-Legged Café was founded by two best friends who loved
sharing meals with their pets. They imagined a joyful space where
pet parents could unwind while furry companions lounge nearby,
enjoying snacks crafted just for them.
</p>
<h3 class="highlight"><u>Why</u> <u>We</u> <u>Stand</u> <u>Out</u></h3>
<p>
Our kitchen uses top-quality, pet-safe ingredients for all pet snacks,
while the human menu features flavorful dishes and coffee from local
farms. It's a win-win for every belly!
</p>
<h3 class="highlight"><u>Fur-Tastic</u> <u>Favorites</u></h3>
<ul class="about-list">
<li>Salmon Surprise <b>|</b> For cats & fish-loving pups</li>
<li>Bone Broth Biscuits</li>
<li>Purr-fect Tuna Tart</li>
<li>Chocolate-Free Brownies <b>|</b> Safe for pups, but better for humans!</li>
<li>Berry Blast Smoothies</li>
</ul>
<!-- Footer-like text -->
<p><h5><u>CONTACT</u> <u>US</u> <b>|</b> 1-800-FUR-FOOD <b>|</b>
[email protected] <b>|</b></h5></p>
<!-- Reflection link at the BOTTOM of the page -->
<p>
<a href="reflection.html">| Go to Reflection |</a>
</p>
</body>
</html>
REFLECTION.HTML
<!DOCTYPE html>
<html>
<head>
<title>Reflection | The Four-Legged Café</title>
<!-- Link to external CSS -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Simple text-based navigation at the top -->
<p>
<a href="index.html">| HOME |</a>
<a href="about.html">| ABOUT |</a>
</p>
<h2><u>REFLECTION</u> <u>QUESTIONS</u></h2>
<p>
Answer each question in at least <b>5 sentences | ~100 words</b> total across all questions.
Please reference your experiences coding this project.
</p>
<ol>
<li class="highlight">What was the most challenging part of creating a multi-file website, and how did
you overcome it?</li>
<p><!-- This is where you will type their answers -->The most challenging part was keeping track of
all the different files and ensuring they were correctly linked. Initially, I found myself mixing up file
paths and forgetting to include the link element for my CSS in both HTML files. I overcame this by
double-checking my directory structure and using consistent file names. Another helpful step was to
open each HTML file separately in CodeHS to confirm that styles loaded and links between pages
worked. Through careful organization and reviewing my code frequently, I became more comfortable
managing multiple files in a single project.</p>
<li class="highlight">Explain the differences you noticed between tag selectors, class selectors, and
ID selectors in CSS.</li>
<p><!-- This is where you will type their answers -->Tag selectors apply a style to every instance of
that element—for instance, p { color: red; } affects all paragraphs. Class selectors (.highlight) allow
you to style multiple specific elements anywhere on your page by simply adding the same class
name to those elements. ID selectors (#mainHeader) are typically used for a unique element that
appears only once on a page, like a main heading. Another difference is in their specificity: an ID
overrides a class, which in turn overrides a basic tag selector if there are conflicting rules.
Understanding these differences helped me create cleaner, more efficient styles in my project.</p>
<li class="highlight">Where did you apply the concept of the cascade, and why is it important?</li>
<p><!-- This is where you will type their answers -->I applied the cascade in my code by having a
general p { ... } rule and then creating a .highlight class that overrides some properties of the
paragraph styling. For example, my paragraphs were a default color, but any text given the .highlight
class became bolder and changed color. This demonstrated how the more specific selector wins out
in a conflict. The cascade is important because it allows me to build from general to specific styling
rules, ensuring the most relevant or "important" style takes precedence. Without the cascade,
managing and updating multiple style rules across different sections of a website could become
messy and confusing.</p>
<li class="highlight">How does having multiple files (HTML and CSS) help organize larger website
projects?</li>
<p><!-- This is where you will type their answers -->Having multiple files keeps everything much
clearer. When HTML is separated from CSS, I can change layouts and styles without accidentally
breaking my page structure. It also encourages a modular approach—if I need to make a global
change to the color scheme or font choice, I only update the CSS file once. For large-scale
websites, this separation scales well, allowing teams to divide tasks: some focus on HTML content,
others on CSS styling. Ultimately, it saves time and effort by reducing clutter and making it easier to
maintain and troubleshoot.</p>
<li class="highlight">What advice would you give a future student who is just starting to learn web
design and development?</li>
<p><!-- This is where you will type their answers -->First, never skip the basics—understanding how
HTML, CSS, and their files link together is crucial before moving on to more advanced topics. Next,
take time to name your files and folders carefully and consistently to avoid frustrating mix-ups.
Always test your links and styles early and often, rather than waiting to find broken pages at the
end. Focus on small, incremental changes so you can easily spot mistakes when they occur. Finally,
don't be afraid to experiment; web development is a creative process, and every "mistake" is a
lesson that will make you a stronger coder in the long run.</p>
</ol>
</body>
</html>
STYLE.CSS
/* Basic HTML element styling for the <body> */
body {
background-color: #fff7e6;
margin: 20px;
padding: 20px;
font-family: "Montserrat", sans-serif;
color: #333;
}
/* Tag selector -> */
p{
color: #333; /* override any external default, ensures readability */
}
/* Class selectors -> */
.highlight {
color: #ff69b4;
font-weight: 700;
}
.bold{
font-weight: 600; /* Lighter than bold, heavier than normal */
}
.cred {
width: 518px; /* Match the max-width of the image */
margin: 2px 0 0 0; /* top right bottom left — very small top margin */
text-align: right;
font-size: 8px;
font-weight:700;
color: #333;
line-height: 1;
}
/* ID selectors -> */
#mainHeader {
color: #ff6600;
font-size: 2em;
margin-bottom: 10px; /* Reduce space below the title */
}
#tagline {
margin-top: 0;
line-height: 1.2;
}
/* Cascade demonstration | .highlight overrides p's color (#333) because
.highlight is more specific. */
/* Simple frame for images */
.imgFrame {
border: 4px dotted #ff69b4;
padding: 5px;
margin: 10px 0;
margin-bottom:1px;
display: block;
max-width: 500px;
}
strong {
color: #ff6600;
font-size: 1.4em;
}
/* Link styling */
a{
text-decoration: none;
font-weight: 900;
color: #cc3399;
margin-right: 20px;
}
/* Custom bullet for index.html */
.index-list {
list-style: none;
padding-left: 0;
}
.index-list li::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url('Bdog.png'); /* Replace with the index bullet image */
background-size: contain;
background-repeat: no-repeat;
margin-right: 8px;
vertical-align: middle;
}
/* Custom bullet for about.html */
.about-list {
list-style: none;
padding-left: 0;
}
.about-list li::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
background-image: url('Bcat.png'); /* Replace with the about bullet image */
background-size: contain;
background-repeat: no-repeat;
margin-right: 8px;
vertical-align: middle;
}
a:hover {
text-decoration: underline;
}

You might also like