diff --git a/public/assets/hw1-setup.png b/public/assets/hw1-setup.png index d160ba2..ae8d8d4 100644 Binary files a/public/assets/hw1-setup.png and b/public/assets/hw1-setup.png differ diff --git a/public/content/web/schedule-page.md b/public/content/web/schedule-page.md index 255418f..bd512ab 100644 --- a/public/content/web/schedule-page.md +++ b/public/content/web/schedule-page.md @@ -9,11 +9,11 @@ Office Hours (optional): Thursdays 8-9pm @ Moffit 102 **Instruction begins on the week of January 28.** ## Announcements -Join the [Ed](https://edstem.org/us/join/RDVU5J) and [Gradescope](https://www.gradescope.com) with code 2PWJXD. Recordings will be published [here]. +Join the [Ed](https://edstem.org/us/join/RDVU5J) and [Gradescope](https://www.gradescope.com) with code 2PWJXD. Recordings will be published [here](https://drive.google.com/drive/folders/1vrX7TA2lg4-ujb6c0vJeqtR7tw6Jj0us?usp=sharing). | Week | Lecture | Lab Section | Homework/Project | |------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------|---------------------------------------------------------------------------------| -| 1 | Intro to HTML and the Web [Slides](https://docs.google.com/presentation/d/1TZakoOsaHnUA_axTgmk4-K6sovMi9XGh4rdz5KNLydc/edit?usp=sharing) | Lab 1: HTML & CSS | HW 1: HTML Basics | +| 1 | Intro to HTML and the Web [Slides](https://docs.google.com/presentation/d/1TZakoOsaHnUA_axTgmk4-K6sovMi9XGh4rdz5KNLydc/edit?usp=sharing) | Lab 1: HTML & CSS | [HW 1: HTML Basics](#/hw/web/hw1) | | 2 | CSS Basics | Lab 2: CSS Part 2 | HW 2: Personal Portfolio | | 3 | JavaScript Basics | Lab 3: JS Part 2 | HW 3: JavaScript Playground | | 4 | Intro to APIs | Lab 4: Git and Deployment (GitHub Pages) | HW 4: Basic APIs | diff --git a/src/hw/web/hw1.md b/src/hw/web/hw1.md index 26861f8..529d31e 100644 --- a/src/hw/web/hw1.md +++ b/src/hw/web/hw1.md @@ -1,13 +1,13 @@ # HW 1: HTML Basics ## Setting up your environment -Before we even get into the HTML, we will need to set up a couple things. First, we'll need to install a code editor to help us write our HTML. Our recommendation is [VS Code](https://code.visualstudio.com/). It's a free, open source editor that is very popular and has a lot of features. You can download it from the link above. Though, you are welcome to use any editor you like! +First, install a code editor if you haven't already! Our recommendation is [VS Code](https://code.visualstudio.com/). It's a free, open source editor that is very popular and has a lot of features. You can download it from the link above. -We need to create a folder that will hold all of the site's content, including its HTML file. +For this homework, you will be making a basic HTML website. We need to create a folder to hold all of this site's content, including its HTML file. -1. Create a folder on your computer called **"cubstart_web"** or whatever you want to name it. -2. Open your text editor of choice in the folder and create a new file. -3. Save (Ctrl/Command + S) that new file in your "cubstart_web" folder and name it **index.html**. +1. First, if you haven't already, create a folder on your computer called **"cubstart_web"** or whatever you want to name it. This folder will hold all of your Cubstart-related projects. +2. Open your code editor of choice in the "cubstart_web" folder and create a new folder. Name it **HW1**. +3. Inside of the "HW1" folder, create a new file and name it **index.html**. - Think of this as the homepage of your site! 4. Create a new folder within your "cubstart_web" folder named "**assets**". - This "assets" folder is where you can put images from your local computer that you want to display on your site (e.g. a selfie) @@ -26,9 +26,7 @@ In this HW, you will be building your first website in HTML using all of the tag ## Need some help starting your HTML code? -To learn how to code, it's best to do your own work and see yourself write the code to get familiar with the syntax and format :) - -But if you need some help, here's some starter code below: +In VS Code, to get boilerplate HTML, you can type "html:5" in your HTML file and press enter. You can also copy and paste the starter code below. ~~~html @@ -54,16 +52,14 @@ To make sure you get the hang of the basics we covered in lecture, we'll be chec - Bolded, italicized, or underlined text using the appropriate HTML tags. - A **list** of anything! You can list your top musical artists, the your personal ranking of the best libraries at Cal, etc. - An **image** → Spice up your site with some visual elements! 🔥 - - You can use images from your own computer or from the internet with a url. If you need help, make an Ed post! + - Add an image to your "assets" folder and use a relative URL! Check out Lab 1 slides or make an Ed post for help. - A **link** to a site of your choice → use the `` tags to link your favorite Youtube videos, a Spotify playlist, your social media handles, etc. ## Viewing Your Site Want to see what your site looks like in a web browser? -Double click on the **index.html** file and it should open your page on your default browser! - -If you're viewing your site while you're still making edits, you can refresh the page to see your changes. +Double click on the **index.html** file and it should open your page on your default browser! Refresh the page to see your changes! # Challenge! Do you know some CSS? We'll be going over how to beautify our website in a later HW, but if you want to challenge yourself and try it out right now, you can look up some resources on CSS and style your website! We're excited to see how creative you can be! :) @@ -76,7 +72,7 @@ If you're looking for some resources to get a headstart, here are some good site To submit the homework folder, you have to zip it first. **To zip a folder:** -_**Windows:** Right-click the folder with your HTML and all files like images on your website, select (or point to) Send to, and then select Compressed (zipped) folder._ -_**macOS:** Control-click the folder with your HTML and all files like images on your website or tap it using two fingers, then choose Compress from the shortcut menu._ +_**Windows:** Right-click the "HW1" folder with your HTML and all files like images on your website, select (or point to) Send to, and then select Compressed (zipped) folder._ +_**macOS:** Control-click the "HW1" folder with your HTML and all files like images on your website or click it using two fingers, then choose Compress from the shortcut menu._ Upload the .zip file to [Gradescope](https://www.gradescope.com/) and you're done! \ No newline at end of file