Introduction to Designing and Building for Web

Resources, references, and assets

For questions or assistance, please email me at danielarbello@gmail.com.

Day 5~14 • 6 May and onward

Lab: Continue to work through DoLs with Dan as support.

Paths to take

  • Use Webflow for a limiting but no-code experience.
  • Use Neocities for a slightly more unlimited experience but you have to write code and repeat yourself.
  • Use Astro.js to build a website using modern processes. This afford unlimited options and features but is a full code experience.
Writing code without Neocities
  • Create a GitHub account
    • Using a personal email address go to github.com/signup and create an account.
    • ⚠️ Be mindful of the username, this may travel with you into your future career.
  • Setup Package Installation Manager
    • macOS: Open "Terminal" and paste in this command → /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
    • Windows: Already has a package installation manager.
  • Install Packages
    • Install Warp: Instead of using Terminal you can use a smooth and more helpful tool.
      • macOS: brew install --cask warp
      • Windows: winget install Warp.Warp
    • Install Node.js: Go to nodejs.org/en/download and download the latest version for your OS.
  • Install Astro.js
    • Find a safe space to work in your device's working directory. For Macs that will likely be Macintosh HD/Users/YOUR-USERNAME/. I suggest making a folder here called Sites or similar (i.e., Macintosh HD/Users/YOUR-USERNAME/Sites).
    • Open Warp and navigate to your working directory using the cd command. For example, if you made a folder called Sites you would type cd Sites. (Your shell always boots up in this /Users/YOUR-USERNAME/ directory.)
    • Create a code respository
      • Go to your GitHub dashboard
      • Click on "Repositories"
      • Click on the green "New" button
      • Set yourself as owner
      • Give your code repo a name
      • Scroll down and click "Create repository"
      • Copy the code that looks like this git@github.com:danarbello/test.git
    • Follow the "…or push an existing repository from the command line" directions and enter each command in Warp
    • Once completed, you can begin adding code to your code repo.
    • Let's create our first branch and setup Astro!
      • Make sure you are in your repo's directory (ask Dan).
      • In Warp, enter git checkout -b BRANCH-NAME (replace "BRANCH-NAME" with your branch name like git checkout -b install-astro)
      • Enter npm create astro@latest
      • While it loads let's open up the Astro docs
      • The rest of this is like reading a recipe. Follow every appropriate step carefully and you'll have a yummy cake in the end.
    • Setup Vercel
      • Go to vercel.com/signup and create an account.
      • Once logged in, click on the "New Project" button.
      • Click on the "Import Git Repository" button.
      • Click on the "Continue with GitHub" button.
      • Click on the "Import" button next to your code repo.
      • Click on the "Deploy" button.
      • Once deployed, click on the "Visit" button to see your site live!
  • Review "the shell" (Brew, Warp, and Node), GitHub (code repository), Astro (static site framework), and Vercel (virtual hosting).
Day 4 • 1 May

Project Introductions

Set up groups or individual objectives and meet with Dan to plan out DoL.

Questions to ask yourself:

  • What is the end result of this project (beyond just turning in a completed DoL)?
  • How difficult do I want to make the project?
    • Writing code will be much more difficult than using a low-/no-code tool.
  • What are the requirements of the project?
    • Is it just text, images, links?
    • How automated do you want to make it?
    • Is there a form users will have to fill out?
    • Do you want anonymous users to create/submit content (submit text/images/links/comments/etc.)?
    • Will you need to sell things online?
    • Do you have money to pay for tools/services? (The more complex and interactive you make the site the more expensive it will be.)

Suggested Tech/Platform Stacks

  • Low- or no-code methods: Keep it simple and focus on making instead of coding.
    • Webflow is a complete no-code solution that allows 2 pages, and 2 sites, for free. Paid plans increase page count and add ecommerce and CMS functionality.
    • Bubble.io is a low-code app and web app builder with a free plan. You may not be able to launch anything live with the free plan(?)
  • Write code: Give yourself a serious challenge and write code.
    • Use a framework like Astro.js, or write HTML/CSS yourself, and launch on a free virtual hosting service like Vercel for $0.
    • This is opposite of no-code. You'll be writing a lot of code and reading a lot of docs. The only limitations are your patience and time.
    • Ecommerce, CMS, and other features will cost money.
