!
Overview
You are tasked with creating a simple website for an electronics repair company using HTML and CSS. You will also create a wireframe for the website before starting development and later evaluate how well your website matches your wireframe.
- Understand the basics of HTML structure.
- Learn how to style websites using external CSS.
- Practice using basic CSS properties such as color, text-align, border, font-family, font-size, and background-color.
- Develop wireframing and evaluation skills.
Create a Wireframe
Before you start coding, you must create a wireframe of your website. A wireframe is a simple sketch of the layout and design of the website.
The wireframe should show the following sections of the website:
- Header: Company name and logo placeholder.
- Navigation: Links to Home, Services, About Us, and Contact Us.
- Main Content Area: Information about the company, including services offered (e.g., mobile phone repairs, laptop repairs).
- Footer: Contact information (address, phone number, email).
The wireframe should show where elements like text, images, and buttons will go.
Build the Website
Create a website using HTML and external CSS, following these requirements:
HTML Requirements
- Use only simple HTML elements (avoid semantic elements like <header>, <footer>, and <nav>).
- Structure the website using <div>, <h1>, <h2>, <p>, <ul>, <ol> and <a> elements.
- Include sections: Header, Navigation, Main Content, and Footer.
CSS Requirements
Use an external CSS file to style your website, using these properties:
- Colours: Change the text colour of headings and paragraphs.
- Text alignment: Align the navigation and headings.
- Border: Add a simple border around sections like the navigation or main content.
- Fonts: Choose a readable font for the text.
- Text size: Adjust the font size of headings, navigation links, and paragraphs.
- Background colours: Use a background colour to distinguish different sections.
Example CSS
CSS
body {
font-family: Arial, sans-serif;
}
#heading {
color: darkblue;
text-align: center;
}
nav a {
color: black;
text-decoration: none;
padding: 10px;
}
.contact {
border: 1px solid black;
background-color: lightgray;
padding: 10px;
margin: 10px;
}
Evaluation
Once you have completed your website, evaluate it by answering the following questions:
- How well does your website match your original wireframe?
- What aspects of your wireframe did you include? What was different?
- What improvements could you make to your website?
Submission Requirements
Submit your HTML file, CSS file, and wireframe (as a sketch or diagram). Ensure your website is functional and follows the basic structure outlined above.