check list

[natecioffi]

Content First

20 points (4 points each)

• [x] Write a summary of the article, 256 words or fewer in length
• [x] Use of Markdown to show the hierarchy and structure of the content, such as headings and subheadings, and paragraphs and lists
• [x] Illustrate a hero image, with a 2:1 ratio, in the existing style of Kevin Cornell
  • First, solve the illustration; second, fuss over the visual style
  • Scan in or capture as a photo; edit and save for web in Photoshop (see Imagery for details)
• [x] Provide an “About the Author” section with a brief bio, 2–3 sentences in length, and headshot photo #selfie
• [x] Provide a “Read Full Article” link, to the original, at the end of the summary

Semantic Markup

20 points (4 points each)

• [x] Use of section (header, footer, section, etc.), and grouping (figure, p, ul, etc.) elements for chunking content into semantically structured content
• [x] Use of h1–h6 for headings and subheadings
• [ ] Use and understanding of the difference between b and i, and strong and em
• [x] Use of a for external and fragment hyperlinks
• [x] Use of the alt attribute to provide a short description, alternative text, of the visual content displayed in the hero image

Imagery

20 points (4 points each)

• [x] Size hero image at 960px × 480px (2:1)
  • 960px is the required width, however the height can be shorter than 480px (if necessary)
• [x] Size headshot photo, cropped at 256px × 256px (1:1) or un-cropped at a maximum width of 256px wide
  • Use of the CSS property overflow to crop un-cropped headshot photo
  • Use of the CSS property border-radius to create a circular headshot photo
• [x] Save images using Photoshop, export Save for Web (Legacy)… hero image as a PNG (.png) using the preset PNG-8 128 Dithered and headshot photo as a JPG (.jpg) using the preset JPEG High
  • Name images hero-image-firstname-lastname.png and headshot-firstname-lastname.jpg (replace firstname and lastname with your first and last name)
• [x] Optimization images using ImageOptim
  • Hero image should optimize at under 128kb
  • Headshot photo should optimize at under 64kb
• [x] Use of an img folder to organize images

Style as an Enhancement

20 points (4 points each)

• [x] Use of meaningful CSS class selector names
• [x] Author and apply styles for mobile first
• [x] Author and apply media query styles for breakpoints
• [x] Author and apply a print stylesheet to print as a single-page
• [x] Use of a css folder to organize style sheets

Best Practices

10 points (2 points each)

• [x] When naming things — keep it lowercase, and use a hyphen (-) or an underscores (_), not a space (%20), for separating phrases in HTML and CSS, files, folders, etc.
• [ ] Format HTML and CSS via DirtyMarkup
  • BBEdit > Markup > Utilities > Format…
• [ ] Use CSS shorthand, Shrthnd, for font, margin, et al. properties for brevity
• [x] Use em values for better web typography; px to em via Pixem
• [x] Validate markup and style; fix all errors; resolve warnings (if possible)
  • HTML Validation
  • CSS Validation

GitHub

10 points (5 points each)

• [ ] Repo should contain only essential files:

  • README.md
  • Include a heading (title) and paragraph (description) for the project
  • Include a menu (navigation) list to the following sections:
    • Draft
    • Draft of summary (text and image)
    • Revision
    • Revision of summary (text and image)
    • Final
    • Link to final version of summary as Markdown (summary.md)
    • Link to final version of summary as HTML without CSS (summary.html)
    • Link to final version of summary as HTML with CSS (index.html)
    • Notes (optional)
    • List of odds and ends
  • index.html (HTML with added metadata, structure, and CSS)
  • summary.html (Markdown to HTML with added semantics)
  • summary.md (Markdown only)
  • css (folder containing external style sheets)
  • For example: main.css and print.css
  • img (folder containing images)
  • For example: hero-image-firstname-lastname.png and headshot-firstname-lastname.jpg
  • versions (optional folder containing tests, experiments, work in progress, etc.)
  • For example: test-1.html
  • refs (optional folder containing reference images [sketches, screenshots, etc.])
  • For example: sketch-1.png
  • Or include a list of references (links) in the README.md

• [x] Add a description and url to your GitHub repo

  • For example: A Summary of A Dao of Web Design and https://johnallsopp.github.io/dao-summary
• • -

Extra Credit

20 points (5 points each)

• [x] Redraw hero image using Illustrator or Sketch, not in Photoshop, and save as an SVG (.svg) #vector
• [x] Optimization of SVG (.svg) using SVGOMG!
• [x] Use of the src (to embed the .png) and srcset (to embed the .svg) attributes for providing fallback and future-friendly image formats
• [x] Test document outline for heading and section rank, HTML5 Outliner, and update any Untitled Section to display a proper heading (h1–h6) See also heading and section rank