Styling your portfolio
Starting with last week’s HTML and adding some list elements:
index.html |
---|
| <!DOCTYPE html>
<html>
<head>
<title>Hello World with MapLibreGl</title>
<!-- hint: remember to change your page title! -->
<meta charset="utf-8" />
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="styles/style.css">
<!-- MapLibreGL's css-->
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
<!-- MapLibreGL's JavaScript-->
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
</head>
<body>
<header>
Hello World
<!-- hint: you can make a menu with other links here if you'd like -->
</header>
<main>
<div class="portfolio">
<!-- Portfolio content goes here -->
<img src="me.png">
<h2>Where I work</h2>
<ul>
<li>Los Angeles Metro</li>
<li>UCLA</li>
<li>Yindee Games</li>
</ul>
</div>
<div id="map"></div>
</main>
<div id="footer">
Copyright(2024)
</div>
<script src="js/init.js"></script>
</body>
</html>
|
With the current CSS:
styles/style.css |
---|
| * {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: aqua;
}
html, body {
height: 80vh;
padding: 1rem;
box-sizing: border-box;
}
body {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
grid-template-rows: auto 1fr auto;
}
main {
display: grid;
grid-template-areas:
"portfolio map";
grid-template-columns: 1fr 1fr;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
.portfolio {
grid-area: portfolio;
}
#map {
grid-area: map;
height: 80vh;
}
footer {
grid-area: footer;
}
|
Last week, I created the footer
as an ID within the HTML, but I selected the footer in the CSS with no ID or class selector, like this:
styles/style.cssfooter {
grid-area: footer;
}
This is a problem because the CSS will not apply to the footer. To fix this, we need to add an ID selector to the footer in the CSS:
styles/style.css |
---|
| #footer {
grid-area: footer;
}
|
🎨 Styling the Portfolio
Now with that addressed, the styling while editing the portfolio is a bit off. As in literally, the bullet points are off to the side of the portfolio box!
Not a pad(ding) idea!
Michelle addressed this by suggesting to add a padding-left
to the ul
element in the CSS, which is a great simple solution:
styles/style.css |
---|
| ul {
padding-left: 30px;
}
|
What this does is give a padding to the left side of all list elements (ol
).
But since we are using CSS Grid, we can make this responsive by adding some properties to the .portfolio
class:
styles/style.css |
---|
| .portfolio {
grid-area: portfolio;
display: flex; /* This will make the items inside the portfolio flex items */
flex-direction: column; /* This can be row if you want the items to be side by side */
justify-content: center; /* This can be flex-start, flex-end, space-between, space-around, space-evenly */
align-items: center; /* This can be flex-start, flex-end, stretch, baseline */
}
|
What the flex
?!
Flex is short for flexible box layout
and it is the pre-cursor to CSS grid in that where CSS grid is a 2D layout, flex is a 1D layout. Flex is used to layout items in a container, distributing space among items in a way that makes the most sense. Read more on MDN here: CSS Flexbox
Alright, regardless of which method you use, your portfolio should look a lot better now! Now as for that pesky footer…
⚽ In-Class Exercise #3
- Add some styles (like
padding
or margin
) to the footer
CSS
(click to see the solution)
styles/style.css |
---|
| #footer {
grid-area: footer;
padding: 1rem;
background-color: #4677a0; /* Sets a darker background for contrast */
color: #fff; /* Ensures text is readable against the dark background */
text-align: center; /* Centers the footer content */
}
|
With that exercise complete, you should now have a much more visually appealing portfolio page!
🏁Checkpoint
- You should now have a styled portfolio with a list of places you have worked.
- You should now have a better styled bullet list and footer.
Your code should look like this:
index.html |
---|
| <!DOCTYPE html>
<html>
<head>
<title>Hello World with MapLibreGl</title>
<!-- hint: remember to change your page title! -->
<meta charset="utf-8" />
<link rel="shortcut icon" href="#">
<link rel="stylesheet" href="styles/style.css">
<!-- MapLibreGL's css-->
<link rel="stylesheet" href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" />
<!-- MapLibreGL's JavaScript-->
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
</head>
<body>
<header>
Hello World
<!-- hint: you can make a menu with other links here if you'd like -->
</header>
<main>
<div class="portfolio">
<!-- Portfolio content goes here -->
<img src="me.png">
<h2>Where I work</h2>
<ul>
<li>Los Angeles Metro</li>
<li>UCLA</li>
<li>Yindee Games</li>
</ul>
</div>
<div id="map"></div>
</main>
<div id="footer">
Copyright(2024)
</div>
<script src="js/init.js"></script>
</body>
</html>
|
js/init.js// Initialize the map
const map = new maplibregl.Map({
container: 'map', // container ID
style: 'https://api.maptiler.com/maps/streets/style.json?key=wsyYBQjqRwKnNsZrtci1', // Your style URL
center: [ -118.444, 34.0709], // Starting position [lng, lat]
zoom: 15 // Starting zoom level
});
// Add a marker to the map
new maplibregl.Marker()
.setLngLat([ -118.444, 34.0709])
.setPopup(new maplibregl.Popup({ offset: 25 }) // Add popups
.setHTML('Math Sciences 4328 aka the Technology Sandbox<br> is the lab where I used to work in '))
.addTo(map);
styles/style.css |
---|
| * {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
background-color: aqua;
}
html, body {
height: 80vh;
padding: 1rem;
box-sizing: border-box;
}
body {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
grid-template-rows: auto 1fr auto;
}
main {
display: grid;
grid-template-areas:
"portfolio map";
grid-template-columns: 1fr 1fr;
}
header {
grid-area: header;
}
main {
grid-area: main;
}
.portfolio {
grid-area: portfolio;
display: flex; /* This will make the items inside the portfolio flex items */
flex-direction: column; /* This can be row if you want the items to be side by side */
justify-content: center; /* This can be flex-start, flex-end, space-between, space-around, space-evenly */
align-items: center; /* This can be flex-start, flex-end, stretch, baseline */
}
#map {
grid-area: map;
height: 80vh;
}
#footer {
grid-area: footer;
padding: 1rem;
background-color: #4677a0; /* Sets a darker background for contrast */
color: #fff; /* Ensures text is readable against the dark background */
text-align: center; /* Centers the footer content */
}
/* nice solution for adding a padding for the bullet points! */
/* ol {
padding-left: 30px;
} */
|