Lessons

Lesson #01 #

  • Course introduction

    • Content First
    • Mobile First
    • Designing in Browser

  • HTML the basic

    • main tags, semantic tags
    • intro to box model, devtool to understand it

  • CSS the basic

    • how it is related with HTML code

  • DevTool for designer (play with website)

  • Exercise: Portfolio research

  • Exercise: Your first portfolio content draft compiled in HTML

Lesson #02 #

  • Review HTML portfolios from semantic perspective
  • Review portfolio research
  • CSS how it works
    • The selection concept
    • Type of selectors (tag, class, id, attribute)
    • Inheritance and composition
  • CSS basic properties
    • font, text, color, background, padding, border, list
    • how to transform a list into a menu
  • Exercise: create the given mockup in HTML+CSS

Lesson #03 #

  • Review homework
  • Box evidence with these properties:
    • padding, margin, border
    • color, background, radius
  • Units: px, em, rem, % and viewport units and how font-size is tight with them
  • The Box-Sizing and why is useful (test with real website) and the * all selector
  • The power of the background property
  • How to include external fonts from services (Google/Adobe)
  • Introduction to Flex
  • Exercise: create the given mockup in HTML+CSS

Lesson #04 #

  • Review homework

  • Flex the basics

    • direction, align, justify, flex, reverse, wrap
    • center an object
    • mobile layout header+footer+scroll
    • mobile layout header+footer+scroll + internal layout

  • Exercise: create the given mockup in HTML+CSS

Lesson #05 #

  • Review homework
  • Media Query
    • basics (min, max, width, height)
    • layout change
    • font-size with break-points
    • making a header menu with flex, with media query
  • Intro to Transitions
  • Intro to positioning
    • thumb over (intro to :hover)
  • Exercise: create the given mockup in HTML+CSS

Lesson #06 #

  • media query (some further examples)
  • transition (some further examples)
  • hover (some further buttons)
  • make a responsive headerbar
  • position (some further examples)
  • transform (translate, scale, rotate, with transitions, hover)
  • Exercise: create the given mockup in HTML+CSS

Lesson #07 #

  • Pseudo selectors, hover, nth-child
  • Scroll Behavior (fragment)
  • Pseudo selector Target
    • change prop
    • toggle visible
    • panel
    • transitions
  • Exercise: create the given interactive mockup in HTML+CSS

Lesson #08 #

  • Grid
  • Intro to Animations