Sheffield | 26-ITP-Jan | Hayriye_Saricicek | Sprint 1 | Wireframe

[mshayriyesaricicek]

Self checklist

• I have titled my PR with Region | Cohort | FirstName LastName | Sprint | Assignment Title
• My changes meet the requirements of the task
• I have tested my changes
• My changes follow the style guide

Changelist

I have added articles with images and links to my wireframe.

[netlify]

❌ Deploy Preview for cyf-onboarding-module failed. Why did it fail? →

Name	Link
🔨 Latest commit	a83f462
🔍 Latest deploy log	https://app.netlify.com/projects/cyf-onboarding-module/deploys/6979d475d7fb3e0008bb19e4

[cjyuan]

Your webpage could not be deployed on Netlify properly, and I think the failure is related to the image file size. Can you try removing the three JPEG images from your repo and just use the placeholder.svg in the HTML file?

[cjyuan]

1

When a wireframe is provided, our implementation should closely reflect its appearance and layout to ensure consistency with design expectations. You're off to a solid start, but the main purpose of implementing a wireframe is to translate structure and functionality, not final visual design. Visual design is usually handled by UI/graphic designers after the wireframe phase. To better align with the wireframe, here are a few areas where the layout and appearance could be refined:

• Your page does not have a subtitle (in the wireframe image, under the "PAGE TITLE" there is a "A SHORT DESCRIPTION" subtitle)
• In the wireframe image, the title, text content, and the READ MORE link of the first article are left aligned instead of centered.
• In the wireframe image, all articles have a visible border.

2

One of the acceptance criteria, "The page footer is fixed to the bottom of the viewport", has not yet been satisfied. Can you make the necessary change? (Suggestion: Ask an AI tool what that requirement means).

[cjyuan]

Line 20 can be better formatted as:

    <p>
      A wireframe is a basic, skeletal blueprint of a website, app, or digital product, 
      showing the layout, structure, and placement of elements like text, images, 
      and buttons, but without detailed visual design (colors, fonts). It acts as a 
      roadmap for user experience (UX) and functionality, helping teams align on
      structure and flow early in the design process, focusing on "what" goes "where" 
      before diving into "how it looks". 
    </p>

To understand why, you can ask AI these questions:

• How HTML treats multiple whitespace characters in text?
• What's the advantage of not writing a long paragraph of text in a single line in HTML?

VSCode's "Format Document" feature can help us format our code for better readability and consistency, including breaking a long line of text into shorter lines of text.
To use the feature, right-click inside the code editor and select the option.
Please note that if there are syntax errors in the code, the "Prettier" extension may not format HTML code properly.