First Class!

It Begins

Webpages are just text, but what does that mean? In this class we'll learn some of the fundamentals of how to get around the text files that make up a website and dive in to them to get used to editing HTML and the other kinds of special text that we use to make a site.

Class recap

Today's class is an intro to the whole workshop, what it means to make your own website, and some basic tools and practices.

  • Intro and presentation.
  • Create your own site by copying the Rad Web Class 2 Starter Site on Glitch
  • Intro to the file navigator and editor.
  • Intro to new kinds of text: Javascript, CSS, and Markdown
  • Practice keyboard skills by editing the text in today's exercises:

Exercise 1 -- Get to Know Glitch

  • [ ] Change the title, description, and URL for your site
  • [ ] Upload a new asset to the Assets directory
  • [ ] Preview the site in a new window
  • [ ] Open the site Logs
  • [ ] Manually refresh the site in Terminal

Exercise 2 -- Move and Edit files

  • [ ] Find a file called first-class-stuff.html
  • [ ] Move it into the directory that contains the file you're reading right now. When you do, this link should work.

Keyboard Skills

Glitch is a plaintext editor and it uses some common keyboard shortcuts to give you superpowers for editing code.

  • [ ] Find comments in the HTML, CSS, and Javascript
  • [ ] Use cmd + / to turn things on and off in each spot
  • [ ] Use cmd + l to select an entire line
  • [ ] Use cmd + d to select an element and then all the subsequent elements that match it
  • [ ] Use cmd + click to put your cursor in multiple places
  • [ ] Use cmd + [ and cmd + ] to indent or un-indent a whole line
  • [ ] Click the "prettify" button to clean up the page

Extra Credit -- Website eraser

This is a browser extension that lets you delete parts of any site. (Don't worry they come back when you refresh the page.) This is a super fun way to investigate the structure of a webpage. Try it on a complex site that deserves to be cut up, like amazon.