Design a Webpage!

Click on the left and right sides of this window to progress through the instructions. Or, you can use the left and right arrow keys. 😀

Want to see a step-by-step walkthrough of this activity on Youtube? You can find a link to the video in the Readme section by clicking the Readme toggle at the top of the page!

Make a Copy of the Template

In this activity, you will be able to design your own webpage about a topic of your choice.

To get started, make your own copy of this project!

1. First, make sure that you have already logged in at app.codecraftworks.com

2. Click the Clone button at the top of the page.

3. Refresh the page. Find the symbol at the top of the screen that looks like an arrow pointing in a circle and click on it.

Once you've done this, continue to the next page of instructions!

Pick Your Topic!

The first thing you’ll need to do is decide what you want to write about.

If you need ideas, think about some of your favorite things. You could write about your favorite hobby, animal, tv show, book, food, game, etc.

Or, you could create a project based on something you want to tell the world about. Think of something you want to teach other people, like a skill, a recipe, or something else you’ve learned.

Give Your Project a Name

Once you've picked a topic, click on the Settings toggle in the upper-right section of the page. Give your project a fitting name and click the Save Changes button.

Click the Settings toggle again to go back to your project.

Add a Title

Go to line 7 of your HTML section. Look for this line of code:

<h1>Your Title Here</h1>

Erase the words Your Title Here between <h1> and </h1> and replace it with your title. Make sure to leave <h1> and </h1> in your code.

When you're done, you should have something like this:

<h1>My Example Title</h1>

Add an Image

Now, let's add a picture related to your topic.

Using Google Images (or a site of your teacher's choice), search for the image you want. When you find an image you like, right-click on it and select Copy Image Address

Add an Image (Part 2)

Go to line 10 of your HTML section. Look for this line of code:

<img src="https://images.unsplash.com/photo-1519751138087-5bf79df62d5b?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="A generic stock image">

Erase the text between the quotation marks (" and ") next to src=. Paste the link you copied in its place, like so:

<img src="https://somewebsite.com/ page1/image.png" alt="A generic stock image">

Add an Image (Part 3)

On the same line of code, find the words alt="A generic stock image".

Replace the words A generic stock image with a description of your image.

<img src="https://somewebsite.com/ page1/image.png" alt="My Image Description">

This addition will not show up in your project preview, but it will be helpful for anyone using a screenreader to view your webpage.

Add an Image (Part 4)

Lastly, we want to give credit to the original source of the image.

Go to line 12 of your HTML and look for this line of code:

<a href="https://unsplash.com/ photos/62vi3TG5EDg" target="_blank">Image Source</a>

Replace https://unsplash.comphotos/62vi3T5EDg next to href= with the same image address you pasted on line 10.

Again, when you paste your link, make sure that it is between the quotation marks.

Tell Us About Your Topic!

Congratulations! You’ve made it through the hardest part 😃. Now, add some information about your topic!

Go to line 16 of your HTML and look for this line of code:

<p>Add a little about your topic here.</p>

Change the text between <p> and </p> to a sentence introducing your topic.

Tell Us About Your Topic! (Part 2)

Next, go to line 18 and look for this line of code:

<p>Add a little more about your topic here. Say as much as you want 😃</p>

We’re going to do the same thing we did with the last paragraph. This time, add more details about your topic!

Feel free to explain or share as much as about your topic as you’d like!

Challenge: Add a List

We’re almost done adding content!

The last thing we’ll do is add a list describing something about our topic.

For example, if we made a webpage about dogs, we could list different dog breeds, like this:

List of Dog Breeds:

• Golden Retriever
• Beagle
• German Shepherd

Think of what you can list about your topic!

Challenge: Add a List (Part 2)

On line 20, replace the existing text between <h2> and </h2> with a title for your list

Go to lines 23, 24, and 25. It should look like this:

<li>List Item #1</li>
<li>List Item #2</li>
<li>List Item #3</li>

Replace the existing text between the and tags with your list items.

Save Your Work!

Congratulations! You’ve finished adding content to your webpage! 🥳

The hardest part is over; all that’s left to do now is style your project’s appearance with CSS.

Make sure you save your progress so far! Click on the Save button in the upper left corner of the page.

You should see this pop-up when your project saves:

Style Your Project

Go into the segment of the code editor with the blue CSS heading.

We will only be working in the CSS segment for the rest of the project.

How to Change Your Colors

Let’s quickly go over how to change the colors in our projects. We’ll use the background color for our example.

You can view a list of usable colors in the Readme by clicking the Readme toggle in the upper right corner of the page.

How to Change Your Colors (Part 2)

For our webpage’s background color, go to line 2 of your CSS and look for this code:

background-color: floralwhite;

Replace floralwhite with your color of choice.

Note: if you pick a color with a two-word name like light blue or lime green, do NOT put a space between the two words.

For example, to use "light blue", you would write:
background-color: lightblue;

Now, repeat these steps for each color in your project!

Title Text Color

Change the text color of your title. Go to line 8, and look for this:

color: slategray;

Paragraph Text Color

Change the text color of your paragraphs. Go to line 14, and look for this:

color: black;

“Image Source” Link Color

Change the text color of your link. Go to line 20 and look for this:

color: mediumvioletred;

List Title Text (& Background) Color

Change the text color of your list's title. Go to line 25, and look for this:

color: midnightblue;

Change the background color of your list's title. Go to line 26, and look for this:

color: blanchedalmond;

List Text Color

Change the text color of your list items. Go to line 33 and look for this:

color: black;

How to Change Your Fonts

By changing our fonts, we can change the style of how our words appear on the screen.

Let’s quickly go over how to change the fonts in our projects. We’ll use the title for our example.

How to Change Your Fonts (Part 2)

For the webpage’s title, go to line 9 of your CSS code, and look for this:

font-family: "Ubuntu";

Replace Ubuntu with your font of choice.

Here are some fonts you can choose from:

Arial
Brush Script MT
Comic Sans MS
Courier New
Impact
Times New Roman

Try them in your project to see what they look like!

How to Change Your Fonts (Part 3)

Note: if you pick a font with a multiple-word name (like Comic Sans MS), make sure to put a space between the two words.

For example:

font-family: "Comic Sans MS";

Make sure that your code ends with a semicolon as well.

Now, repeat these steps for each font in your project!

Paragraph Text

Change the font of your paragraph text. Go to line 15, and look for this:

font-family: "Roboto Condensed";

“Image Source” Link

Change the font of your link. Go to line 21 and look for this:

font-family: "Roboto Condensed";

List Title Font

Change the font of your list's title. Go to line 27, and look for this:

font-family: "Ubuntu";

List Text Color

Change the font of your list items. Go to line 34 and look for this:

font-family: "Roboto Condensed";

Wrap Up!

Congratulations!! You’ve created a webpage! 🎉

Let's get your project ready to share!

1. Open up the yellow JS section of the code editor, below the CSS segment

2. Go to the last line of code in the JS section, which looks like this:

//document.getElementById("toggleBtn").click();

3. Erase the // symbols at the beginning of the line

This should hide the instructions when your project is first viewed.

Share Your Project

You can share a link to your web page with others by following these steps:

1. Click the Settings toggle in the upper right corner of the page. Check that your project is set to "Public" beneath the Project Name.

2. Click the Share button at the top of the page.

3. Copy the link provided and paste it anywhere you want to share your project!