WEEK 3: HTML Flow (Jan 21)

To Do This Week

Blackbird HTML Submission
Due: January 24th

  • Complete the HTML for the Blackbird project (mostly done in class).
  • Upload the “blackbird” folder (with an index.html file and an “img” folder for images) to the server following last week’s FTP instructions.

Module Notes

Codecademy Strategies

  • Focus on recognizing and using patterns: <element attribute="value"></element>

Best Practices

  • Backup: Upload your projects regularly.
  • File Names: Use lowercase letters and avoid spaces.

Finding Your Project URL

Format: dtc-wsuv.org/yourfoldername/projectname/

Info-Card Class List
Blackbird Class List

Validating HTML

Use the Validator.org or the Web Developer extension to validate your Blackbird HTML. Troubleshoot any issues with your code or FTP uploads as needed.

Sublime Text Tips

  • Open project folder.
  • Use the sidebar toggle for navigation.
  • Enable word wrap for better readability.
  • Use find/replace for efficient editing.

Blackbird HTML

  • Open the Blackbird project folder in Sublime Text.
  • Blackbird HTML
  • Wrap all content inside a <div id="wrapper"></div>.
  • Make sure you have an anchor link to #bio

HTML Flow Demo

  • Add color borders to elements to visualize structure.
  • Adjust width, height, and overflow properties.
  • Understand block vs. inline elements.
  • Practice using attributes: id, class, and style.
  • Search and Add Blackbird image to site

Web Images

  • Resize images for web use.
  • File formats: GIF, PNG, JPG
  • Transparency considerations.
  • Style dimensions vs. actual dimensions.
  • Understand resolutions and PPI.

HTML Review

  • HTML: Hypertext Markup Language
  • HTTP: Hypertext Transfer Protocol
  • FTP: File Transfer Protocol
  • Absolute vs. relative URLs
  • index.html
  • Basic structure: <html><head></head><body></body></html>
  • <title></title>
  • HTML5 semantic elements: p, img, header, nav, article, section, aside, footer
  • Nested elements: parents and children
  • Block vs. inline elements
  • Headings: h1 to h6
  • Common tags: <div>, <span>, <p>, <em>, <small>, <br>, <img>
  • Attributes: id, class, style
  • <a>: Internal and external links
  • Doctype declaration: <!DOCTYPE html>
  • Comments: <!-- comment -->

Helpful Resources

Workshop

Introduction to CSS next week!

  • Hands-on practice with HTML and project setup
  • Reviewing Blackbird HTML structure and validation