🚀 Today's Goal: Build and deploy your first website in 30 minutes!
🎯 Ice Breaker: One-Page Website Challenge
The Twist
You'll build _________________'s idea, not your own!
Pre-Exercise Setup
- Write your website topic on: _________________
- Get approval from: _________________
- Keep your topic _________________ (don't share!)
- Find a partner and _________________ whiteboards
💡 Remember: Perfect is the enemy of _________!
📁 Phase 1: Project Setup
Git Commands
_________ partner-topic-site
_________ partner-topic-site
git _________
Create These Files
- index.html
- style.css
- script.js
VS Code Shortcut: Type _____ and hit Enter for instant HTML boilerplate!
Link Your Files
CSS goes in the _________________ section
JavaScript goes before the closing _________________ tag
⚡ Phase 2: Rapid Development
HTML Structure Checklist
- Meaningful <title> tag
- Header with site name
- At least 3 content sections
- Navigation (even if single page)
- Footer with your name
Time Limit: _________ minutes
🌐 Phase 3: Deploy to GitHub Pages
Git Commands Sequence
git _________ .
git _________ -m "Initial site about [topic]"
git _________ -M main
git _________ -u origin main
Enable GitHub Pages
- Go to repo _________________ → Pages
- Source: Deploy from _________________
- Branch: _________, folder: _________
- Wait _________ minutes
Your site URL: https://_____________________.github.io/_____________________
🌟 Phase 4: Custom Domain (Optional)
⚠️ MUST BE DONE WITH PROFESSOR REED
A Records to Add
| Record Type |
IP Address |
| A |
185.199.108.153 |
| A |
185.199.109.153 |
| A |
185.199.110.153 |
| A |
185.199.111.153 |
📚 The Odin Project
What is The Odin Project?
A _________________, open-source curriculum for learning _________________ development
Key Features
| Feature |
Description |
| 🎯 Project-Based |
_________________________________ |
| 🌟 Industry-Relevant |
_________________________________ |
| 👥 Community |
_________________________________ |
Website URL
Visit: _________________________________.com
🎓 Foundations Course Overview
What We'll Learn This Semester
| Technology |
Key Topics (List 2-3) |
| HTML |
_________________________________ |
| CSS |
_________________________________ |
| JavaScript |
_________________________________ |
| Tools |
_________________________________ |
The Learning Path
- Introduction: _________________________________
- Prerequisites: _________________________________
- Git Basics: _________________________________
- HTML & CSS: _________________________________
- JavaScript: _________________________________
🛠️ Account Setup Checklist
- Create account on theodinproject.com
- Sign up with GitHub (recommended) or email
- Navigate to Foundations Course
- Begin Introduction section
💡 Pro Tip: Use GitHub sign-in to connect your learning progress with your repos!
📝 Thursday's Homework
Part 1: Odin Project Introduction
Complete these sections:
- How This Course Will Work
- Introduction to Web Development
- Motivation and Mindset
- Asking For Help
- Join the Odin Community
Part 2: Setup Requirements
- Complete all Discord setup
- Complete all GitHub setup
- Install necessary tools
Part 3: One-Page Website
Enhance your site with:
- Complete any unfinished tasks
- Add at least 3 more sections
- Style with CSS (colors, fonts, layout)
- Add JavaScript interactivity
- BONUS: Make it responsive!
🏆 Tips for Success
Fill in the blanks with the success tips discussed in class:
- 💻 Code Every _________________: Even just 30 minutes
- 🤝 Help _________________: Teaching solidifies learning
- 🔍 Read _________________ Messages: They're your friends
- 📖 Read _________________: MDN is your bible
- 🏗️ Build _________________: Beyond assignments
- ❓ Ask _________________: No question is stupid
📚 Resources & Support
| Resource Type |
Where to Find It |
| Course Materials |
_________________________________ |
| Communication |
_________________________________ |
| Office Hours |
_________________________________ |
| Email |
_________________________________ |
📝 Additional Notes
Use this space for any additional notes during class:
💭 Reflection Questions
- What was the most challenging part of building the one-page website?
_________________________________________
_________________________________________
- What are you most excited to learn in this course?
_________________________________________
_________________________________________
- What questions do you still have about the course structure?
_________________________________________
_________________________________________