Exercise 1:
Get to know the basics of HTML and CSS !
Sign up to  Codepen.io

Let’s make a layout.
Basic Layout Example 

Utilize these helpful links to make a layout. Coding isn’t about memorizing but looking up resources and references to work on top of them..

HTML References
W3 CSS
CSS Units
Paragraph Column
google fonts
Color Picker
Text Customizer
Dropshadow Generator
Perspective / Rotation Generator
Emoji Typography
Glyph HTML
Image Uploader

Choose 2 pens from the flexible pens and combine functions to make a web poster.

or

You may pick a pen from the stubborn list and combine with a flexible pen to make a web poster.

Your web poster should carry out a simple message. What happens when you stretch/shrink/scroll your browser? How does your container carry your message? Is there a surprising element when you scroll or hover or in time?

Design – Code – Design – Code is an appropriate journey to this project. Let your initial design be influenced / dictated by your coding restrictions, findings and troubleshooting. Your initial design isn’t the fixed final destination.  That’s prototyping.

Remember: Be Like Water !
Screen-based design and typography heavily relies on a (in)visible container. This container that carries your message should be flexible. So don’t approach this as if you are composing a printed poster and try to control all the elements on the poster. Your elements will move around, your paragraph texts lines will overflow as you shrink the browser width or view in different browsers (internet explore, Mozilla, Chrome). Approach this project as if your content is liquid and you are pouring your content into a container.