MatheusUsb
commented
3 days ago Hello Massi! This HTML code creates a page with a main title and four boxes, each dedicated to one of the mentioned technologies. Within each box, you can add any relevant notes or information. Embedded CSS is used to style the page by arranging the boxes in a flexible layout that adjusts to display on different screen sizes. You can expand or modify this code base to include more styles, functionality, or content as needed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prework Study Guide</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.box {
flex-basis: 45%; /* Adjust based on preference */
border: 2px solid black;
margin: 10px;
padding: 20px;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h1>Prework Study Guide</h1>
<div class="container">
<div class="box">
<h2>HTML</h2>
<p>Notes about HTML...</p>
</div>
<div class="box">
<h2>CSS</h2>
<p>Notes about CSS...</p>
</div>
<div class="box">
<h2>GIT</h2>
<p>Notes about GIT...</p>
</div>
<div class="box">
<h2>JavaScript</h2>
<p>Notes about JavaScript...</p>
</div>
</div>
</body>
</html>
HTML
User Story
As a bootcamp student I want the prework notes to be structured on webpage so that I can easily find and read information
Acceptance Criteria
GIVEN a Prework Study Guide website WHEN I visit the website in my browser THEN I see four boxes titled HTML, CSS, GIT and JavaScript with associated notes listed