Week 2

Week 1 - Welcome to the Advanced Track!

~36 min read

Pre-Workshop

Download Visual Studio Code

We'll be using VS Code as our IDE (Integrated Development Environment) of choice. You can download it here. Make sure you download the correct version for your system (specifically for Mac users on Apple Silicon)

Feel free to use whatever IDE you like! (WebStorm, Fleet, Atom, Sublime Text, etc.)

The following extensions are optional but reccommended. You can learn how to browse and install extensions here.

If you have any questions or need help, let us know!

Welcome!

Welcome to the Coding Advanced Track for Web Impact UW! The workshops for this quarter are all-new compared to past years of having a singular track. The hope of seperating tracks and content is to go deeper and teach broader material overall.

What will we be learning this quarter? (this list is not everything)

  • Basics of Node, React, and Next.js
    • Using the Next.js App Router
    • Component Rendering
  • Using Tailwind CSS to style components
    • Utility-first CSS framework
    • Creating a “design system” for code
  • Content Management System (CMS) Development and Design
    • Sanity.io Headless CMS
    • Creating a “site editor” of sorts
    • Using GROQ to query data
  • Server and Client Fetching
    • React Server Components
    • Route Handlers
  • Coding with design principles/values in mind (HCI-oriented)
    • Privacy
    • Accessibility
    • Simplicity
  • The “how” and “why” of modern web development
  • And more!

IMPORTANT: We only have seven hour-long workshops (with an additional free day and project showcase), so the amount of content we do teach is limited by that. We will not be teaching EVERYTHING and going in-depth into certain things, like Node.js or React's rendering systems. We will however, explain these concepts for the sake of our end goal, which is giving you a good stepping off point in advanced web development. If you have questions about these things, feel free to ask us! We just won't be dedicating valuable workshop time. (There will also be resources attached in documents like this that cover these concepts and technologies in-depth.)

OTHER IMPORTANT: These workshops will go VERY fast. We will be covering a lot of content in a short amount of time. If you feel like you're falling behind, please let us know! We're here to help you learn and grow as a developer. We want to make sure you're learning and understanding the content we're teaching. These lesson plans and Zoom

If you'd like to learn more about web development in your course work, we reccomend CSE 154 (closer to our Beginner Track but much more work), CSE 331 (some React covered), INFO 340 (client-side web development), or INFO 441 (server-side web development)

