Alfredo teaches web design & development (The Utility Belt lecture)
The Utility Belt
Lecture outline
Approaches for debugging code and an introduction to git. Lecture slides will be made available on the day of the lecture (June 3).
In preparation for lecture...
Please close up any laptops, cellphones, Pippin's, Whoops and other 'beep-boop' devices.
Submission URLs
When submitting a web address to an assignment it should not start with https://github.sfu.ca/....
It should start with https://pages.github.sfu.ca/.
Notice the "pages" at the beginning! (Unless we explicitely request you to upload a different URL)
:focus and images
You cannot use the keyboard to navigate to an <img> element as they are not interactive elements. You will have to wrap it in an interactive element to style it upon interaction:
a:focus img {
/* this selects an img inside of a anchor that has focus */
}
Code questions
Are pixel units used for font sizing?
p { font-size: 16px; /* << not responsive */ }
p { font-size: 1rem; /* << responsive */ }Are pixel units used for element sizing?
p { width: 320px; /* << not responsive */ }
p {
max-width: 30rem;
width: 50%; /* << responsive */
}
div { border: 1px solid black; /* << ok! */}Code questions
Are there any spaces in the filenames?
/my project/AWSOME PROJECT FILE.HTML
https://pages.github.sfu.ca/my%20project/AWSOME%20PROJECT%20FILE.HTML
Meet your toolkit
Dev Environment
Adding to the toolkit
- Coding application
- FTP Client (virtual)
File Structure
Keep things clear
Things to ensure:
- Use a descriptive naming convention: index.html, product-apple-detail.html
- Avoid naming based on generics: page01.html, page02.html, page523.html
- No spaces in file or folder names: use_underscores.html or use-dashes.html
- Think categorically: logo-siat.jpg, instead of siat.jpg
Dev Environment
Adding to the toolkit
- Coding application
- FTP client (virtual)
- Developer's tools + validators
Dev Environment
Adding to the toolkit
- Coding application
- FTP client (virtual)
- Developer's tools + validators
- Photo editor/compressor
Save for Web
Images should be sized and compressed appropriately for web distribution. We will talk more about resolutions in the coming weeks, but some suggested tools for compression:
P2 Expectations
While working on a team, please note:
- Both team members must contribute code.
- Both team members must use git.
Working as a Team
The horror, the HORROR!
Come to an agreement on:
- Naming conventions
- Work towards common code
- Maintaining files
- Both do the code
Dev Environment
Adding to the toolkit
- Coding application
- FTP client (virtual)
- Developer's tools + validators
- Photo editor/compressor
- Git client
This drawing is explained in detail during lecture
git ready
In preparation for our tutorial today, please follow the instructions at ah.link/git