How to Structure Your Vision Board with HTML
Sarah Dye
Posted on February 8, 2024
Today you will start building your vision board website. In this post, you will be adding structural HTML code. You will finish setting up the head tag by adding links to the Google Fonts.
Then we go inside the vision-board div tag to create the individual boxes for the vision-board items. You will add the text and images inside of each box.
Let’s get started! Open your text editor and have your index.html file open. You will also want to have your style.css file and style-guide.md file open too so you can refer to them throughout this process.
If you don’t have the style-guide.md file, you can keep the style guide documentation from An Introduction to the Vision Board Project post open in your browser. Another good post to have open in the browser is A CSS Guide to Fonts. When you need to add Google Fonts to your website, this post will help walk you through the process of getting a link for your HTML file.
Objective One: Finish setting up the head tag
- Let’s begin by finishing the setup for the head tag. We are going to start by creating a link to our stylesheets. Inside your head tag, create an a tag with the href attribute set to the style.css file. Make sure to include the rel attribute and set it to stylesheet.
Add a second a tag underneath this one that has the href attribute set to the normalize.css file. Set the rel attribute for the second a tag to stylesheet.
Go to the body tag and add an h1 tag with some text inside. Save your index.html and go to your main.css file.
Create an h1 selector. Inside your new selector, set the color property to red.
Save the main.css file then open your recipe card website in the browser. Your h1 headline should now be red. If you don’t see a red headline, double-check your index.html file and href values in the link tags.
Once you see a red headline, go back to your index.html and delete your h1 headline. Save your index.html. Go to your main.css file and delete your h1 selector. Save your style.css file then close the file.
The last thing we need in our index.html file is the link to the Google Fonts we are going to use. Skillcrush wants to use the fonts Montserrat and Permanent Marker. Go to Google Fonts and select the fonts you want to use.
When you select the styles, make sure you set normal for Permanent Marker and 700 for Montserrat. Once your link has been created, paste the link in your head tag.
==>Click here to access Google Fonts!
<head>
<meta charset="utf-8">
<title>Vision Board Project</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:700%7CPermanent+Marker&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
Objective Two: Create 9 div tags
We are now going to add text in each div tag. If you get stuck, you can use the design comp to help you. Skillcrush gives students two hints to help them with this portion of the lesson.
One, you will be using br and strong tags. Two, the text you will use goes inside a paragraph or header tag.
Div One
1.Go inside your vision-board div. Create a div tag with the class name set to block. Copy this div tag and paste it 8 more times.
2.Let’s tackle these div tags one step at a time. Inside the first div tag, you will need two p tags. In the first p tag, add a span tag.
Give the span a class name called highlight. Inside the span tags add the text Grow. In the second p tag, add the text Learn to Design & Code Websites.
The & lets the computer know we want to use the & symbol on our website. Before the word Code add a br tag. Wrap Code Websites in strong tags.
<div class="block">
<p><span class="highlight">Grow</span></p>
<p>Learn to Design &<br><strong>Code Websites</strong></p>
</div>
Div Three
Move to the third div tag. Inside this div tag, add a p tag. Inside the p tag, you are going to write the following items.
- HTML
- CSS
- JavaScript
- WordPress
- Python
After the first four items, add a br tag at the end. The br tag will make sure each item is on a different line.
<div class="block">
<p>HTML<br>
CSS<br>
JavaScript<br>
WordPress<br>
Python
</p>
</div>
Div Four
Let’s start the second row of blocks. Go to the fourth div tag. Add two p tags and an img tag.
In the first p tag, add a span tag with the class name highlight. The text inside the span tag should say Freelance. In the second p tag, add the text Make Enough Side Cash to Pay off debt. Put a br tag before Pay. Wrap Pay off debt in strong tags.
<div class="block">
<p><span class="highlight">Freelance</span></p>
<p>Make Enough Side Cash to<br><strong>Pay off debt</strong></p>
</div>
Div Five
Now we are ready to move on to the fifth div tag. Add a p tag. Give your p tag a class name title.
Inside the p tag, put the text Vision Board. Before the word vision, you will want a span tag. Give the span tag a class name of marker.
Inside the span tag, put the text 2020. After the closing span tag, add a br tag.
<div class="block">
<p class="title"><span class="marker">2020</span><br>Vision Board</p>
</div>
Div Six
Let’s wrap up the second row with the sixth div tag. Inside the next div tag, add 2 p tags. Go to the first p tag.
Inside the p tag add a span tag with the class highlight. Inside the span tag put the word Travel. In the last p tag, add the text Plan a Trip Where I can Work Remotely. Put a br tag after the word can. Wrap the text work remotely in strong tags.
<div class="block">
<p><span class="highlight">Travel</span></p>
<p>Plan A Trip Where I Can<br><strong>Work Remotely</strong></p>
</div>
Div Seven
It is time to start the last row of blocks. In the seventh div tag, add a p tag. Inside the p tag, add the following text.
- Walk dog ++
- Meditate
- Yoga
- Snuggle Pup
After the first three items, you want to add a br tag at the end of the text to move each text item on a different line.
<div class="block">
<p>Walk Dog ++<br>
Meditate<br>
Yoga<br>
Snuggle Pup
</p>
</div>
Div Nine
1.We’ve reached the last block. In the ninth div tag, add two p tags. Inside the first p tag, add a span tag with the class name highlight. Inside the span tag, add the text Mind & Body.
In the second p tag, add the text Exercise More & Find Zen in Challenge. Put a br tag after the word more and in. Wrap the word challenge in strong tags.
<div class="block">
<p><span class="highlight">Mind & Body</span></p>
<p>Exercise More<br>& Find Zen in<br><strong>Challenge</strong></p>
</div>
2.Save your index.html and open your vision board project in the browser. You will now have all your text on the website.
Objective Three: Add Images to your div tags
The last thing we are going to do is add the images to the vision board. You are now going to go back through the div tags and add the images. I will be using the Skillcrush images from the starter file in this post, but you can use any images you like.
Skillcrush provides one hint for students. If you look at the design comp, a few of the blocks use both images and text. When you get to these blocks, the img and p tags will both be inside the div tag.
Div Two
Go to the second div tag. Inside this div tag put an img tag. Set the src to the link for your first image and give it an alt value. I’m going to set the src to img/flower.png and give the alt the value of flower.
<div class="block">
<img src="img/flower.png" alt="flower">
</div>
Div Four
Go to the fourth div tag. The last thing you need to do in this tag is add the img. Set the src to a new image and give a value for the alt attribute. In this example, I’m setting this image to img/piggy.png with the alt value of piggy bank.
<div class="block">
<p><span class="highlight">Freelance</span></p>
<p>Make Enough Side Cash to<br><strong>Pay off debt</strong></p>
<img src="img/piggy.png" alt="piggy bank">
</div>
Div Five
In the fifth div tag, add an img tag. Set the src attribute with a link to a new image and give a value to your alt attribute. In this example, my img tag is set to img/eye.png with the alt attribute being eye.
<div class="block">
<img src="img/eye.png" alt="eye">
<p class="title"><span class="marker">2020</span><br>Vision Board</p>
</div>
Div Six
Go to the sixth div tag. Add an img tag before the first p tag. Set the img tag with the src link to the fourth image and give the alt attribute a value. I’m going to use img/plane.png in this div tag with the alt attribute of plane.
<div class="block">
<img src="img/plane.png" alt="airplane">
<p><span class="highlight">Travel</span></p>
<p>Plan A Trip Where I Can<br><strong>Work Remotely</strong></p>
</div>
Div Eight
1.Go to the eighth div tag. Inside this div tag add an img tag. Set the src and alt attributes. In this example, I’m using img/doggo.png with the alt attribute for dog.
<div class="block">
<img src="img/doggo.png" alt="dog">
</div>
2.Save your index.html file and refresh your vision board project in the browser. We now have images on the website.
Conclusion
That’s a wrap for today’s post! All the structural HTML should now be on the page. You are now officially ready to move on to the CSS portion of this project.
In the next post, you’ll begin adding CSS to the vision board website. You will add a background to your website, change the text, and start playing around with the sizing of the board so it can look more and more like the design comp.
This post was originally published on August 31, 2021 on CodeNewbie. I made minor changes to the original post to work here on DEV.
Posted on February 8, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.