jnewman12

You will receive multiple screenshots of the same single-page landing page, ordered from top to bottom. They are NOT separate pages. Use the overlap to align sections into one continuous page.

• Build a static landing page using only HTML + CSS + minimal vanilla JS (no TypeScript, no React, no frameworks)
• Output files: index.html, styles.css, script.js (only if needed)

Visual fidelity

• Match screenshots closely: layout, spacing, typography, colors, section structure.
• Use semantic sections: header/nav, hero, features, testimonials, pricing (if present), FAQ, footer.
• Fully responsive for mobile, tablet (iPad), desktop.

jnewman12

Design a high-fidelity landing page for “OC Emergency Plumbing” (desktop-first, but responsive).

GOAL High-authority “rank & rent” lead-gen page optimized for calls + quote submissions. Should feel established, urgent, and trustworthy.

DESIGN STYLE (DO / DON’T)

• Aesthetic: Industrial Corporate (heavy, boxy, trade-service authority)
• Avoid “tech startup” styling: no big rounding, no pastels, no playful gradients
• Border radius: 0–4px max everywhere
• Shadows: hard shadows (not soft “material”)

jnewman12

<core_identity> You are an assistant called Cluely, developed and created by Cluely, whose sole purpose is to analyze and solve problems asked by the user or shown on the screen. Your responses must be specific, accurate, and actionable. </core_identity>

<general_guidelines>

• NEVER use meta-phrases (e.g., "let me help you", "I can see that").
• NEVER summarize unless explicitly requested.
• NEVER provide unsolicited advice.
• NEVER refer to "screenshot" or "image" - refer to it as "the screen" if needed.
• ALWAYS be specific, detailed, and accurate.

jnewman12

File Uploads with Rails and Active Storage

---

Lesson Objectives

• set up an account on Amazon Web Services to store uploaded images inside AWS S3
• set up rails app to handle file uploads
• understand the how and why, of a rails model with an image attribute

jnewman12

Chrome Dev Tools

Objectives

After this lesson, students will be able to:

• Open and describe the components of the Chrome developer tools
• Use the developer tools to manipulate page elements (HTML/CSS)

Preparation

Before this lesson, students should already be able to:

jnewman12

Use SQL to find Carmen Sandiego

Introduction

Where In The World Is Carmen Sandiego?

We're going to use what we've learned already about searching with SQL commands, and apply it to chase down and capture an elusive and world-reknowned thief, Carmen Sandiego. Follow the clues, use the interweb - write down both the SQL commands /queries you used and your answers to the clues - and figure out where Carmen's headed, so we can catch her and bring her in.

Exercise

jnewman12

ActiveRecord Methods and Finders

Objectives

• Query a model using AR methods
• Instantiate and create a new instance of a model
• Edit a model's attributes
• Destroy a model

Preparation

• Write a model that inherits from ActiveRecord

jnewman12

Intro to SQL

Objectives

After this lesson, students will be able to:

• Create a database table
• Insert, retrieve, update, and delete a row or rows into a database table

Preparation

jnewman12

Intro to Relational Data Modeling

Objectives

After this lesson, SWBAT:

• Describe the relationship between tables, rows, and columns
• Draw entity relationship diagrams (ERDs) with crow's foot notation for ideas for web apps
• Describe how tables relate to each other using foreign keys
• Explain the different relationship types – one to one, one to many, many to many

jnewman12

Your project on github pages

• first, make sure you have been pushing your project to github
• if you're in a good spot for your project, commit and push to master

---

gh-pages branch

• go into your project directory in your terminal
• run git checkout -b gh-pages
• then run git commit -am "gh-pages branch"