BONUS: Riyadh Blog

Learning Goals

Create an HTML structure for an existing mockup

Introduction

Web developers are often asked to work from a mockup of a potential webpage, generally referred to as either a mockup or comp. In this lab, you'll be asked to use a mockup image, source text and images, and create an HTML structure that mirrors the mockup image.

Getting Started

Fork and clone this lesson into your local environment. Navigate into its directory in the terminal, then run code . to open the files in Visual Studio Code.

Create an HTML Structure for an Existing Mockup

Process

In the index.html file, use the comments in the code to place the content from SOURCE.md in the proper locations. The image file MOCKUP.jpg can be used as a reference to build the index.html page as it appears.

Open index.html in a separate browser tab to see your progress as you work. Run npm test as you go to see test results.

Bonus

Use CSS in the style.css file in the css folder to change different aspects about your page such as:

font color
font size
font family
change the background image to a color
change the background color to a gradient

You can also try modifying these styles on-the-fly by modifying them with the [developer tools] of your [browser].

You might think: "BUT I DON'T KNOW CSS" (very well or at all). Developers constantly encounter this feeling. Since developers are constantly learning, we try to keep the commands as simple as possible. You might know more than you think! What happens if you change red to green? What do you expect? How would you validate your guess? Developers usually call this process "trying stuff" or "messing around" or "playing with stuff." While all those phrases sound like a joke, what they mean to say is that they're using the Scientific Method to validate their guesses into building a model.

It's possibly the most powerful learning technique possible. Toddlers and puppies are amazing at it!