Comprehensive HTML, CSS, JavaScript, and Git Assignment Guide for Students

There are 4 tasks that you should work through:

1. Create a repository on GitHub, and clone it to your local machine.
2. Style the provided HTML page using css. As you complete this step, make sure that you...
3. Make at least three commits as you complete task 2.
4. Push your repository to GitHub and take screenshots to include them in your submission.

1. Create a repository on GitHub

1. If you do not already have a GitHub account, you will need to create one. The Git Learning Activity will guide you through this process.
2. Create a new repository For this CA task.
3. Clone the repository to your local machine.

2. Apply CSS to a HTML file

You have been provided with a HTML that contains some internal CSS. Using this file, style the page according to the following directions. The CSS Learning Activity will assist you with this process. Note: Remember to commit your work regularly as you complete this task. (See Task #1).

1. Set the background color of the page to ·c-background-color·.
2. Set the background color of the header and footer to ·c-background-highlights·.
3. Set the text color in the main, footer, and header to be ·base-font-color·.
4. Links in the article should be c-magenta. (If there are no links in the article, add some!)
5. When the mouse hovers over a link, it should be highlighted orange.
6. Create a border around each subsection of the article, including the subsection heading. The border should be solid, 3px wide, and be·c-cyan· in color.
7. Align the Header in the center, and set the text size to 150%. The heading should be c-yellow.
8. Remove the bullet points from the unordered list in the nav section.
9. For the list items in the nav section list, align to the center, and apply a flex layout.
10. Color all text in the aside to c-green. All links in the aside should be c-red, except when they are hovered over, when they should be c-blue.
11. Set the maximum width of the page to 500px.
12. All headings within the article should have a top padding of 50px.
13. Set the layout of the main content section such that the 'related links' portion is to the right of the article.

3. Create commits

As you complete Task 2 (CSS styling), you must regularly commit your work to your Git repository. For this task, you must make at least three (3) commits. Each commit message must be formatted according to the following:

• The first line must be a summary of the changes, no longer than 72 characters in length.
• The second line must be blank.
• All lines below the second line must be formatted using Markdown and should contain:
  • One heading
  • One ordered list of the changes made in the commit

4. Push your repository to GitHub and take screenshots to include them in your submission

After completing Tasks 1-3, you are ready to prepare your screenshots to include them in your submission. So far, your submission must include:

• Your styled HTML file (including CSS) completed in Step #2,
• Screenshots of your GitHub repository clearly showing:
  • Commit history
  • Commit messages
  • Repository files

CSS + JavaScript

This CSS + JavaScript section has two parts. First, create a page that displays an image, and uses JavaScript to allow the user to select which image is displayed. Secondly, use JavaScript to give the user the option to toggle the styling on your page.

Tasks

1. Select the image using JavaScript

This task requires you to create a HTML page incorporating JavaScript and CSS. Your HTML must include:

1. A correct document type
2. Correct use of 'head' and 'body' elements
3. Semantic HTML elements (e.g. 'main')
4. One 'img' and one 'p' element. The 'img' should appear above the 'p' when viewing the webpage.
5. 5 'button' elements. Each button corresponds to one of the Images, listed in the table below. The text shown in each button should be the bird's name.

When the page is first viewed, one of the Image/text combinations from the table below must be shown, using the 'img' and 'p' elements in your HTML (You may choose any of the birds as the default image).

2. CSS Toggle button

You are required to style your HTML page using two themes, and provide a button to toggle between them. To do this, you'll make two variables with the same name in different CSS selectors.

1. Create two color palettes in your CSS. There must be 5 colors in each. The required variable names for your colors are:
   • primary-color
   • secondary-color
   • bg-color
   • font-color
   • heading-color
2. Style your HTML using the CSS colors you've created.
3. Add a button to your page that will allow the user to toggle the CSS theme.
4. The two palettes must be placed in different CSS rulesets. One should be placed in ':root', and the other in a ruleset with the selector: [data-theme="dark"]
5. Write a JavaScript function that runs when the 'Toggle Theme' button is pressed. The function should set the value of the 'data-theme' attribute to 'light' or 'dark', whichever is not currently selected.

1. Prepare your final submission

After completing Tasks 1-2, you are ready to prepare your final submission for this assessment. So far, your submission must include:

• All required items from the HTML, CSS, Git sections (see task 4 from the HTML, CSS, & Git Tasks in the previous section)
• Your output for the JavaScript + CSS task (current task)
• Please note that you should zip all files into one .zip file and submit

Digital Web Development Assessment: HTML, CSS, Git, and JavaScript Integration

This assessment focuses on developing practical skills in HTML, CSS, Git, and JavaScript while creating a fully functional web page. Students are required to demonstrate proficiency in web development practices, version control, and dynamic content implementation. The assessment is divided into multiple tasks covering repository creation, page styling, version control, and JavaScript interactivity.

Assessment Requirements Overview

The primary objectives of this assessment are:

1. Create a GitHub repository: Set up a remote repository and clone it to the local machine for version control.

2. Style a provided HTML page: Use CSS to apply specified colors, layouts, borders, and typography, including hover effects, flex layouts, and responsive design.

3. Commit changes regularly: Make at least three commits with properly formatted commit messages following Markdown documentation style.

4. Push the repository to GitHub: Capture screenshots of repository structure, commit history, and files.

5. JavaScript functionality: Implement image selection and theme toggling using CSS variables and DOM manipulation.

The assessment emphasizes understanding HTML structure, CSS styling, Git version control, and basic JavaScript interactivity while reinforcing the importance of professional coding standards.

Step-by-Step Assessment Approach

1. GitHub Repository Setup

The academic mentor guided the student to create a GitHub account and repository. The repository was cloned locally to allow easy tracking of file changes and commits. This step ensured the student learned essential version control practices.

Key steps:

• Create a new repository on GitHub.

• Clone the repository to the local machine.

• Maintain proper commit messages to document progress.

2. HTML and CSS Styling

The provided HTML page contained basic internal CSS. The student was guided to apply styling according to assessment requirements:

• Page background and header/footer colors were applied using variables like c-background-color and c-background-highlights.

• Text colors for main, header, and footer were set using base-font-color.

• Article links were styled with hover effects, borders around subsections, and centered headings.

• Navigation lists were styled using a flex layout, and bullet points were removed.

• The aside section text and links were colored according to specifications.

• Maximum page width was restricted to 500px, and headings were given top padding of 50px.

The mentor emphasized regular commits after completing each major styling step to reinforce version control best practices.

3. Git Commits

At least three commits were made during the CSS styling stage. Each commit contained:

• A summary line (max 72 characters) describing the changes.

• A blank line.

• Markdown-formatted list of changes made with headings and ordered lists.

This helped the student practice structured commit messaging and improved documentation clarity.

4. JavaScript Functionality

The final part of the assessment involved adding dynamic functionality:

• Image Selection: Five buttons were created to switch between images of birds, updating the img and p elements dynamically using JavaScript.

• CSS Theme Toggle: Two color palettes were defined using CSS variables. A toggle button was implemented to switch between light and dark themes by updating the data-theme attribute dynamically via JavaScript.

This section reinforced the concepts of DOM manipulation, event handling, and CSS variable usage.

5. Submission Preparation

All files, including the styled HTML, JavaScript functionality, and screenshots of GitHub repository commits, were compressed into a single .zip file for submission. This ensures a complete and organized submission that highlights the student’s workflow and progress.

Learning Objectives Achieved

By completing this assessment, the student achieved the following learning outcomes:

• Understanding and applying HTML semantics and CSS styling principles.

• Implementing responsive layouts and interactive elements using CSS and JavaScript.

• Practicing Git version control, including repository setup, commits, and push operations.

• Documenting work professionally with structured commit messages.

• Developing problem-solving and workflow management skills in a real-world web development scenario.

Final Outcome

The student successfully:

• Created a fully styled HTML page adhering to the provided specifications.

• Applied consistent CSS styling, hover effects, and flex-based navigation layout.

• Implemented dynamic image selection and theme toggling using JavaScript.

• Maintained a GitHub repository with organized commit history and documentation.

• Produced a complete submission including code, screenshots, and summary documentation.

This assessment demonstrates the integration of web development technologies, effective use of Git for version control, and the ability to create interactive and visually appealing web pages.