I decided that having a category system such as Budget, Flagship, Camera, Screen and big phones is the best way of showing the user all the different categories. To do this I had to use HTML and CSS, that was all I used, I didn't use any javascript on my website so far. The main idea of the website is to have categories of phones, this is done by having separate tabs and each of the different categories of the best phones in a certain category.
Last week I learned how to add images with CSS:
<!DOCTYPE html>
<html>
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
My name is Zhi. My website is about choosing the best phone for a person's specific needs.
I am learning HTML at the moment and will be using CSS in the future to make my website look more attractive; I have already started the site, it is fundamental at the current time although it should become more complicated within the next term.
These are the things which I want to emphasise when I make my website:
ACCESSIBILITY
USABILITY
FUNCTIONALITY
PRIVACY
Website proposal:
https://docs.google.com/document/d/15h2UE-OO5YBVICuPqgVtYuDWolPoTeMVV0PRsWlXOkA/edit?usp=sharing
This is my wireframe, which I will be using for my website :
These are the colours I will be using for my website:
I have learned that my original plan of having multiple pages is too elaborate for the amount of time I have to complete it. My new project is to have a straightforward website where I have useful information on which phones are the best in their price range or whatever the category is, e.g., the camera.
