Build Your First: HTML & CSS

Loading the player…


Planning content for photos area:

If we open up the finished version of the layout and scroll down past the features area, we come to our photos area. And this is the simplest area of the page. We’re going to just dump in two images inside the two calls, both of them set to call-medium. And at small screen, it’ll drop down to vertical layout. And when we go to widescreen it’ll become a horizontal layout. So, let’s go and do it.

Creating HTML elements and styling photos area:

This next step is going to be very fast. What we need to do is open up our index file, and under our photos we just need to place two images in here. One in this, and one in this column. So our first one is just going to be. And the source is going to be looking for assets, images, and then photo one. We also need to give it an alt attribute and we can write something like. This person seems to be writing on note paper, so we can use that as our alt attribute. Keep in mind the alt attribute is for a range of different purposes. It provides an alternative to the image, if someone’s using a screen reader, or they have images turned off, or they cannot access the images. Our second one is images two, photo two. And this is someone holding up. Something like that. Just giving a bit of instructions on what’s going on. And let’s go and have a look in a browser because, oddly enough, we don’t need to style these at all. They’ve already been controlled by the rows and the call mediums. Let’s go and have a look. And if we scroll down below, you’ll see there are two images sitting inside the containers. And at a certain point, they’ll drop so they sit one above the other.