Workshop 2 - Browsers, HTML, CSS

Welcome to the second workshop! In this workshop we will be going over the role and functions of browsers for rendering of the 'frontend' of web applications. We will also be going over the fundamentals and basics of writing a static webpage using HTML/CSS

Workshop Topics

  • Introduction to Frontend Development
    We explored the fundamental concepts of frontend development, distinguishing it from backend development. We also learned about the dual role of web browsers in fetching and displaying content, as well as the crucial concept of the Document Object Model (DOM) as the foundation for web page structure.

  • HTML: The Language of Web Structure
    We delved into HTML as the primary language for encoding the DOM. The workshop covered essential HTML syntax and tags, emphasizing the versatility of elements like div, and the semantic importance of tags such as p, h1-h6, span, and strong. We also touched on multimedia elements (img), navigation (a, nav), and form components (button, form, input). Accessibility was a key focus, introducing semantic HTML and briefly mentioning ARIA labels and roles.

  • CSS: Styling and Layout
    We also introduced introduced CSS as the styling language for DOM elements, focusing primarily on external stylesheets. We covered critical CSS concepts including the box model (margin, border, padding, width, height), text styling properties, and layout techniques. Participants learned about different display types (block, flex, grid) and positioning methods. We emphasized the importance of responsive design, introducing flexbox and media queries, and briefly touched on animations and popular CSS frameworks.

  • Accessibility and Best Practices
    We emphasized the importance of creating inclusive web experiences. This included discussions on semantic HTML, proper use of alt text for images, and considerations for color contrast and font choices. We also introduced tools and resources for checking and improving web accessibility.

  • Introduction to Developer Tools
    We showcased browser developer tools as essential for frontend development. We demonstrated how to inspect and modify HTML and CSS in real-time, aiding in debugging and design iteration.

    Materials

Workshop recordingSlidesHomework
Zoom RecordingLinkAssignment 2