Skip to content

Show & Tell

Purpose

Show & Tell

A Show & Tell is an opportunity for you to challenge yourself and deepen your understanding of web development concepts. Push yourself to select a concept that you find challenging or unfamiliar. The process of researching will help solidify your knowledge and contribute to the learning experience of your classmates. Have fun with it!

Instructions

  1. Choose one of the following web development concepts below. If there is another topic you are interested in researching, let me know!
  2. Research your chosen concept thoroughly. You can use textbooks, online resources, articles, and code examples to gather information.
  3. Include visual aids such as diagrams, drawings, code examples, or images.
  4. Share your research with the class in the #share-and-tell Slack channel

Module 1 Topics

These topics can be researched anytime during the semester.

These topics introduce you to foundational ideas in web development. Pick one subtopic that sparks your interest, and focus on understanding the basics!

Click on any of the topics below to see focused topics with example tasks.

History of HTML & CSS

Pick one area of focus:

  • Key Milestones in HTML Evolution: Learn about one major update or feature introduced in HTML, from version 1.0 to HTML5. Example Task: Create a timeline or explain about one milestone in HTML's history.
  • The Creation of CSS: Explore why CSS was introduced and how it changed web design by separating content from presentation. Example Task: Explain why CSS was created and give one example of how it’s used.
  • The Impact of HTML5: Investigate how HTML5 added new features like semantic tags and multimedia. Example Task: Describe one feature introduced in HTML5 and how it’s helpful.
Accessibility in Web Development

Pick one area of focus:

  • Web Content Accessibility Guidelines (WCAG): Learn about one key principle of WCAG (e.g., perceivable or operable). Example Task: Explain one or two WCAG principles and how it helps users with disabilities.
  • Assistive Technologies: Research tools like screen readers and how they interact with HTML content. Example Task: Explain what a screen reader is and give an example of how it works with a webpage.
  • Common Accessibility Mistakes: Identify common errors and how to avoid them. Example Task: Explain two accessibility mistakes and describe how to fix it.
The Evolution of Web Browsers

Pick one area of focus:

  • Milestones in Browser Development: Learn about key features introduced by browsers like Netscape, Internet Explorer, Chrome, or Firefox. Example Task: Write about one major innovation introduced by a specific browser.
  • Modern Browser Competition: Research how browser engines modern web experiences. Example Task: Explain how browser engines affect website performance.
The Role of Doctype in HTML

Pick one area of focus:

  • What Does the Doctype Declaration Do? Learn how <!DOCTYPE> ensures browsers render HTML correctly. Example Task: Write about the purpose of the doctype declaration in modern HTML.
  • HTML Standards and Quirks Mode: Explore how the doctype affects browser rendering modes. Example Task: Explain the difference between standards mode and quirks mode.
HTTP Protocol

Pick one area of focus:

  • HTTP Request/Response Cycle: Learn how browsers request and receive data from servers. Example Task: Explain what happens when you click a link on a website.
  • HTTP Methods: Explore common methods like GET and POST. Example Task: Describe what the GET method does and provide an example.
  • HTTP Headers and Cookies: Research how headers and cookies manage data. Example Task: Give a short explanation of how cookies work.
DNS (Domain Name System)

Pick one area of focus:

  • What Happens When You Type a URL into a Browser? Learn the steps of DNS resolving domain names to IP addresses. Example Task: Give a simple explanation of the DNS lookup process.
  • What is a DNS Server? Research the purpose and types of DNS servers. Example Task: Explain what a DNS server does in your own words.
  • What Are Common DNS Records? Learn about records like A, CNAME, or MX. Example Task: Choose one DNS record type and explain its purpose.

Module 2 Topics

These topics can be researched anytime during the semester, but may require some knowledge of CSS.

These topics focus on creating user-friendly, visually appealing websites. Pick one subtopic to learn how to make your designs even better!"

Web Design Principles

Pick one area of focus:

  • The Role of Typography in Web Design: Learn how fonts, sizes, and spacing affect readability. Example Task: Choose a font pairing and explain why it works.
  • Choosing a Color Palette for Websites: Discover how to create harmonious color schemes. Example Task: Design a simple color palette for a website and describe your choices.
  • What Is Visual Hierarchy in Web Design? Learn how layout and contrast guide users through content. Example Task: Find two real websites—one with strong visual hierarchy and one without. Explain how effectively they guide users to important content. .
