Exercise 1
HTML
CSS
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
Exercise 2
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.
Flexible Pens (easy):
Relative vs Fixed
Perspective
Moving Type
Collapse Content
Footnotes
Video Background (Vimeo Only)
Blend Mode
Draggable Element
Nav and Scrolling
Hover Tooltips
Hover To Hide
Hover To Shake
Various Classes on Typography
@Media Query
Responsive Narrative
Background Color Animation
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.