⇦ Back

WDX-180

Web Development X

Schedule

Study Plan

Flappy App: Recreating a web page from a design mockup

This is a project that should ideally be completed in 3 to 4 days. You will go through a series of videos, where we take a webpage mockup and turn it into HTML and CSS code.

Below you’ll find a list of videos that will take you through the process of decomposing the mockup into an HTML structure and gradually building and styling each section of the mockup. The total duration of the videos is around 3 hours.

Here’s how you should proceed:

At this step, the notes you took during the first run will help you move on and find what you need to complete each step.

If you get stuck and don’t see the expected results, don’t worry. Move on and you’ll be able to compare your code with the video, after you’ve finished each step. You will then notice what went wrong, what misconceptions you’ve held and take notes.

It’s recommended that you create 2 separate folders and VSCode workspaces for these last 2 steps.

All the videos can be found on this YouTube playlist.

Good luck!

The Videos


Found a content problem with this page? Want to contribute?

Summary

Insights

By going through the FlappyApp challenge, you’ll be able to learn about how to think in boxes and more specifically how you can decompose a design mockup into the basic HTML elements that make up the layout. You’ll gradually start to detect the basic rows and columns in each image or design that you see out there, then go deeper and find the nested rows and columns so you can use the power of CSS rules to lay out the various sections and elements of the design.

You’ll be able to understand the power and usefulness of utility classes, that will help you reuse your CSS styling across your HTML just by applying these classes as values to the HTML class attribute. Popular CSS libraries like Tailwind are based on this concept.

Another insight that you’ll probably gain from this project is the way to organize your HTML and CSS. Your CSS selectors should be laid out hierarchically and according to the HTML structure. If your page has a <header>, <main> and <footer> sections, then your CSS selectors must follow that order too so that you can quickly find the selectors that update the styling of each section in your HTML.

Exercises

Extra Resources

Sources and Attributions


Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham