First, please download the required files. In this exercise, you will make the front page of a responsive website. As always, use a mobile-first approach. There will be three responsive states: phone, tablet, desktop. Screenshots are provided with the downloaded files. You will write all the HTML & CSS. The Main Article Each paragraph in […]
Category: HTML
A Series of Short Videos I have posted a series of short videos about Emmet on the Loom video cloud hosting service. This service is new, so it’s missing a few common UI features, including the ability to sort the videos. As a result, they are presented by default in reverse chronological order: exactly backward […]
A really neat way to break out of the boxiness that is a default condition of CSS is to use images that appear non-rectangular. It’s very common, for example, to see images rounded with CSS. Assuming that the image has equal height and width, this code will make it perfectly round: Another interesting thing you […]
First, please download these files. This zip archive contains a folder of images. Now download these screenshot files. Make a new folder named vancouver-gallery-yourname. Put the downloaded images folder inside the folder you just made. You will make all the HTML & CSS for the exercise. The Task Make a page that a header and […]
If you have a lot of content to mark up, using Visual Studio Code’s features can make that job a lot faster, and more consistent. The movie below shows a couple ways to leverage multiple selections and Emmet’s wrap-in-tag functionality. Get comfortable with the techniques used here and you’ll save lots of time. Here’s the […]
First, please download the starter files you will need. Once you’ve unpacked the files, you will see that are two folders of images whose names show the orientation of the images inside them: unsplash-2020-landscape unsplash-2020-portrait Next please download the screenshots. In this exercise, you will make a front-page of a magazine-style website. There are four […]
For this exercise, please first download these files. Once you unzip the files, you will see that there is an index.html file, a folder of images, a screenshots folder, a file called index-not-marked-up.html. There will be two ways to do this exercise: CSS Emphasis: the index.html file has most of the HTML & the content […]
(…continued from part one of this exercise…) Now we’ll build the additional layouts the site requires. Header Area If we resize the screen quite wide, the site logo will get absurdly big. We’ll limit that by using our space more economically. First resize the browser window to determine at what size to change the header […]
This is a step-by-step run-though of the layout in this exercise. First, please first download these files and open them up as a new project in your editor of choice. The index file has most of the content for the page. We’ll add a bit more HTML as we go through it. Note: there will […]
First download these files: DTN Magazine Layout If inside the downloaded folder is a file called Instructions, delete it. It was for an older version of the exercise. Your Task Inside the downloaded content is a folder of screenshots. Your job here is to make the page look as close as possible to the layouts […]