Create a Functional Mockup

  • Owner: Glaurung
  • Difficulty: Easy
  • Type: Task
  • Asigned to: Me
  • Date Created: 10-February-2017
  • Priority: Blocker
  • Status: New
  • Resolution: Unresolved

Tags: #HTML #CSS #Design


The designer just handed the latest version of the design for the new maganize. Find the files in the attachments section, in Github, or in Sketch Viewer.

We included a Sketch version, a PDF and PNGs, they're all the same, feel free to use the one that you're more comfortable with.


The design for the website look like this:

Technical Notes

You could use any CSS library for the layout that you're most comfortable with, like Bootsrap. The sizes of elements and distrubution don't need to be 100% exactly like in the design.

The following would be preferred:

  • Avoid any CSS library
  • Use semantic markup
  • No JS should be required
  • Should work in any size, responsive
  • Replace the color rectangles with other images
  • Replace the gray rectangles with text, it can be dummy text like Lorem Ipsum
  • The absolute and relative size of elements is just like the design

When you're done, push to your repo and submit your answer.

Publish your site on Github pages or Firebase Hosting




To solve this, the following is recommended:

  • Github account
  • Basic understanding of Github
  • Basic knowledge of git
  • Basic understanding of HTML/CSS

Look at our help section for more information about this.


To create your answer follow this steps:

  • Fork the repo to your account, or download the zip file
  • Solve the ticket
  • Commit your code
  • Push your changes
  • Publish your version in Github Pages
  • Submit your response

Troubleshooting | Help

If you have need clarification with the project, files, or description, open an issue on github.

For questions with the platform, email us at [email protected]

For help with github or coding, consult our Learning and Resources page, where you will find information and links to tutorials and other content.