Day 3: The shop page

The final HTML video

I'm learning a lot about how HTML, CSS and Javascript work together. It's interesting to see the video host build a website from scratch, starting with the HTML.

Today we are building up the Shop page of my fictional site for Andy and the Roasties.

Cropping photos

I needed to create images for the albums on sale. First I cropped four photos chosen almost at random from the Google Photos account. I cropped the photos to square, album-shaped images.

Creating sections

I then created three sections: one for Music, one for Merch and one for Cart. I added <h2> tags into each of these sections.

(A quick note: from here on, I'm only going to write about new things that I learn.)

I'm learning the <div> tags area really useful way for creating content types which can be repeated. For instance the albums in the store are created using a div tag which is then copied 4 times (replacing the details of each album each time).

Right now the four albums are on different lines because I've used <div> tags. But once I add CSS (in another lesson, I'm assured), I'll be able to display the albums in a grid.

A new row, a new <div>

I'm slowly learning that most times I want to put something on a new row, I can use a <div> tag.

Interesting to learn that setting the width of an image automatically sets the height of the image to retain aspect ratio.

Stopping early... oops

I stopped early today (after almost an hour of code) and I will pick up the video tomorrow (starting from 8:15 in). Here's a sneak peak of my shop page. I'm pleased with how easy it seems to add sections, divs and content to a static HTML page.

Other things I learned

• The 'href' in <a href="URL"> stands for hypertext reference.

• The target attribute tells the browser how to open a link. By default the target="_self", which means the link will open in the current browser tab. But you can also set target="blank" to open in a new tab.