Workshop Schedule

  1. Week 1: Welcome to the Advanced Track (you're here!)
  • Logistics
  • Refresher on HTML, CSS, and JavaScript
  • Introduction to Tailwind CSS and JSX
  1. Week 2: Introduction to React and Next.js
  • Learning about Node, React, and Next.js
  • Creating a Next.js project
  • Navigating the /app directory
  1. Week 3: Continuing with Next.js
  • Routing and navigation netween pages
  • Using next/image and next/font
  • Creating components and styling with Tailwind CSS
  1. Week 4: Data and Networking
  • Using APIs
  • Learning about Static and Dynamic Data
  • Implementing Client and Server Data Fetching
  1. Week 5: Free Day!
  • Catch up day
  • Learn something new day
  • Answer your questions
  1. Week 6: Intro to CMS Design
  • Learning about Headless CMSs
  • Setting up a Sanity project
  • Integrating Sanity into our Next.js project
  • Making Document and Object schemas
  1. Week 7: Continuing with CMSs
  • Using GROQ to fetch data from Sanity to our project
  • Making dynamic routes in Next.js
  1. Week 8: Talking about Design
  • How does design drive the development process?
  • What should we keep in mind when designing websites?
  • (This week is a essentially a high-level design workshop)
  1. Week 9: Project Day!
  • Show off what you spent the quarter working on!

Keep in mind that our schedule is subject to change. If we need to allocate more or less time for certain topics, the schedle will change. Also, please keep in mind that this track is brand new, so there might be a bit of "jank."

Miss a workshop? We've documented everything on a per-workshop basis for the most part. There should be a recording, slides, and/or written documents of the content covered. If you have any questions or need help, let us know.

What will we be making this quarter?

Ken Site

Shrek Site

Garfield Site

Every one of you will have a unique website following this general structure:

  • Home Page
    • A bit of information about you and this website
    • Show off the latest blog posts
    • Show off your favorite photos
  • Blog Page
    • Show all of your blog posts
  • Blog Post Page
    • Speak your mind out with posts
  • Photos Page
    • Show off your photos

GO CRAZY WITH YOUR SITES! We're not looking for every website to feel and do the same thing, so make it yours. This structure uses all of the practices and cool technologies we'll be teaching over the quarter. Our goal is not only to prepare you for working with clients over the next two quarters, but to make sure you learned something new along the way - meaningful learning and practice.

Feel free to add more than this! These pages fufill what we're trying to teach in the quarter without being too complex. Have a specific feature you want to add? Ask us outside of Workshops or on Week 5 (Free Day)

Refresher

This week's workshop is a slow one, but important nonetheless. Today, we'll be doing a bit of a refresher on the content we expect you to know for this track. If you don't feel comfortable with the following content, we reccommend you to attend our Beginner Track, which covers these topics in further depth.

Web development in a nutshell

  • HTML - form
  • CSS - fit
  • JS - function

HTML

HTML, or HyperText Markdown Language - the skeleton of our webpages. For this track, we only really care about the following tags (but even then, we rarely use that many):

  • <html>, <head>, <body>
  • <h1> to <h6>, <p>, <span>
  • <div>, <ul>, <li>, <ol>
  • <a>, <img>, <button>
  • <main>,<nav>,<article>,<footer>

You should be familliar with how all these tags work in relation to each other, i.e. self-closing tags, nested tags, etc. There is an expectation that you know what these tags all do and how they work.

If you'd like to see all of the tags in HTML, check out the HTML Element Reference.

CSS

CSS, or Cascading Style Sheets - the design of our webpages. For this track, we won't be using ANY vanilla CSS. But it is important to know how CSS inherently works, such as the following concepts:

  • CSS Selectors
    • Universal, Type
    • ID, Class
    • Attribute (won't really use this)
    • Grouping Selectors
  • Box Model
    • Margin
    • Padding
    • Border
    • Content Box
    • Shadow
  • CSS Cascade
  • Inheritance
  • Basic CSS Properties
    • Background Color
    • Text Color
    • Box Shadow
    • Width, Height (min, max as well)
    • Text CSS Properties
    • Flexbox

We'll talk more about styling with Tailwind CSS.

JavaScript

JS, or JavaScript controls the functionality of our website. Here are the basics of what you'll need to know with JavaScript. We won't be doing anything super crazy with the language. You should know about:

  • Constants, variables, etc.
  • Functions and methods
  • Conditionals
  • (Essentially CSE 12X/14X)

For the sake of the advanced track, we’ll explain a lot of the necessary JS/JSX syntax, as it differs from what you’d see in beginner track/CSE 154. We don’t need:

  • Element Selectors
  • Real DOM (React uses a virtual DOM) (for the sake of time, we won't be covering this)

It’s important to know JSON (Javascript Object Notation) - this drives how we understand React and the data we’ll be interacting with. (We will cover it briefly however)

If you expected more and complex JavaScript, sorry! We're going to use basic JavaScript and Frameworks to build our site. The goals of someone wanting to learn how everything works and build complex things are different from the goals of someone who wants to build a basic website. We're going to focus on the latter.

Again, if you feel uncomfortable with any of these topics, feel free to attend the Beginner Track. If you're a bit rusty, check out the Related Resources section above.

New things

Alright, let's jump into the new stuff! Today, we won't go too in-depth, but explain a bit about two new technologies we'll be using.

Tailwind CSS

Tailwind CSS is what we call a utility-first CSS Framework. That means, instead of using direct CSS properties or styles, we'll pre-defined (and dynamic) classes that represent said properties. The code below does the same thing, first in Vanilla CSS, and the second with Tailwind CSS.

Vanilla
<style>
  /* insert more CSS here for CSS variables! */

  button.Button {
    --tw-bg-opacity: 1;
    background-color: rgb(var(--tw-color-blue-500) / var(--tw-bg-opacity));
    --tw-text-opacity: 1;
    color: rgb(var(--tw-color-white) / var(--tw-text-opacity));
    padding-left: var(--tw-size-4);
    padding-right: var(--tw-size-4);
    padding-top: var(--tw-size-2);
    padding-bottom: var(--tw-size-2);
    font-weight: var(--tw-font-weight-medium);
  }

  @media (min-width: 768px) {
    button.Button:hover {
      --tw-bg-opacity: 1;
      background-color: rgb(var(--tw-color-blue-700) / var(--tw-bg-opacity));
    }
  }

  button.Button {
    transition-property: color, background-color, border-color, fill, stroke,
      -webkit-text-decoration-color;
    transition-property: color, background-color, border-color,
      text-decoration-color, fill, stroke;
    transition-property: color, background-color, border-color,
      text-decoration-color, fill, stroke, -webkit-text-decoration-color;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    border-radius: var(--tw-border-radius-full);
  }
</style>

<button class="Button">Click me!</button>
Tailwind
<button class="bg-blue-500 text-white px-4 py-2 font-medium md:hover:bg-blue-700 transition-colors rounded-full">
  Click me!
</button>

That's a lot less CSS, right? (Later, you'll learn that we don't need to rewrite the Tailwind CSS button every time we need it.)

There are also some more really helpful and important benefits we get from Tailwind CSS:

  • Design System API via tailwind.config.js
  • Standardized Styles
    • Animation
    • Sizes
    • Shadows
    • etc.
  • Performant
  • Faster to work with and easy to read
  • Simple Responsive Design

You can learn more about Tailwind CSS here, on the Tailwind CSS website. I reccomend have their documentation open, so you can search for properties like "Text Color" or "Shadow" and see what classes correspond.

JSX

The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page’s logic lived separately in JavaScript.

But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML!

JSX is a syntax extension to JS which makes it look a lot like HTML - but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup.

<h1>Hedy Lamarr's Todos</h1>
<img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" />
<ul>
  <li>Invent new traffic lights</li>
  <li>Rehearse a movie scene</li>
  <li>Improve the spectrum technology</li>
</ul>

export default function TodoList() {
  return (
    <>
      <h1>Hedy Lamarr's Todos</h1>
      <img
        src="https://i.imgur.com/yXOvdOSs.jpg"
        alt="Hedy Lamarr"
        className="photo"
      />
      <ul>
        <li>Invent new traffic lights</li>
        <li>Rehearse a movie scene</li>
        <li>Improve the spectrum technology</li>
      </ul>
    </>
  );
}

We won't be going any further into JSX for now, but all you should know is this: HTML + JS = JSX

We'll use it in the next workshop, and this code will make a lot more sense then.

Content from Writing Markup with JSX

Practice

All of our Workshops will end with these Practice sections. It's a great opportunity to test what you've learned, and take your web development skills to the next level!

Here are some options to practice this week:

  • Brush up on HTML, CSS, and JS
  • Make a web page to play:
    • Tic-Tac-Toe
    • Rock, Paper, Scissors
    • Any game of your choice
  • Use Tailwind CSS on a basic HTML page with Tailwind Play CDN
    • With the Tailwind Play CDN, you can use the Tailwind CSS on your traditional vanilla HTML projects as an imported stylesheet.
    • Convert a web page you've worked on in the past to Tailwind CSS!

Like always, if you have any questions, feel free to ask and let us know!

Workshops