Skip to content

Fix HTML structure, clean up project files, and expand README project list #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Fix HTML structure, clean up project files, and expand README project list #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3a7bdec
Initial plan
Copilot Mar 11, 2026
39c42c0
Update project files and README with improvements
Copilot Mar 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 18 additions & 10 deletions 2.4 Movie Ranking Project/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
<!-- Write your code below -->
<h1>The Best Movies According to Ayush</h1>
<h2>My top 3 movies of all-time.</h2>
<hr>
<h3>Iron Man</h3>
<p>This movie inspired me.</p>
<h3>Avengers</h3>
<p>It was a very nice movie with different memebers uniting to fight together.</p>
<h3>Robot</h3>
<p>Also a good movie and inspiring.</p>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Movie Ranking</title>
</head>
<body>
<h1>The Best Movies According to Ayush</h1>
<h2>My top 3 movies of all-time.</h2>
<hr>
<h3>Iron Man</h3>
<p>This movie inspired me.</p>
<h3>Avengers</h3>
<p>It was a very nice movie with different members uniting to fight together.</p>
<h3>Robot</h3>
<p>Also a good movie and inspiring.</p>
</body>
</html>
35 changes: 22 additions & 13 deletions 3.4 Birthday Invite Project/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,22 @@
<h1>It's My Birthday</h1>
<h2>On the 27th August</h2>
<!-- Example image URL -->
<img src="https://raw.githubusercontent.com/appbrewery/webdev/main/birthday-cake3.4.jpeg" alt="purple cake with candles" />
<h3>What to bring:</h3>
<ul>
<li>Balloons (I love balloons)</li>
<li>Cake (I'm really good at eating)</li>
<li>An appetite (There will be lots of food)</li>
</ul>
<h3>This is where you need to go:</h3>
<!-- Example Google Maps Link -->
<a href="https://www.google.com/maps/@35.7040744,139.5577317,3a,75y,289.6h,87.01t,0.72r/data=!3m6!1e1!3m4!1sgT28ssf0BB2LxZ63JNcL1w!2e0!7i13312!8i6656" alt="">Google Maps Link</a>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Birthday Invite</title>
</head>
<body>
<h1>It's My Birthday</h1>
<h2>On the 27th August</h2>
<!-- Example image URL -->
<img src="https://raw.githubusercontent.com/appbrewery/webdev/main/birthday-cake3.4.jpeg" alt="purple cake with candles" />
<h3>What to bring:</h3>
<ul>
<li>Balloons (I love balloons)</li>
<li>Cake (I'm really good at eating)</li>
<li>An appetite (There will be lots of food)</li>
</ul>
<h3>This is where you need to go:</h3>
<!-- Example Google Maps Link -->
<a href="https://www.google.com/maps/@35.7040744,139.5577317,3a,75y,289.6h,87.01t,0.72r/data=!3m6!1e1!3m4!1sgT28ssf0BB2LxZ63JNcL1w!2e0!7i13312!8i6656">Google Maps Link</a>
</body>
</html>
28 changes: 2 additions & 26 deletions 6.4 Motivation Meme Project/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,18 @@
<!--
TODO: Create a motivational post website.
Style it how ever you like.
Look at the goal image for inspiration.
But it must have the following features:
1. The main h1 text should be using the Regular Libre Baskerville Font from Google Fonts:
https://fonts.google.com/specimen/Libre+Baskerville
2. The text should be white and background black.
3. Add your own image into the images folder inside assets. It should have a 5px white border.
4. The text should be center aligned.
5. Create a div to contain the h1, p and img elements. Adjust the margins so that the image and text are centered on the page.
Hint: You horizontally center a div by giving it a width of 50% and a margin-left of 25%.
Hint: Set the image to have a width of 100% so it fills the div.
6. Read about the text-transform property on MDN docs to make the h1 uppercase with CSS.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<title>Motivation Meme</title>
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">
</head>
<body>
<div class="poster">
<img class="motivation-img" src="./assets/images/daenerys.jpeg" alt="">
<img class="motivation-img" src="./assets/images/daenerys.jpeg" alt="A strong character representing motivation and determination">
<h1>Motivation</h1>
<p>God is Omnipresent</p>
</div>
<div>
<div>
bar 1
<div>

</div>
</div>
</div>
</body>
</html>
24 changes: 19 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,26 @@ This repository is divided into folders, each representing a different section o

## Project List

Below are some of the key projects developed as part of this course:
Below are the key projects developed as part of this course:

1. **Personal Website** - A fully responsive portfolio website built using HTML, and CSS, showcasing my personal projects, skills, and contact information.

- [Ayush-Portfolio-Demo-Site](https://ayushgoel0.github.io/Ayush-Portfolio-Demo-Site/)
- [Ayush-Portfolio-Demo-Site-2](https://ayushgoel0.github.io/Ayush-Portfolio-Demo-Site-2/)
1. **Movie Ranking Project** (Section 2.4) - An HTML page listing a personal top 3 movies of all time, using headings and paragraphs.

2. **Birthday Invite Project** (Section 3.4) - A birthday invitation webpage using lists, anchor links, and images.

3. **HTML Portfolio Project** (Section 4.3) - A multi-page HTML portfolio showcasing previous projects, with navigation links to About Me and Contact Me pages.

4. **Color Vocab Project** (Section 5.4) - A Spanish color vocabulary page styled with external CSS, demonstrating CSS selectors and color styling.

5. **Motivation Meme Project** (Section 6.4) - A motivational poster webpage using Google Fonts, CSS box model, and image styling.

6. **CSS Flag Project** (Section 7.3) - A recreation of the Flag of Laos using only CSS, demonstrating CSS positioning and combining selectors.

### Personal Portfolio (External)

In addition to the course projects, I also built a fully responsive portfolio website using HTML and CSS:

- [Ayush-Portfolio-Demo-Site](https://ayushgoel0.github.io/Ayush-Portfolio-Demo-Site/)
- [Ayush-Portfolio-Demo-Site-2](https://ayushgoel0.github.io/Ayush-Portfolio-Demo-Site-2/)

## Contributing

Expand Down