BETAThis is a new service – your feedback will help us to improve it.

  1. DDaT Codelabs
  2. Building webpages
  3. Turn your prototypes into webpages

Turn your prototypes into webpages

Now, we're going to take the paper prototypes we created in the last module and translate them into webpages, using our new HTML and CSS knowledge.

You'll need;

  • The user stories for your app.
  • Your paper prototypes from the previous module.
  • Basic knowledge of HTML and CSS.

This is a good chance to revisit your original user stories and decide whether your drawings are still the best way to meet those needs.

Pay close attention to the kind of data you need to capture from users, and the best way to design a form to capture that data.

You may want to refine your drawings first based on your new HTML and CSS knowledge.

To-do

  1. Create a new pen in Codepen for each screen you drew in the last module.
  2. Write the necessary HTML and CSS for what you want the user to see on each screen.
  3. Get feedback on your work from fellow learners.

Consider leaving feedback for this module.

When you're ready, proceed to the next module.

Lessons last updated 12th July 2019. You can improve this lesson on Github.
Part of Building webpages
  1. Your first webpage
  2. Introducing HTML
  3. HTML attributes
  4. Classes and IDs
  5. Introducing CSS
  6. CSS selectors
  7. CSS specificity
  8. Creating layouts
  9. Responsive design
  10. Get confident with HTML and CSS
  11. Turn your prototypes into webpagesP