MMC 3260: Your Digital Life

We'll be writing HTML and CSS by hand to understand the fundamental code interactions of the modern Web. Although we're writing code by hand, that doesn't mean you won't have a ton of tools to help you.

Lessons for MMC3260

Setup GitHub

(recording video during Week 2 labs)

How to submit exercises

(recording video during Week 2 labs)

Setup WordPress

https://vimeo.com/album/60951/video/72794857

(optional) Git from the command line

https://vimeo.com/album/60951/video/73242109

The Web Browser

https://vimeo.com/album/60951/video/73275757

Designing for a Multi-Device World

https://vimeo.com/album/60951/video/73275774

Links (41:43)

https://vimeo.com/album/60951/video/73314711

• 0:00 Setup a new GitHub repository for your project.
• 2:30 Clone your project repository so you can edit files.
• 3:30 You should have two folders that are Git repositories.
• 4:40 Downloading the Brackets code editor.
• 7:50 Creating the first page of your project.
• 9:30 Commit and sync with GitHub for Mac.
• 10:45 Go to github.com to confirm sync succeeded.
• 12:00 Why you want to develop locally.
• 14:15 Previewing HTML in the browser.
• 17:30 External links
• 18:00 Making an <a> anchor tag with elements, attributes and values.
• 21:50 <em> emphasis tag.
• 25:20 <code> code tag.
• 26:45 Absolute URLs contain http://.
• 29:00 Internal links.
• 30:45 Creating about.html.
• 31:45 <strong> strong tag.
• 32:45 File paths require a context.
• 35:00 title attribute for accessibility.
• 36:35 mailto to send email from a link.
• 40:00 See your project site live on the web.

Objects Are Made of Tags

https://vimeo.com/album/60951/video/73314759

Validating Your Code

https://vimeo.com/album/60951/video/74087366

Images

https://vimeo.com/album/60951/video/74087374

Lists and Tables

https://vimeo.com/album/60951/video/74087378

Cascading Style Sheets (CSS)

https://vimeo.com/album/60951/video/74087384

Using the GitHub.com Web Interface

https://vimeo.com/album/60951/video/74207102

Layout

https://vimeo.com/album/60951/video/75182215

Cropping and Optimizing Images with Photoshop

https://vimeo.com/76584113

• 0:00 Photo licenses and fair use
• 4:25 Cropping
• 8:40 Optimizing
• 12:40 Resizing
• 17:55 Alternatives to Photoshop

Iframe for Video, Map and Audio Embeds (1:55)

https://vimeo.com/76875414

• 0:00 Embed a YouTube video as an iframe

Float and Clear (15:16)

https://vimeo.com/76875430

• 0:00 Half-width element for desktop view
• 1:30 HTML div element
• 2:45 HTML aside element
• 5:20 Make a half-width aside using the width property
• 6:30 CSS float property
• 9:55 clear the footer

Using Web Inspector (37:20)

http://vimeo.com/78179491

• 0:30 Common filename problems
• 1:00 Forking a public repository
• 3:15 Renaming, rearranging and restructuring files
• 18:00 Ensuring we have semantic markup to allow for a 2-column design
• 21:58 CSS not loading? Check your path.
• 23:52 Chrome's web inspector and developer tools
• 31:50 2-column responsive layout

Media Queries (24:39)

https://vimeo.com/78232538

• 4:35 Your first media query
• 8:00 Leave side margins to allow for touch targets
• 8:15 Refactor (clean up) so we aren't applying repetitive styles
• 11:30 Styling nav for phones
• 16:15 display and text-align
• 20:20 combination selector
• 21:30 Exercise 4 explanation and requirements
• 22:50 CSS selectors: combination, descendent, id

GitHub Issues (4:50)

https://vimeo.com/78232975

Building ufspj.com with more complicated selectors (1:37:34)

https://vimeo.com/79536323

Using a custom domain name for your github.io repo (6:05)

https://vimeo.com/79538776

Docs: https://help.github.com/articles/setting-up-a-custom-domain-with-pages

Assignments for MMC3260

Due January 17: Set-up your Wordpress blog and Github account

Due January 31: Ex1 HTML quick fix

Fix any incorrect tag syntax or mismatched tags in 1.html-quick-fix.html

Use the W3C validator: http://validator.w3.org/#validate_by_input

Due February 7: Ex2 HTML links and images

Fix all broken absolute and relative URLs used for links and images.

Due February 21: Ex3 HTML wireframe

Due March 7: Personal website first draft

Due March 14: Ex4 CSS typography

• Set h1, h2 and p styles for desktop
• Override those styles for phone width

Due March 21: Ex5 CSS selectors (6:43)

• Fork TBD
• Make useful additions to style.css though the use of at least two selectors: descendent, adjacent, id or class.
• Create a pull request
• Confirm your pull request at URL TBD

Due ?: Personal website second draft