User Experience (UX) Design

Pick one area of focus:

  • What Makes Navigation User-Friendly? Learn best practices for designing menus and links. Example Task: Describe one feature of good navigation (like clear labels).
  • Buttons and UX: Investigate how button design affects user interaction. Example Task: Explain the difference between a primary and secondary button.
  • What Makes a Homepage Effective? Learn the key features of a user-friendly homepage. Example Task: Show one way to make a homepage easier to use.
Cross-Browser Compatibility

Pick one area of focus:

  • Common Browser Differences in Rendering: Learn why websites look different in some browsers. Example Task: Explain one common issue and how to fix it.
  • Testing Tools for Cross-Browser Compatibility: Research tools like BrowserStack or DevTools. Example Task: Choose a testing tool and describe how it works.
  • CSS Features for Ensuring Compatibility: Learn about vendor prefixes or fallbacks in CSS. Example Task: Write about one CSS technique that ensures compatibility.
Web Browser Rendering

Pick one area of focus:

  • How Browsers Parse HTML and CSS: Learn how browsers turn code into webpages. Example Task: Explain one step in the rendering process.
  • The Role of JavaScript in Rendering: Research how JavaScript changes web pages dynamically. Example Task: Describe one way JavaScript modifies the DOM.

Module 3 Topics

These topics can be researched anytime during the semester, but are best completed after understanding Regular Expressions and Responsive Web Design concepts.

These topics will help you understand more powerful concepts in web development. Pick one subtopic and focus on understanding its basics!

History of Regular Expressions

Pick one area of focus:

  • The Origin of Regular Expressions: Research how regular expressions started and their connection to computing. Example Task: Explain who invented regular expressions and why.
  • Why Regular Expressions Are Important Today: Explore how they’re used in web development. Example Task: Explain one use of regular expressions, like validating forms.
Responsive Web Design

Pick one area of focus: - The Concept of Mobile-First Design: Learn how starting with mobile layouts improves usability. Example Task: Describe the steps to create a mobile-first design. - Responsive Images and Media: Discover techniques for optimizing images on various devices. Example Task: Explain how srcset works in responsive images.

SEO Basics

Pick one area of focus:

  • The Role of Meta Tags: Learn how meta tags like description and keywords affect search engines. Example Task: Explain the purpose of the meta description tag.
  • Improving Page Load Speed: Research how faster websites rank higher in search engines. Example Task: Explain one technique for optimizing page load speed.
Introduction to Version Control with Git

Pick one area of focus:

  • What Is Version Control? Learn how tools like Git help developers track changes. Example Task: Write about one advantage of using Git for web development.
  • Basic Git Commands: Research how to use git add, git commit, and git push. Example Task: Describe how you would save changes to a project using Git.

Share your research

You are free to choose the format for sharing your research. It doesn't have to be limited to PowerPoint or Google Slides. You may choose from various presentation formats, such as:

  • Recording: Record yourself talking or giving a coding demo
  • Written Document: Create a detailed written document with code examples and explanations.
  • Interactive Web Page: Build a simple web page that explains the concept with interactive code snippets.
  • Poster Presentation: Design a visual poster with diagrams, code snippets, and explanations.
  • Slides: If you prefer a slide-based approach, go for it!
  • Any other way you can communicate your knowledge!

Free Screen Recording Software

Check your audio first!

Always make a test recording to ensure your sound is working properly.

OBS

Powerpoint

QuickTime (mac users only)

Grading Criteria

  • Concept Explanation: The research provides a thorough and clear explanation of the chosen topic, its significance in web or software development, and its purpose. A clear understanding of the concept is demonstrated.

  • Presentation Format: The sharing format is creative and engaging, effectively capturing the audience's attention. It aligns with the chosen concept and effectively communicates the information.

  • External Sources: External sources (websites, classmates, AI tools, etc), if utilized, are referenced and documented within the presentation.

Submission

You can submit a Show & Tell anytime during the semester!

Post your research in the #share-and-tell channel on Slack. Be sure to include the topic you researched in the message along with any additional notes or resources that may aid your classmates' understanding.