Tell us what’s happening:
Hi, my code passes all the tests and the nav bar is functional.But could someone please give me some constructive feedback on how i can make my web page look better.
Your code so far
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Technical Documentation Page</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav id="navbar">
<header>Tech documentation on agar plating</header>
<a class="nav-link" href="#Introduction">Introduction</a>
<a class="nav-link" href="#Step_1_-_Use_a_Recipe">Step 1 - Use a Recipe</a>
<a class="nav-link" href="#Step_2_Autoclave">Step 2 Autoclave</a>
<a class="nav-link" href="#Step_3_Cool_It!">Step 3 Cool It!</a>
<a class="nav-link" href="#Step_4_Supplement_It">Step 4 Supplement It</a>
<a class="nav-link" href="#Step_5_Pour_the_Plates">Step 5 Pour the Plates</a>
<a class="nav-link" href="#Step_6_Let_It_Set">Step 6 Let It Set</a>
<a class="nav-link" href="#Step_7_Get_it_Dry!">Step 7 Get it Dry!</a>
<a class="nav-link" href="#Step_8_Use_it_or_Store_it!">Step 8 Use it or Store it!</a>
<a class="nav-link" href="#Reference">Reference</a>
</nav>
<main id="main-doc">
<section class="main-section" id="Introduction">
<header>Introduction</header>
<p>
Get ready to master agar plating! This guide takes you through the process step-by-step, making it easy to get perfect results every time.
</p>
</section>
<section class="main-section" id="Step_1_-_Use_a_Recipe">
<header>Step 1 - Use a Recipe</header>
<p>
Make up the medium according to the recipe, then add the desired amount of agar powder (normally about <code>1% w/v</code>) and stir. If you autoclave without stirring, with the agarose still floating on top of the liquid, you get an agarose cake in the medium. Interesting, but useless. When making up the agar, only use 3/4 of the volume of the bottle.
</p>
<p>
This allows space for bubbles to rise while the agar is melting in the microwave (and saves you cleaning up overflowing agar from the microwave!).
</p>
</section>
<section class="main-section" id="Step_2_Autoclave">
<header>Step 2 Autoclave</header>
<p>
<code>Autoclave</code> your medium for 25 minutes. After autoclaving, you can store the medium-agar mix in a toughened glass bottle then melt it in a microwave or water bath when needed. Make sure you use toughened glass bottles, or disaster can strike.</p>
<p>Remember to use heat-resistant gloves when handling hot medium straight out of the autoclave.
</p>
</section>
<section class="main-section" id="Step_3_Cool_It!">
<header>Step 3 Cool It!</header>
<p>
Cool the medium-agar mix to <code>55°C</code>. For routinely consistent results, cool for a couple of hours in a <code>55°C</code> water bath. Agar starts to solidify at about <code>50°C</code>.</p>
<p>Using the water bath when making agar plates means you can consistently cool the mixture to just above the solidification temperature.</p>
<p>Before I used a water bath, I used to just cool it in the air, but would inevitably forget about it and come back to find solidification had already started—lumpy plates are no good for spreading!
</p>
</section>
<section class="main-section" id="Step_4_Supplement_It">
<header>Step 4 Supplement It</header>
<p>
You can now add any antibiotics or supplements, and be confident that the agar is at a suitable temperature because you have cooled it in the water bath.
</p>
</section>
<section class="main-section" id="Step_5_Pour_the_Plates">
<header>Step 5 Pour the Plates</header>
<p>When using 100-mm diameter dishes, follow these tips:</p>
<ul>
<li>Use about <code>30 mL</code> of agar-medium mix per plate.</li>
<li>Less agar-medium mix dries out faster.</li>
<li><code>30 mL</code> is good for long-term storage.</li>
<li><code>10–20 mL</code> is fine for short-term use.</li>
<li>Use a serological pipette and suck up <code>2–3 mL</code> extra to minimize bubbles.</li>
</ul>
</section>
<section class="main-section" id="Step_6_Let_It_Set">
<header>Step 6 Let It Set</header>
<p>
If there are any bubbles in the plates, briefly pass the flame over to pop them. This is a classic error: trying to move the plates before they’ve set and cooled completely is just asking for trouble. Just leave them alone (and maybe admire your perfect agar plates while you wait)!
</p>
</section>
<section class="main-section" id="Step_7_Get_it_Dry!">
<header>Step 7 Get it Dry!</header>
<p>
Dry the plates in the laminar flow hood with the lid slightly off for 30 minutes (or in a 37°C incubator for 2–3 hours or at room temperature for 2–3 days). Drying the plate is very important for storing the plates and growing colonies on them.
If you don’t dry the plates, the moisture will evaporate and condense on the lid during storage or incubation, resulting in horrible wet plates. At worst, the moisture can affect the plating of your cells.</p>
<p>Use a timer to remind you when the 30 minutes are up as—in my experience—it is very easy to forget about your plates and come back to find your plates have turned into agar crisps/chips. Tasty.
</p>
</section>
<section class="main-section" id="Step_8_Use_it_or_Store_it!">
<header>Step 8 Use it or Store it!</header>
<p>
Once you’ve poured your perfect agar plates, you can use them immediately or seal them for later use. You can use Parafilm, or stack them and store them upside down in the plastic bag or plastic sleeve that the plates came in for easy storage.
Store the plates in the refrigerator or cold room at <code>4°C</code>. Guidelines suggest using agar plates within approximately 2 to 4 weeks.</p>
<p> Depending on the additives you have included, the shelf life of the prepared plates might be shorter—make sure you check this before you start so you don’t end up wasting your time (and resources) making too many plates or end up with contamination on your plates!</p>
<p>A quick way to label your plates is to have a color code for each antibiotic and medium type you tend to use (e.g., red for ampicillin, black for kanamycin, green for LB, blue for M9).
Stack the plates and use the appropriately colored lab marker to draw a line down the whole stack. Make sure you keep the color code on hand, though.
</p>
</section>
<section class="main-section" id="Reference">
<header>Reference</header>
<p>Information for this webpage was provided by <a href="https://bitesizebio.com/6938/how-to-make-the-perfect-agar-plate-every-time/"">Bitesizebio</a></p>
</section>
</main>
</body>
</html>
body {
display: flex;
flex-direction: row;
background:#FFD580;
font-family: monospace;
line-height:1.5em;
}
#navbar {
width: 250px;
position: sticky;
}
#main-doc {
margin-left:
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
.main-section header::after {
content: " -";
}
.main-section header::before {
content: "- ";
}
header {
font-weight:bold;
}
li {
margin-bottom:13px;
}
p {
margin-bottom:13px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36
Challenge Information:
Technical Documentation Page - Build a Technical Documentation Page
