hw2 web

public/content/web/schedule-page.md

@@ -14,7 +14,7 @@ Join the [Ed](https://edstem.org/us/join/RDVU5J) and [Gradescope](https://www.gr
 | 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 [Slides](https://docs.google.com/presentation/d/1em2PGMXVms8o_NXlU54pkb19CLLDIduHnNVFqcFFg6k/edit?usp=sharing)  | [HW 1: HTML Basics](#/hw/web/hw1)     |
-| 2    | CSS Basics [Slides](https://docs.google.com/presentation/d/1cI-pR24ZJzLYDNCJFPnWnzyL9arfFQtjrLDG_VsWmi8/edit?usp=sharing)                             | Lab 2: CSS Part 2   | HW 2: Personal Portfolio |
+| 2    | CSS Basics [Slides](https://docs.google.com/presentation/d/1cI-pR24ZJzLYDNCJFPnWnzyL9arfFQtjrLDG_VsWmi8/edit?usp=sharing)                             | Lab 2: CSS Part 2[Slides](https://docs.google.com/presentation/d/1NRfkrVeIltAyNWseQGSOFE3BAQShZleyPc3xaiJ7G0I/edit?usp=sharing)   | [HW 2: Personal Portfolio](#/hw/web/hw2) |
 | 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   |
 | 5    | APIs, Promises, & Fetch()  | Lab 5: API Keys & HW Walkthrough   | HW 5: OpenWeatherMap API   |

src/components/HomePage/FAQ/FAQ.js

@@ -32,7 +32,7 @@ function FAQPage(props) {
     <label className="accordion__item">
       <input type="checkbox" name="accordion"/>
       <div className="accordion__title">How do I apply?</div>
-      <div className="accordion__content">For Spring 2024, Cubstart has open enrollment!</div>
+      <div className="accordion__content">Spring 2024 enrollment is closed. See you next semester!</div>
     </label>
     <label className="accordion__item">
       <input type="checkbox" name="accordion"/>

src/components/HomePage/HomePage.js

@@ -11,9 +11,9 @@ function HomePage(props) {
 
     return (
     <div>
-        <div className="banner">
+        {/* <div className="banner">
             <p>Enroll in Cubstart Sp24 NOW! Go to your CalCentral Enrollment Center and search 16666 for the Web Track OR 16649 for the iOS Track</p>
-        </div>
+        </div> */}
     <div className="hero-wrapper">
         <div className="header">
             <div className='header-text'>
@@ -40,14 +40,14 @@ function HomePage(props) {
                         className="typing-text"
                         /></h1>
                     <p>Cubstart is a web/mobile development course for beginner to intermediate developers. Whether you need project experiences to kickstart your resume, or if you have a desire to build but don’t know where to start, Cubstart is the course for you.</p>
-                    <p><em>While preprequisites are not enforced, prior coding experience is highly recommmended.</em></p>
-                    <p>Cubstart is <u>open enrollment</u> for Spring 2024! Go to your CalCentral Enrollment Center and search <b>16666</b> for the Web Track (CS 198-750) OR <b>16649</b> for the iOS Track (CS 198-075).</p>
+                    {/* <p><em>While preprequisites are not enforced, prior coding experience is highly recommmended.</em></p>
+                    <p>Cubstart is <u>open enrollment</u> for Spring 2024! Go to your CalCentral Enrollment Center and search <b>16666</b> for the Web Track (CS 198-750) OR <b>16649</b> for the iOS Track (CS 198-075).</p> */}
                     {/*
                     <div className='button-container'>
                     <a href="https://docs.google.com/forms/d/e/1FAIpQLSco-puPnC9Se1k35ZDxzbOLbCqXUt2It2X23kLkFGkQ3F2snw/viewform" className="applybutton">APPLY NOW!</a>
-                    </div>
+                </div>*/}
 
-                    <b>Fall 2023 application have closed. See you next semester! </b>*/}
+                    <b>Spring 2024 enrollment is closed. See you next semester! </b>
                     <br/>
                     <div className="stats-wrapper">
                         <div className="stats-item">

src/hw/web/hw2.md

@@ -5,7 +5,7 @@ The objective of this homework is to help you through the entire process of maki
 
 The best way to learn web development is through making your own projects. A personal, resume-style website is pretty useful and a great starter project, so that's what we're making today. 
 
-Here's an example from our friend and Cubstart alum Oski Ddoski:
+Here's an example from our friend and Cubstart alum Ddoski:
 
 <video width="100%" controls>
   <source src="/assets/hw2/oski-personal-portfolio.mp4" type="video/mp4">
@@ -16,18 +16,18 @@ Don't worry, we're going to customize it with our own information and style it h
 ## Setting up your Files
 Before we start building our website, we need to create a folder that will hold all of the site's content, with both the HTML and CSS files this time. 
 
-1. Download the skeleton for the homework [here](assets/hw2/fa23-hw2-skeleton.zip).
+1. Download the skeleton for the homework [here](assets/hw2/sp24-hw2-skeleton.zip).
 2. Unzip the file. 
-_**Windows:** To unzip the entire folder, right-click the .zip file. Select Extract All, and then follow the instructions._
 _**macOS:** Double-click the .zip file. The unzipped item appears in the same folder as the .zip file. If you want to, you can delete the .zip file._
+_**Windows:** To unzip the entire folder, right-click the .zip file. Select Extract All, and then follow the instructions._
 3. Run your text editor of choice. We like VSCode.
-4. Open the **hw2-skeleton** folder. We'll be editing **index.html** and **styles.css**. If the CSS file name is red, that means there are errors in that file. Don't worry, you will be fixing those errors later!
+4. Open the **sp24-hw2-skeleton** folder. We'll be editing **index.html** and **styles.css**. If the CSS file name is red, that means there are errors in that file. Don't worry, you will be fixing those errors later!
 
 ## Viewing Your Site
 
-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! 
+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.
+If you're viewing your site while you're still making edits, don't forget to refresh the page to see your changes.
 
 ## Part 1: HTML
 
@@ -38,16 +38,16 @@ The **index.html** file looks like this:
 
 Answer the questions in **index.html** skeleton code from top to bottom by editing the HTML code. There is extra information on each questions below if you need help!
 
-### Question 0. Add an image of your here.
-_We use img tags to insert images. Review the Lecture 2 slides if you are having trouble defining a path to your image!_
+### Question 0. Add an image of yourself here.
+_We use img tags to insert images. Review the Lab 1 slides if you are having trouble defining a path to your image!_
 
 ### Question 1. Add a unique id to each section wrapper.
 _Make sure that these ids make sense in the context of your web page. Suggested id names would be "education", "experience", "projects", and "contact". After you do this, each element with the class "section-wrapper" will also have an id. This will be useful later when we style each individual section!_
 
 ### Question 2. Fill this in with details about your degree, major(s), and coursework. Use at least 1 header tag (h3, b, or em).
 _You can experiment with the 3 tags to see which you like best!_
 
-### Question 3a. Create 2 to 3 divs with the same class (list-item), and fill them in with your work experiences.
+### Question 3a. Copy-paste the div with the class experience-list-item a couple times, and fill them in with your work experiences.
 _Pop Quiz: Why do we have to use classes for this and not ids?_
 
 ### Question 3b. Fill this in with some bulletpoints on things you did.
@@ -67,16 +67,12 @@ _Still remember what anchor tags (a) are? How do we use them within a paragraph
 
 ## Browser Developer Tools
 
-We touched on this a little during lecture, but you should try experimenting with browser developer tools a lot more. They help a lot when you're making your own projects, for debugging. 
+Try experimenting with browser developer tools. They help a lot when you're making your own projects, for debugging. 
 
 ### How to access Browser Developer Tools
 Open your page on a browser by double clicking on the **index.html** file, if you haven't already done so.
 
-Right-click anywhere on the page and click **"Inspect"**.
-
-You can also use a keyboard shortcut. In most browsers, the keyboard shortcut is **Ctrl + Shift + I (macOS: ⌘ + ⌥ + I)** to pull up the developer tools. For Internet Explorer and Edge, hit **F12** instead.
-
-Your browser window should now look something like this:
+Right-click anywhere on the page and click **"Inspect"**. Your browser window should now look something like this:
 
 <img src="/assets/hw2/dev-tools-1.PNG" style="width: 90%; padding: 20px 0;"/>
 
@@ -119,7 +115,7 @@ If we want to use fonts outside of the default fonts (Arial, Times New Roman, Ve
 font-family: 'Roboto', sans-serif;
 ~~~
 
-Inside the body selector, set the text color to be a color of your choosing. Also, center all of the text in the body. To do this, check out the text-align property [here](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
+Inside the body selector, set the text color to be a color of your choosing. To center all of the text in the body, check out the text-align property [here](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align)
 
 ### Question 1. Add a border, border radius, box shadow, or whatever other styling you'd like to your image!
 _We recommend doing a quick google search of the property you want to use to find the syntax! MDN Web Docs and W3Schools are both reliable resources._
@@ -133,7 +129,7 @@ _Hint: Use the # symbol to select ids._
 ### Question 4. Add margin, padding, and borders to the section-wrapper class!
 _Learn more about the Box Model [here](https://www.w3schools.com/css/css_boxmodel.asp)._
 
-### Question 5a. This is a little tougher! Use CSS Flexbox to display your experiences as shown in the diagram.
+### Question 5a. Use CSS Flexbox to display your experiences as shown in the diagram.
 _Here is more information about [gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap) and [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content)._
 
 ### Question 5b. Add a background color to the experience-list-item class.
@@ -146,7 +142,7 @@ _Some cool CSS hover effects [here](https://css-tricks.com/css-link-hover-effect
 _This should look similar to our CSS code for the Experience Section._
 
 ### Question 7. Make your link pretty!
-_Make your link look like the one below! Hint: set text-decoration to none, add padding, and use the box-shadow property. The background color in the image below is rgb(42, 65, 167)._
+_Make your link look something like the one below! Hint: set text-decoration to none, add padding, and use the box-shadow property. The background color in the image below is rgb(42, 65, 167)._
 <img src="/assets/hw2/hw2-link.png" style="width: 50%; padding: 20px 0;"/>
 
 # Optional: Do whatever you want!
@@ -156,7 +152,7 @@ You've covered the basics of HTML/CSS, congratulations! Now, make the website yo
 To submit the homework folder, you have to zip it first. 
 
 **To zip a folder:**
-_**Windows:** Right-click the folder **hw2-skeleton**, select (or point to) Send to, and then select Compressed (zipped) folder._
-_**macOS:** Control-click the folder **hw2-skeleton** or tap it using two fingers, then choose Compress from the shortcut menu._
+_**Windows:** Right-click the folder **sp24-hw2-skeleton**, select (or point to) Send to, and then select Compressed (zipped) folder._
+_**macOS:** Control-click the folder **sp24-hw2-skeleton** or tap 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!