For this lab, imagine you are creating a travel blog and want to build a webpage showcasing your recent trip to Fire Island. You will need to include the following pieces on your webpage:
- Webpage Title: "Adventures in Fire Island"
- Hero Section: Include a large banner image showcasing the park's scenery (use
tag with appropriate attributes).
- Blog Post Summary: Write a short paragraph using
tags describing your experience and highlights of the trip.
- Image Gallery: Include a section with multiple images from your trip. Here are two options:
- Use unordered lists (
- ) and list items (
- ) with images (
tags) within each list item.
- ) with images (
- Call to Action: Add a section with a link using the tag, encouraging readers to explore the park themselves (e.g., "Plan your National Park adventure today!").
- VSCode
- GitHub Repo
- MDN: HTML
Fork the GitHub lab repository provided to your own GitHub account. This will create a personal copy of the repository, which is necessary to submit the assignment.
- Clone the forked repository to your local machine using Git. After navigating to the folder where you would like to keep your work, use the command
git clonefollowed by the ssh link of your own repository on Github. - Use the
cdcommand to move into the directory/folder of the lab you just cloned. - Use the
lscommand to see what files and folders you have in your current directory. - Use the
code .command to open up the local repo in VSCode.
- Navigate to the provided GitHub repository.
- An HTML file called
index.htmlis provided in the repo.
Write the basic HTML structure with
<DOCTYPE>,<html>,<head>,<title>, and<body>sections.Build the Hero Section:
- Within the
<body>, add an appropriate heading tag (e.g.,<h1>) for the webpage title. - Include an
<img>tag with a large banner image representing the national park. Ensure you set thesrcattribute to the image filename and provide a descriptivealttext attribute.
Create a Blog Post Summary:
- Use one or more
<p>tags to write a concise paragraph summarizing your travel experience and highlighting key features of the park.
Build out the Image Gallery:
- Create an
<h2>tag for the title with the text "Gallery: Fire Island". - Include a
<ul>element. - Within the
<ul>, use<li>tags for each image in your gallery. - Inside each
<li>tag, add an<img>tag with the image source (src) and alt text attribute.
Build the Call to Action Section:
- Add a section with a heading tag (e.g.,
<h3>) like "Explore the Adventure!" - Include a paragraph (
<p>) encouraging readers to visit the park. - Use an
<a>tag to create a link to a relevant webpage (e.g., the National Park Service website for Fire Island).
Before you submit your solution, you need to save your progress with git.
- Add your changes to the staging area by executing
git add . - Create a commit by executing
git commit -m "Your commit message" - Push your commits to GitHub by executing
git push origin mainorgit push origin master, depending on the name of your branch (usegit branchto check on which branch you are).
- Use the rubric in Canvas as a guide for how this lab is graded.
- Your submission will be automatically scored in CodeGrade, using the most recent commit. Remember to make sure you have pushed your commit to GitHub before submitting your assignment. Please note, you have two attempts to submit, and all criterion must be met to pass the AutoTest.
- You can review your submission in CodeGrade and see your final score in your Canvas gradebook.
- When you are ready to submit, click the Load Lab: HTML button below to launch CodeGrade.
- Click on + Create Submission. Connect your repository for this lab.
- For additional information on submitting assignments in CodeGrade: Getting Started in Canvas
- Use unordered lists (