September 27, 2022: File/Folder Structures, CSS Layout/Positioning

Agenda

  • Check-in
  • Lecture (50min)
  • Github
  • File and Folder Structures
  • CSS Review
  • CSS Layouts: Default, Flex, Grid
  • Demo: Flex vs. Grid
  • 1:1s (80min, 5min each)
  • Sharing, Next Week (20min)

Today’s Files

I uploaded today’s demos to a repository on Github: https://github.com/taichiaritomo/demo-library

Github is a platform for sharing and collaborating on code. Repository is another word for a project on Github.

Github runs on a technology called Git, which programmers have been using for decades to work together on the same files, asynchronously.

Git is good for:
  • downloading code and syncing the updates
  • contributing to a code project that many other people (no limit) contribute to
  • resolving conflicts, like when two people change the same line of code in different ways

Clone the repository to your local computer…

As I do more demos, I’ll add them to this repository, and you can pull the new changes to your local computer so you can look at the code.

Next week, we’ll set up our own repository, and push our work to Github.

Code Editor and Preview

Opening a folder in Visual Studio Code

Opening your working folder in Visual Studio Code can make handling all of your files easier. (Screenshot →)

You can make new files from Visual Studio Code and they’ll get saved to your working folder. If you want to switch folders, just do Open Folder again and choose a different one…

Live Preview

Allows you to start a webserver on your local computer, so you can view your work. It’s a little more pro than dragging files into the browser.
  1. Go to Extensions (the icon with three squares and a detached square) in the left sidebar, and search for “Live Preview”
  1. Hit Command + Shift + P or go to View > Command Palette to open the Command Palette.
  1. Type Live Preview” and your browser will show your current working folder and HTML file, so that you can test.

Format Document

It helps to keep your code neat and easy to read. The Command Palette has a nice function called “Format Document” that’ll fix the indentation in your file.