Bachelor of Design and Interaction Design students and alumni participate in the web ring through a voluntary summer coding mentorship, connecting nostalgic web concepts with foundation HTML, CSS and modern development skills.
█████ █████ ░░███ ░░███ ░███ ████████ ███████ ████████ ██████ ░███ ░░███░░███ ░░░███░ ░░███░░███ ███░░███ ░███ ░███ ░███ ░███ ░███ ░░░ ░███ ░███ ░███ ░███ ░███ ░███ ███ ░███ ░███ ░███ █████ ████ █████ ░░█████ █████ ░░██████ ░░░░░ ░░░░ ░░░░░ ░░░░░ ░░░░░ ░░░░░░
These students have signed up for the Summer 2026 Coding Mentorship.
Students should begin by creating a simple home page for their personal site inside their project folder. This acts as their entry point into the web ring and can evolve over time as their work grows.
Alongside this, students are also encouraged to build a responsive resume.html using flex box and min-width media queries that stack to one column on mobile. This is a key beginner exercise in layout, structure, and responsive design. It does not need to be complete or final — it can start simple and be refined gradually as new skills are introduced.
Both pages are part of an evolving personal site rather than separate "finished projects." Students are encouraged to iterate, experiment, and expand their pages as they learn.
📚 Learning resources: Explore the HTML & CSS Foundational Skills library for articles on colour systems, flexbox, responsive design, and more.
███████████ ███ ████ █████ █████
░░███░░░░░███ ░░░ ░░███ ░░███ ░░███
░███ ░███ █████ ████ ████ ░███ ███████ ░███ ██████ ███████
░██████████ ░░███ ░███ ░░███ ░███ ███░░███ ░███ ███░░███ ███░░███
░███░░░░░███ ░███ ░███ ░███ ░███ ░███ ░███ ░███ ░███ ░███░███ ░███
░███ ░███ ░███ ░███ ░███ ░███ ░███ ░███ ░███ █░███ ░███░███ ░███
███████████ ░░████████ █████ █████░░████████ ███████████░░██████ ░░███████
░░░░░░░░░░░ ░░░░░░░░ ░░░░░ ░░░░░ ░░░░░░░░ ░░░░░░░░░░░ ░░░░░░ ░░░░░███
███ ░███
░░██████
░░░░░░
We launched the Summer 2026 Coding Mentorship by exploring the IDEA Web Ring, cloning the repository, making a first HTML change, and pushing it to GitHub. Students were introduced to the idea of the web ring as an evolving personal design space — part portfolio, part experiment, and part creative playground for learning HTML & CSS by building. I explained that the focus of each week will depend entirely on who shows up and what questions they bring, and that this mentorship is first and foremost about HTML & CSS review and practice — not lectures or rigid lesson plans.
We covered Git basics (including what “push” means), creating new pages in VS Code, mobile-first media queries with class selectors, specificity, the cascade, inheritance, converting pixels to rem, and thinking in reusable components instead of isolated styles.
I also noticed some students had GitHub Copilot enabled when signing into VS Code — we’ll be discussing the pros and cons of AI coding assistants in a future session, as they can be distracting for beginners still learning fundamentals.
One student suggested splitting future sessions into discussion first, then hands-on coding, which we’ll try next time.
For homework, students were asked to design a retro ASCII tag using
asciiflow.com, embed it on a page like ascii-tag.html, experiment with the distortion text effect generator on CodePen, and create a new links.html page. The links.html page should be a curated Top 10–20 collection of links around a very specific niche or internet rabbit hole. They can include indie type foundries, browser-based games, ASCII art galleries, design resources, or Neocities or Nekoweb inspired sites. Think of things that designers or front-end developers and indie web enthusiasts, might want to collect and share. Students are encouraged to push their updates to the web ring before next week’s session.
ASCII Art, Badges, Links & Squircles: Session 3 covers checking in on your ASCII art and links pages. We look at the new corner-shape and very new border-shape CSS properties — covering progressive enhancement, browser support, and the future of shape systems in CSS, including squircles and non-rectangular UI design. We share our Top 10 links pages, discuss 88×31 web badges and their role in early web culture, and explore ASCII art generators and Unicode symbols. James also reviews a student's CSS code, suggesting improvements and best practices.
Session 4 includes a review of a student's CSS code for a card layout built with Flexbox, along with a refresher on beginner-friendly best practices, including the differences between display: block and display: inline. While AI can generate code, that code is not always easy for beginners to understand, may not follow beginner-friendly best practices, and is not always responsive.
Mastering the fundamentals is key. Use percentage-based widths for responsive layouts, use rem units for font sizing, avoid fixed max-width values in pixels when responsive alternatives are appropriate, and remember that the <span> element is inline by default, not block-level.
Students are also encouraged to expand their link pages by adding more resources to share with each other. They can also create simple badges or visual elements to share and personalize their pages, helping build a sense of community and experimentation.
Guiding and supporting the web ring community. Interested in becoming a student mentor? Talk to James!