Day 3 • 29 April

Paper+Pencil Content Strategy + UX + Priority Guides

  • Walk through a Business Requirements Document: intro to business goals and requirements, understanding purpose and need (Google Doc →)
  • From a prompt, students will plan a redesign of a web page for Cuningham.com:
    • Example content type →
    • Aesthetic and tone, content and the copywriting, structure of data, and priority of each section should be considered before or during layout. (See example Content Strategy Outline [Google Doc])
    • The students will then break these sections into HTML-structure blocks (divs and their nesting, when to use which tags and how, etc.) using paper and pencil comps.
Day 2 • 24 April

Fun Resources

Today's Agenda

  1. Demo a CMS
  2. Demo a CRM
  3. Demo user tracking with Google Analytics
  4. "Everything is a Block" Exercise: Use Duplo blocks to review HTML's block structure on live website(s)
  5. Interaction and the DOM: JavaScript and if-that-than-this logic (MDN sandbox)
  6. Put a bow on it: Review NoCodeConf presentation for an introduction into how/what/why CSS

Bonus (time permitting): Experiment with recreating an annoying "block" in the wild using the whiteboard, Inspector, or CodePen.

Day 1 • 22 April

Some fun resources:

1990s: Bulletin Board Systems

Play

Dial-up and AOL

User interface for AOL keyword input Book titled AOL Keywords

Search engines begin to pop up: Yahoo, Lycos, etc.

Screenshot of Lycos homepage

Chatrooms 2.0 (aka "Instant Messaging")

Screenshot of AOL Instant Messenger

Social media is introduced to the world with MySpace

Screenshot of basic MySpace profile

People start teaching themselves basic HTML and CSS in order to customize their pages

Screenshot of customized MySpace profile

Nothing is transparent: all development is quiet and locked behind corporate doors. If you aren't a webmaster or working on the engineering team of one of these companies then you've no idea what is going on behind the code.

How web software is made, tweaked, and maintained nowadays:

  • Working privately at a company like OpenAI and Meta (Facebook, Instagram, Threads, etc.)
  • Contributing to open source: like Chrome, Firefox, Safari, WordPress, and creative commons.
  • Contributing to languages and standards like HTML, CSS are not licensed or licenseable.
  • Contributing to working groups: Collection of people that regularly maintain standards, languages, and softwares for public use like HTML, CSS, and JavaScript.
W3C logo

World Wide Web Consortium (W3C) maintains and upgrades internet software.

It's systems all the way down.

  • Development operations (devOps): Where code is launched and kept stable on the internet, like the process of getting into and riding the car or bus that brings you to school
  • Back-end: Where code builds the core of websites, like the bones and organs in your body
  • Front-end: Where code structures and styles what you see, like your hair, skin, clothing, and makeup
  • Content: Where all the data and rules stem from, like the ideas in your brain and the words it speaks out into the world

Management systems make up the vast majority of the internet nowadays.

  • Content Management System (CMS): Stores and publishes any kind of data desired in a reusable and redeployable fasion. Think news or blog website.
  • Digital Asset Management (DAM): Stores massive troves of images, texts, and variants of those. Think library but on the internet.
  • Product Information Management (PIM): Just like a DAM but stores information and content about products. Think store library but on the internet and locked away.
  • Customer Relationship Management (CRM): Stores information about real humans and the companies they work for for marketing and advertising purposes. Think like a super secret address book.
  • Digital Experience Platform (DXP): Compiles all of the above services into a massive monolith of content management and publishing. Think like a machine wired up to every and anything that is connected to the internet.

Bonus stuff:

  • Virtual Private Network: A way to hide where exactly you are accessing the internet from.
  • Search is dead: What are algorithms and how content is spoon-fed to users nowadays?
  • The difference between algorithms, search configuration, AI, and AGI
  • How do websites that don't sell anything make money?