Web design task 1

Post ID: 3555457

Competencies

4073.2.1 : Constructs HTML Web Pages

The learner constructs basic web pages using HTML to create structured, accessible content.

4073.2.2 : Applies CSS (Cascading Style Sheets) to Web Pages

The learner applies CSS (Cascading Style Sheets) to style and design visually appealing web pages to enhance user experience.

Introduction

The ability to develop functional, accessible, and visually engaging websites is an essential skill for any aspiring web developer. While AI tools can streamline workflows and enhance productivity, a deep understanding of fundamental web design concepts is crucial, as it empowers you to build with intention, critically assess AI-generated suggestions, and maintain full control over the user experience. This assessment reinforces those essential skills, preparing you to design and troubleshoot web content independently and ethically in a professional environment.

This task is structured in two phases. In Phase I of this assessment, you will create a personal profile web page that demonstrates your understanding of fundamental web development skills, including HTML structure and cascading style sheets (CSS) styling. This single-page website will serve as an introduction to your professional identity. In Phase II, you will use AI responsibly to refine and enhance your work without replacing your foundational code. The final submission will demonstrate your ability to build functional code artifacts and critically reflect on the use of AI in your development process.

Note: Save the following files in a folder named LastName_E009_Task1 (replace “LastName” with your last name):

index.html

styles.css

One .docx file containing responses for Parts C and E

At least one image file used in the web page (.png, .jpg, .jpeg, or .gif)

AI chat log screenshots (either embedded in the Word document or included as a separate file)

Use a text editor of your choice (e.g., Visual Studio Code, Notepad++) to create your HTML and CSS files.

Requirements

Your submission must represent your original work and understanding of the course material. Most performance assessment submissions are automatically scanned through the WGU similarity checker. Students are strongly encouraged to wait for the similarity report to generate after uploading their work and then review it to ensure Academic Authenticity guidelines are met before submitting the file for evaluation. See Understanding Similarity Reports for more information.

Grammarly Note:

Professional Communication will be automatically assessed through Grammarly for Education in most performance assessments before a student submits work for evaluation. Students are strongly encouraged to review the Grammarly for Education feedback prior to submitting work for evaluation, as the overall submission will not pass without this aspect passing. See Use Grammarly for Education Effectively for more information.

File Note:

Tasks may not be submitted as cloud links, such as links to Google Docs, Google Slides, OneDrive, etc. All supporting documentation, such as screenshots and proof of experience, should be collected in a pdf file and submitted separately from the main file. For more information, please see Computer System and Technology Requirements.

Phase I: Human‑Only Implementation (Foundational Skills)—You must independently complete and submit the initial implementation of the web page without the use of AI.

A. Create a single-page personal profile web page (index.html) that includes the following:

1. A basic HTML structure, including doctype, head, title, meta tags for character set and viewport, and body element

2. An organization of the body with the following elements:

header

nav with three internal links

main with three sections:

– About Me

– Skills

– Contact

footer

Note: The internal links in the nav element should link to each of the three sections in the main element.

3. A written HTML code for each of the following elements:

proper heading hierarchy with at least three heading elements (h1–h6)

one local image with descriptive alt text

at least two paragraphs in the About Me section

one ordered or unordered list with five skills or technologies in the Skills section

one form with the following four elements in the Contact section:

– name label and field using an input element of type "text"

– email label and field using an input element of type "email"

– message label and field using a text area element

– submit button using an input element of type "submit"

B. Create an external CSS style sheet (styles.css) that applies each of the following points to the HTML elements in part A:

two element selectors

two class selectors

one ID selector

one descendant selector

one pseudo-class selector (e.g., :hover)

typography properties:

– font family

– color

– font size

margin and padding properties

one flexbox or grid layout implementation

responsive design using media queries for mobile (375px) and desktop (1024px)

C. Write an explanation document (.docx) by doing the following:

1. Explain the use of two semantic HTML elements and their purpose, including one relevant code snippet from the web page files for each element to reinforce the explanation.

2. Explain how the design choices for spacing, colors, and typography work together to enhance the user experience, including one relevant code snippet from the web page files to reinforce each explanation.

3. Explain the responsive design approach, including one technique used to ensure the web page adapts to different screen sizes and one relevant code snippet from the web page files to reinforce the explanation.

Phase II: AI‑Supported Refinement (Responsible AI Use)—After completing Phase I, use an AI tool to refine or extend your web page implementation without replacing your foundational code from Phase 1.

D. Use an AI tool to refine your web page submission from Phase I by doing the following:

1. Implement one refinement suggested by an AI tool in part A of Phase I without replacing your foundational code from Phase 1. Include a screen capture of the AI chat as evidence.

2. Implement one refinement suggested by an AI tool in part B of Phase I without replacing your foundational code from Phase 1. Include a screen capture of the AI chat as evidence.

E. Reflect on the AI output by doing the following:

1. Describe two changes suggested by AI.

2. Explain how each AI-suggested change affected the functionality, design, or user experience.

3. Describe one clear lesson learned about using AI in web development.

F. Acknowledge sources, using in-text citations and references, for content that is quoted, paraphrased, or summarized.

G. Demonstrate professional communication in the content and presentation of your submission.

Note: Save the following files in a folder named LastName_E009_Task1 (replace “LastName” with your last name):

index.html (final version)

styles.css (final version)

One .docx file containing responses for Parts C and E

At least one image file used in the web page (.png, .jpg, .jpeg, or .gif)

AI chat log screenshots (either embedded in the Word document or included as a separate file)

Right-click the folder and select Compress (or Send to > Compressed (zipped) folder) to create a single .zip file. Upload the .zip file through the Assessments section of the Student Portal as your final submission.

File Restrictions

Competent

This submission includes satisfactory use of grammar, sentence fluency, contextual spelling, and punctuation, which promote accurate interpretation and understanding.