Exercise Notes

Learning goals

  • Learn how to develop effective user interfaces

Programs used

HTML & CSS

Build yourself a web page to tell the world a bit about yourself and your coding journey. Try to use a range of different elements:

  • A list of programming languages you’re learning or would like to learn
  • Information about something you’re interested in
  • Your favourite foods, ranked in an ordered list
  • Links to some websites you think are well designed
  • A picture of yourself (remember to include an alt attribute so it’ll be accessible to anyone using a screen reader!)

Use GitHub pages to host your site for everyone to see.

SASS and Less

  1. Rewrite the CSS you wrote in the Part 1 to take advantage of SASS features. Do you think the code is now easier to understand?

Refactoring

Remember that any existing CSS is valid SCSS or Less, so you can refactor in stages.

  1. Once you have a SASS compiler working (ideally with some sort of watcher), try setting up CSS source maps. You’ll know this is successful when the DevTools starts referring to your SASS files rather than the generated CSS

  2. You can also try setting up in-browser editing of your SASS files.

In-Browser Editing

You’ll need to give your browser permissions to edit your files.

  1. Try adding more pages and sophisticated styles to your site!

  2. If you want something fancier have a look at CSS transitions for on-hover effects, or CSS animations.