We will look into tools for advanced web development. We will start with how to structure an application so that it is scalable and easy to collaborate on. We will also briefly introduce external resources that you may find useful for your project; the list is available on the coding resources page.

The rest of this coding lab will focus on how to build a responsive web. We will briefly cover flexbox and media queries and how they can add responsiveness to a website. We will then look into CSS frameworks that help you achieve the same effect out of the box. The coding activity will use one of CSS frameworks to build a website and host it on Github Pages. To do so, we will also go over the very basics of Git (but not much). There will be no Javascript this time.

Important: bring a laptop to this class!

• Coding Activity Starter Code
• Coding Activity Instruction

Required preparation:

• Install Git
• Create a Github account
  • If you want a private repository, you can get it free with education pack.
• Install VSCode (Because it will be used in the lecture. Only necessary if you are not familiar with Git, command-line interface, web server etc)
• Install VSCode – LiveServer plug-in (Only necessary if you don’t know how to run a local web server)

Optional readings

• Learn Git in 15 minutes
• Flexbox
• Media queries

Lecture Slides