Practice 1

For this activity, you'll implement a part of the wireframes that we viewed in the Project Plan using HTML & Bulma CSS.

Here's an example we looked at in class:

Wireframe

You can start with this Codepen Template of an HTML page which includes Bulma CSS already - https://codepen.io/intricatecloud/pen/mdjLOLo

If you'd like to work locally instead, you can use this as your baseline (copied from the codepen):

<html>
<head>
  <!-- This link pulls in the Bulma CSS Stylesheet -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
</head>
<body>
  <div>Start writing your content here!</div>
</body>
</html>

The only things you'll need to complete these tasks is

the Bulma docs on the grid system
the Bulma docs on colors
the steps in Laying out HTML

View examples from real students when you're done.

https://codepen.io/jm2455/pen/yLqjMqm

https://codepen.io/jackiejiaqiliu/pen/RwBypgZ

Want to add your example to the list? Click on Edit this Page using the link below here 👇