- The Inspector
- Media queries
- CSS Flexbox
- CSS Grid
- Working with Images
- Extra CSS
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
If you want to use a font for the web you need to include it as
- First find your font.You need either a
.otffile. If you don’t have that, try converting the file on cloudconvert first.
- With your
.otffile, head on over to a webfont generator
- Convert your file and download the package.
- Include the files in your project under
Process and Feedback
Your personal Computer
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.
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?
- Do not use s p a c e s
- Do not use Uppercase Letters
- Do not use $p£c!al characters
- Use hyphens
_to separate words
- Declare the file extensions for all files:
- University of California, Naming Conventions for the Internet
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.