Html Riyadh Blog

Problem Statement

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.


  1. Create an HTML structure for an existing mockup image and source text

Tasks for LearnIDE Environment Users

  1. Click the "OPEN IDE" button

Tasks for Local Environment Users

  1. Fork this repository.
  2. Clone your fork locally.
  3. cd into the local repo you just cloned.


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

HINT: If you'd like to take a look at your handiwork as you go, and you're working in the Learn IDE, you can preview the index.html file in your browser by following these steps.


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!

View Code Challenge 1 - Riyadh Blog on and start learning to code for free.

Unlock your future in tech
Learn to code.

Learn about Flatiron School's Mission

With a new take on education that falls somewhere between self-taught prodigy and four-year computer science degree, the Flatiron School promises to turn students with little programming experience into developers.

In the six months since the Manhattan coding school was acquired by WeWork, it has spawned locations in Washington, D.C., Brooklyn, and London. Now, WeWork is opening a fourth Flatiron School location, this time in Houston.

Adam Enbar, Flatiron School's cofounder, believes now is the time to grow. "How the world is changing has impacted working and learning in very similar ways. We think education fundamentally is about one thing: enabling people to pursue a better life."

Learn. Love. Code.
Students come to Flatiron School to change their lives. Join our driven community of career-changers and master the skills you need to become a software engineer or a data scientist.
Find Us