Update portfolio-webpage-1.md

projects/portfolio/portfolio-webpage-1.md

@@ -2,14 +2,14 @@
 
 ### Additional Skills
 
-- VS Code
-- Developer Tools
-- Keyboard Shortcuts
-- [Web Patterns](/electives/web-patterns.md)
-- UI/UX
-- GitHub for code storage and static-site hosting
-- Ergonomics
-- Writing a good README
+* VS Code
+* Developer Tools
+* Keyboard Shortcuts
+* [Web Patterns](/electives/web-patterns.md)
+* UI/UX
+* GitHub for code storage and static-site hosting
+* Ergonomics
+* Writing a good README
 
 ### Primary Goals
 
@@ -22,122 +22,203 @@ To demonstrate understanding of the foundational topics covered in the first wee
 
 ### Overview
 
-In this project, you will build a simple portfolio page to practice what you've learned about VSCode, HTML, CSS, Git, and GitHub. In the future, a great portfolio page will be a valuable way to showcase your skills as you look for engineering work.
+In this project, you will build a simple portfolio page to practice what you've learned about VS Code, HTML, CSS, Git, and GitHub. In the future, a great portfolio page will be a valuable way to showcase your skills as you look for engineering work.
 
 ### Motivation
 
-Increase your job prospects dramatically with your web page. Get creative and show off your technical skills. Employers will love you!
-Here's a list of example portfolios: https://github.com/HackathonHackers/personal-sites
-
-## Project Requirements:
-
-You should write clear & informative commit messages for each commit. Create pull requests once big/multiple changes have been made, for your mentor to review. Add the github link to your portfolio page to the cohort shared sheet ('Checklist items' tab).
-
-- At least 50 commits
-  - Pro-tip: Get used to committing your code every single time a new line of code works
-- At least one PR
-  - Consider pushing your code to GitHub every time you finish a bolded section, but at least every day
-- Use of the command line to create files and implement the use of Git
-- Practice the use of developer tools
-- HTML
-  - Photo
-  - Headers
-  - Sections
-  - Semantic Tags
-  - Links to social media accounts
-  - Contact information for yourself
-  - Contact form with required fields
-    - contact form asking for a name (required)
-    - email (required)
-    - phone number (not required)
-    - address (not required)
-- CSS
-  - At least 3 style properties applied to text
-  - Border
-  - Use of columns
-  - Use of at least 1 ID
-  - Use of at least 3 [web design patterns](https://github.com/Techtonica/curriculum/blob/main/electives/web-patterns.md)
-  - Override a CSS rule in your code in an obvious way at least once
-  - Change display property of at least 1 element
-- Additional Requirements
-  - Have at least 1 style change for narrow, medium, and wide browser views
+Increase your job prospects dramatically with your web page. Get creative and show off your technical skills. Employers will love you!  
+Here’s a list of example portfolios:  
+https://github.com/HackathonHackers/personal-sites
 
 ---
 
-### Project Checklist
+## Project Requirements
 
-**Ergonomics**
+You should write clear and informative commit messages for each commit. Create pull requests once big or multiple changes have been made for your mentor to review. Add the GitHub link to your portfolio page to the cohort shared sheet (“Checklist items” tab).
 
-- [ ] Remember to get up to stretch or walk for 5-10 minutes _every hour_. (Set an alarm)
-- [ ] Each hour, check foot, knee, elbow, and spine position and correct if necessary. (Set an alarm)
+* At least 50 commits  
+  * Pro-tip: Get used to committing your code every single time a new line of code works
+* At least one PR  
+  * Consider pushing your code to GitHub every time you finish a bolded section, but at least every day
+* Use of the command line to create files and implement Git
+* Practice the use of developer tools
 
-**Create your project**
+---
+
+## HTML Requirements
+
+Use HTML to describe the **structure and meaning** of your content. Visual styling should be handled with CSS.
+
+* Photo
+* **Headings (h1–h6)** to create a clear content hierarchy
+* Sections
+* Semantic tags
+* Links to social media accounts
+* Contact information for yourself
+* Contact form with required fields:
+  * Name (required)
+  * Email (required)
+  * Phone number (not required)
+  * Address (not required)
+
+### Semantics Note
+
+Use semantic HTML elements whenever possible to describe what the content **is**, not how it should look. Semantic elements improve accessibility, readability, and long-term maintainability of your code.
+
+Examples of semantic elements include:  
+`<header>`, `<nav>`, `<main>`, `<section>`, `<article>`, `<aside>`, and `<footer>`.
+
+Avoid using headings(H1 - H6) or other elements purely for visual styling. If you want text to look larger or styled differently, use CSS instead of changing the HTML structure.
+
+---
+
+### Suggested Page Structure
+
+Your portfolio page should generally follow this structure:
+
+* `<header>`  
+  * Your name  
+  * Short description  
+  * Navigation links
+
+* `<main>`  
+  * About section  
+  * Projects section  
+  * Contact section
+
+* `<footer>`  
+  * Copyright or additional links
+
+---
+
+### Example HTML Body
+
+```html
+<body>
+  <header>
+    <h1>Your Name</h1>
+    <p>Short description of your experience</p>
+    <nav>
+      <a href="#about">About</a>
+      <a href="#projects">Projects</a>
+      <a href="#contact">Contact</a>
+    </nav>
+  </header>
+
+  <main>
+    <section id="about">
+      <h2>About Me</h2>
+      <p>A brief introduction about who you are and what you do.</p>
+    </section>
+
+    <section id="projects">
+      <h2>Projects</h2>
+      <p>Examples of your work or experience.</p>
+    </section>
+
+    <section id="contact">
+      <h2>Contact</h2>
+      <p>How people can reach you.</p>
+    </section>
+  </main>
+
+  <footer>
+    <p>© Your Name</p>
+  </footer>
+</body>
+```
+This structure helps create a clear document outline and supports accessibility tools such as screen readers.
+
+---
+
+## CSS Requirements
+
+* At least 3 style properties applied to text
+* Border
+* Use of columns
+* Use of at least 1 ID
+* Use of at least 3 [web design patterns](https://github.com/Techtonica/curriculum/blob/main/electives/web-patterns.md)
+* Override a CSS rule in an obvious way at least once
+* Change the display property of at least 1 element
+
+### Additional Requirements
+
+* Have at least 1 style change for narrow, medium, and wide browser views
+
+---
+
+## Project Checklist
+
+### Ergonomics
 
-- [ ] Use bash to create a local portfolio-website directory. Use the command line to make a portfolio.html file and a portfolio.css file in the portfolio-website directory.
-- [ ] Use the command line to change the names of portfolio.html and portfolio.css to index.html and styles.css.
-- [ ] Use the command line to make a .gitignore file in your desktop directory and add at least one real unwanted file to the .gitignore list.
-- [ ] Use the command line to move the .gitignore file from your desktop directory to your portfolio-website directory.
-- [ ] Using your command line, initialize a GitHub repo in portfolio-website directory.
-- [ ] Create a portfolio-website remote repository on Github. (If your local directory already includes a README and .gitignore file, DO NOT opt for adding a README or .gitignore file in the Github initial set up. Otherwise, there will be a conflict when you attempt to push your commits.)
+* [ ] Remember to get up to stretch or walk for 5–10 minutes every hour (set an alarm)
+* [ ] Each hour, check foot, knee, elbow, and spine position and correct if necessary (set an alarm)
 
-- ![A screenshot displaying options when creating a new repository in Github](Create-repo-no-README-no-.gitignore.png)
+### Create Your Project
 
-- [ ] Using your command line, add and commit your portfolio-website directory, and then do a git push.
-- [ ] Open your portfolio-website directory in VS Code using your command line.
-- [ ] Increase or decrease your VSCode text size before starting.
-- [ ] Open your VSCode Integrated Terminal, and close your terminal/command line program.
-- [ ] Add a linting extension to VSCode. You are welcome to keep or remove it after trying it out.
+* [ ] Use bash to create a local portfolio-website directory
+* [ ] Create `portfolio.html` and `portfolio.css`
+* [ ] Rename files to `index.html` and `styles.css`
+* [ ] Create a `.gitignore` file and add at least one unwanted file
+* [ ] Move `.gitignore` into the project directory
+* [ ] Initialize a Git repository
+* [ ] Create a remote GitHub repository
+* [ ] Add, commit, and push your code
+* [ ] Open the project in VS Code
+* [ ] Adjust VS Code text size
+* [ ] Open VS Code’s integrated terminal
+* [ ] Add a linting extension
 
-**HTML**
+### HTML Checklist
 
-- [ ] Use VS Code shortcuts to create boilerplate code for your html file.
-- [ ] Open and view your HTML file in Chrome using only the VSCode application.
-- [ ] Make a basic header for your online resume - your name and a short description of your experience.
-- [ ] In a separate section, list a few coding experience entries and some past work experience that you can apply to a tech job.
-- [ ] Add a title tag to your file.
-- [ ] Double-check that you have proper indentation for readability.
-- [ ] Use semantic tags rather than presentational tags when possible.
-- [ ] (Remember to make a git commit after each set of code changes!)
-- [ ] (Second half of week) - Add a contact form with the following fields: name (required), email (required), phone number (not required), and address (not required) (Hint: Required fields in a form are those where you normally see a \* symbol)
+* [ ] Use VS Code shortcuts to create boilerplate HTML
+* [ ] Open and view your HTML file in Chrome
+* [ ] Create a header with your name and a short description
+* [ ] List coding experience and relevant work experience
+* [ ] Add a `<title>` tag
+* [ ] Use proper indentation
+* [ ] Use semantic tags where possible
+* [ ] Commit after each set of changes
+* [ ] Add a contact form with required and optional fields
 
-**Developer Tools**
+### Developer Tools
 
-- [ ] Inspect your page at least once using the Source Code Viewer
-- [ ] Inspect your page at least once using the Quick Source Viewer Chrome Extension
-- [ ] Access the JavaScript console at least once to check your page for errors and warnings.
+* [ ] Inspect your page using Source Code Viewer
+* [ ] Inspect your page using Quick Source Viewer
+* [ ] Check the JavaScript console for errors
 
-**CSS**
+### CSS Checklist
 
-- [ ] Link your styles.css file to index.html.
-- [ ] Style your text using at least 3 different properties.
-- [ ] Add and style a profile photo of yourself. Include a border.
-- [ ] Have some info in a second column
-- [ ] Use one "id" correctly.
-- [ ] Select 3 [web design patterns](https://github.com/Techtonica/curriculum/edit/main/electives/web-patterns.md) to implement
-- [ ] Use your search bar at least once to jump to an element or style.
-- [ ] Have 2 CSS blocks that include the class "override" with one overriding the other rule in an obvious way.
-- [ ] Change the display property of at least one element.
+* [ ] Link `styles.css` to `index.html`
+* [ ] Style text using at least 3 properties
+* [ ] Add and style a profile photo with a border
+* [ ] Display information in a second column
+* [ ] Use one ID correctly
+* [ ] Implement 3 web design patterns
+* [ ] Use search to jump to an element or style
+* [ ] Use two `.override` CSS rules
+* [ ] Change the display property of at least one element
 
-**Media Queries, UI, UX**
+### Media Queries, UI, UX
 
-- [ ] Have at least one style change each for a narrow, medium, and wide browser window.
-- [ ] Use developer tools at least once to inspect your styles and check window width.
-- [ ] Make sure the User Interface of your site is appealing at all widths while keeping it simple.
-- [ ] Ask a peer to test your site and tell you about their experience. Change one thing that would provide better UX.
+* [ ] Style for narrow, medium, and wide screens
+* [ ] Use developer tools to inspect styles
+* [ ] Ensure the UI is usable and simple at all widths
+* [ ] Get peer feedback and improve UX
 
-**README**
+### README
 
-- [ ] Create a README.md file from your command line.
-- [ ] Include relevant README content (what the project is, what open-source license it uses, how to install, etc.).
-- [ ] Use markdown to organize your README.
+* [ ] Create a README.md file
+* [ ] Include project description, license, and installation steps
+* [ ] Use Markdown for organization
 
 ---
 
-### Recommended extension activity if time permits
+### Recommended Extension Activity (Optional)
 
-- [ ] Go into the settings of your portfolio-website repo in GitHub and create a link for your live site
-- [ ] Link to your live github.io site that is clickable on your README.
+* [ ] Enable GitHub Pages for your repo
+* [ ] Add the live site link to your README
 
 ---
 
-Full Time Program Week 3: Portfolio App Part 1 of 3
+Full Time Program Week 3: Portfolio App (Part 1 of 3)