The technologies, languages, and libraries introduced in class are all well-documented online. If you are having difficulties, please take time to first troubleshoot online by yourself. Good programming is good searching.
You are not expected to memorize everything we discuss or immediately know how to build out your particular ideas. There is a wealth (an excess?) of information on web development: tutorials guides, “BEST” practices... The ability to search and sift through up-to-date and reliable information on sites like Stack Overflow or elsewhere is key. Really the ability to search for technical information quickly, thoroughly and efficiently is an essential skill of web development.
For this course, make sure your computer has the following:
- Zoom (Participants will receive an up-to-date password as an email the morning before each class.)
- A modern web browser: either Firefox or Chrome. Or Canary if you prefer.
- A reliable code / text editor: Atom, Brackets, Visual Studio Code, or Sublime Text. There are others too, take your pick. A good text editor for reading and writing code might have such useful features as Syntax Highlighting, Autocomplete, or Advanced Find and Replace functionality. Personally, I use Atom.
- Have a fully charged machine (and maybe a charging cable). We’ll be doing quite a lot of typing...
Codecademy is an online learning platform with free and paid courses in numerous languages.
Collaborative coding, Glitch, could be useful, too.
- Learn Chrome's Web Inspector, Chapters 1 – 4
- Chrome Dev Tools
- W3C HTML Validator
- Rubber Duck Debugging by Andy
Online Code Playgrounds
For isolating, testing, collaborating, and iterating code snippets:
- Mozilla: Getting started with the web: Dealing with files
- Mozilla: So what is HTML, really?
- Mozilla: So what is CSS, really?
HTML stands for Hypertext (HT) Markup Language (ML). It’s used to structure a webpage and its content. HTML is not a programming language, but a markup language.
- Mozilla: HTML
- Shay Howe: Building Your First Web Page
- Shay Howe: Getting to Know HTML
- W3C HTML Validator
- Lynda: HTML Essential Training
CSS stands for Cascading Style Sheets. It’s a series of rules used to style a webpage. Like HTML, CSS is not really a programming language—it's a style sheet language.
- Mozilla: CSS
- Shay Howe: Getting to Know CSS
- CSS Specificity
- Shay Howe: Opening the Box Model
- The Shapes of CSS
- Learn Layout
- DevTips on YouTube: CSS Basics
- DevTips on YouTube: CSS Positioning, Part 1
- DevTips on YouTube: CSS Positioning, Part 2
- Flexbox in 5 Minutes
- Flexbox Froggy
- CSS Tricks
- Lynda: Searching for “CSS”
Git, GitHub, Terminal, and UNIX
Git is a free and open-source version control system to keep track of (and share) changes in files.
GitHub is a for-profit, cloud-based computing service to help developers store and manage code: tracking and controling changes and allowing for collaboration.
Markdown is a markup language that easily lets people add semantic formatting (like headings, lists, etc.) to text documents. Often it’s used on the backends of websites or in readme files. Markdown files have the extension .md or .markdown.
If you want to create a site that uses markdown, try making it with Jekyll or Gatsby, or another CMS. Note these sites might require some special configuration to run on Netlify.
Keyboard shortcuts can be a useful tool. With limited real estate on screens and multiple applications open, it will become important that you can quickly interact with your code, in plain text, the web inspector and in the browser. These are some common shortcuts, grouped by application, that you might want to use while working. This list is by no means all-inclusive and will change based on your own machine's keyboard, applications, user settings, and operating system.
These shortcuts are meant for the software most of us are using in this class: Google Chrome, Atom, and a macOS.
⌘ Command Key
⌥ Option Key
⇧ Shift Key
⌃ Control Key
Switching between tabs: ⌃tab
⇧ arrow keys
Highlight to end of line:
⇧⌘ arrow keys
Highlight to end of word:
⇧⌥ arrow keys
Comment out highlighted text:
Find a folder or file in the project:
To automatically close HTML tags (Atom): https://atom.io/packages/autoclose-html
For a full list of shortcuts, go to File / Preferences / Keybinding.
Tip: you can also drag your project folder into your text editor for quick access to all of its files and directories.
Google Chrome and Firefox
- Open the Inspector:
- View page source:
- Full Screen:
- New Window:
- New Incognito Window:
- New tab:
- Switch between tabs:
- Close tab:
- Refresh the page:
- Hard refresh:
- Show/Hide the bookmarks bar:
- Zoom in:
- Zoom out:
- Back in history:
- Forward in history:
- Switch between applications:
- Spotlight (quick find an application):
- Screenshot of whole screen:
- Screenshot a selected part of screen:
- Screenshot a selected application: