1.3 - Lab: Single Page Projects

Activity 1

Project 1 - "Link Tree" Landing Page

In this first project, we'll build a "link-tree" replacement. "Link tree" is a popular website for making landing pages that collects all of your social media or other web links into one spot that you can include in your profile to promote your brand, store, or resume. This is one of the best beginner projects to work on.

View Activity 1 Slides

Activity 2

Project 2 - Launch Page

In this second project, we'll get practice integrating a sign-up collection system to create a "coming soon" launch page. This could be useful for gauging interest in new art projects or business ventures, and in general to build up hype about a planned project.

The previous project (Project 1) only involved HTML and CSS we've learned so far. The remaining projects in this lab are harder than the previous, since they involve incorporating code from different online services, by means of copy and pasting "magic snippets" of code that add in lots of functionality at once. This allows you to integrating different online services with sharable content, embeddable forms, and other such "third party integrations", allowing you to collect information with forms, play music or videos, or sign people up for a newsletter.

TinyLetter: https://tinyletter.com/
NOTE: These "magic snippets" usually consist of a "script tag" or an "iframe tag", neither of which we have learned about just yet. If it gets confusing, keep this in mind: Don't worry about exactly how script tags or iframes work, that's more advanced knowledge you can tackle later. The goal for this particular Project Lab is to get practice carefully copying and pasting these "embedding" tags so you can quickly embed useful services in your website.

View Activity 2 Slides

Activity 3

Project 3 - Local Business

In this third project, we'll build a simple landing page for a business or local store. Some people might use services like Squarespace or Wix to build a quick landing page for their small business. This project can replace that with a simple center-aligned design. In this design, we also learn how to embed a Google Map, allowing potential customers to find us.

Learn how to get the snippet to embed Google Maps here: https://support.google.com/maps/answer/144361

View Activity 3 Slides

Activity 4

Project 4 - Artist Page

In this fourth project, we'll embrace a bold, retro-inspired design style filled with gradients and drop shadows in order to practice chaotic, bright, splashy, and art-focused design styles. The example project is building a "tribute" or "stan" page for a real artist (June Chikuma). It showcases her influential video game soundtracks from the 80s and 90s that made her known in the genre, along with embedded audio and video with her modern work on experimental film and classical composition.

Some people might use services like Squarespace or Wix to build a quick landing page for their artistic profile, but this shows how you can make a bold design to stitch together your creations already, by embedding Soundcloud, Bandcamp, and YouTube.

View Activity 4 Slides