Library

Code Lectures

1. HTTP(S)>A(G)I?!1@#$%&!!
2. HTML
3. CSS
4. Boxes!
5. The Inspector
6. Media queries
7. CSS Flexbox
8. CSS Grid
9. An intro to JavaScript
10. Working with Images
11. Extra CSS

Code Practices

Debugging

Using GitHub

Viewing your webpage locally

When programming your first entry, you will probably want to preview the webpage's changes without uploading it to the internet. You can simply double-click on your index.html file, and it will open in your default web browser.

Using VS Code

VS Code is packed with features that make code writing easier. Some are pre-installed. Others are not. We will start exploring them in the coming weeks. But if you are eager you can already take a look at some of these links:

• HTML in Visual Studio Code
• How to install Extensions
  • The Live Server Extension
• How to use Emmet
  • Emmet Cheat Sheet

Using web-fonts

If you want to use a font for the web you need to include it as .woff or .woff2.

1. First find your font.You need either a .ttf or .otf file. If you don’t have that, try converting the file on cloudconvert first.
2. With your .ttf or .otf file, head on over to a webfont generator
3. Convert your file and download the package.
4. Include the files in your project under assets/fonts/yourfontname.

Process and Feedback

• Notes on Process
• How to give Feedback

Your personal Computer

Finder

Understanding how your computer works, how to organize files, and how to find things with ease will make your work a lot easier and produce less errors in your code.

• Get to know the Finder if you are using Mac
• Change how you display your folders

I strongly suggest you use column view to organize your files and folders. This will help you understand how folders and files are nested. I also like to enable the file-path at the bottom of the window. (Finder > View > Show Path Bar)

Trackpad and Mouse

• Customize your trackpad, so that it is comfortable to use or get a mouse.

When I use a trackpad I like to drag and drop folders and files from place to place. Three finger-drag makes it a lot easier in my opinion.

Files on your computer

Organizing files for the web

Establishing a system for how to organize your files will make your life a lot easier.

• Wirecutter, How to Organize Your Digital Files
• Sasha Portis on Organizing Files for the Web
• MDN, Dealing with files
• MDN, What is a URL?

File Naming

1. Do not use s p a c e s
2. Do not use Uppercase Letters
3. Do not use $p£c!al characters
4. Use hyphens - or underscore _ to separate words
5. Declare the file extensions for all files: .html, .css, .js .jpeg
   • A period . is only allowed to mark a file extension, like .html for example.
   • A period in the beginning of your file or folder will turn your file into an invisible dot file

• University of California, Naming Conventions for the Internet

Browsers

I'd recommend to not use Safari to work on your projects. Safari won't let you Hard Refresh your browser with Shift + CMD + R. In Safari you first need to enable Developer Tools and the process is all in all more complicated.

In order to make sure that you see the most recent version of your website and not a cached one, you need to sometimes hard refresh your browser with this shortcut.

Instead, use Firefox or Chrome.

At some point you will have to check cross-browser compatibility for you site and for this you need to test it in Safari, but that's for later.