Intro to Web Design: Let's Make a Portfolio - HTML

Planning
Step 1
In this lesson we will make a Welcome and an About page for our portfolio
Temp1521750166

Once we have some content on our page we will learn to make it prettier in the next lesson.

Information
Step 2
Each part of our page is broken into boxes called "Elements".
Temp1525127669
Step 3
To create an element we need to add a "Tag"

Type <p> to make a paragraph tag

Notice it automatically creates a closing tag (end tag) for you

Step 4
Let's use this paragraph to Introduce yourself (You may use your username)
Temp1521753888

Everything between the tags is your paragraph element.

Check Your Work
Step 5
If you press 'Save' you can see your Website displayed down here
Temp1521754205
Information
Step 6
You can also press "Toggle View" to see your website side-by-side with your code
Temp1521754299

This view is better when you are working without a lesson.

Step 7
Add a second paragraph about yourself
Temp1521754350
Planning
Step 8
Next we're going to add an image to our page.

Find an image of something you like and save it to your computer

Temp1521754647
Step 9
Upload the image to your repo assets

Either by drag and drop:

Temp1521755046

or by clicking the new image button:

Temp1521755021
Step 10
Now we can use an image tag <img> to add an image to our page

This element tag needs an attribute called "source" in order to know which picture to display.

Temp1521755227
Step 11
Hover over your image asset and click on the clipboard icon
Temp1521755311

This copies the image source to your clipboard.

Step 12
Paste the source between the " "s

Like this:

Planning
Step 13
Next we'll add a title to our page using a "Heading" tag

There are 6 different heading tags available

Temp1521759603

Notice the bigger number equals a smaller size.

Check Your Work
Step 14
You should see the image appear on your site

If you are like me, this image is way too big!

Temp1521759692
Step 15
You can add a "width" attribute into your image tag

You can set it to a number of pixels wide

Temp1525128071

Or you can set it to a percentage of the window size.

Temp1521760112
Check Your Work
Step 16
You should now have an image that fits the screen nicely
Temp1521760195
Challenge
Step 17
Add a second section to your page

You must use at least one <p> and one of the <h > tags.

Temp1525129402
Step 18
Create a new file called "about.html" and give it a heading tag
Planning
Step 19
We'll need to create a "Link" to our About page. To do this we use an <a> tag

<a> tags have an attribute called href which stores the link

Temp1521761469

You could put an image instead of "Click here" if you want the image to act as your link!

Step 20
Add a link to your about page

Set href = "about.html"

Temp1525129812
Information
Step 21
You can of course link to anywhere by putting the link as the href
Temp1525129956
Challenge
Step 22
Add a Back link to your "about" page that takes the user back to "index.html"
Planning
Step 23
In a moment you will be challenged to create a new type of element called a "list"

A basic list has an ordered list <ol> or un-ordered list <ul> tag
With list item <li> tags in-between:

Olul
Challenge
Step 24
Edit your "About" page to include a list of things you like

You should also add an image of something you like to this page.

Soon we will learn to add our Scratch and Javascript projects to our site!

Temp1525131355
Information
Step 25
Note that lists may seem boring now, but they can be really cool later on

Here is an example where someone used a list element as part of their slideshow

Temp1525131623

We will make something like this when we get to using Jquery

Planning
Step 26
In the next lesson we will learn about stylizing our pages with CSS

There are of course plenty of other but you've been given most of what you need already!

Temp1525131175

If you're been wondering how html pages can ever look good, the answer is partially CSS!

Intro to Web Design: Let's Make a Portfolio - HTML Info

Account

MVCode Clubs

Created By

Newprofile jamie

Course:

Create a Portfolio

Access Level

premium

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach