This is a complete explanation of how I have created this website including the overall structure, the internal structure, the CSS styles, graphic design elements and how the <alt> tag is used. I've explained this clearly using unordered lists, ordered lists, diagrams and tables to show the logic and execution of the HTML and CSS behind this website. I've aimed to break it down as much as possible to make it understandable by anyone.
There are 4 main pages:
These pages are all connected with a consistent navigation menu placed at the top of each page, allowing the users to easily access each page. The home page acts as the main entry point, whereas the rest of the pages have in-depth information. Additionally, there is a small callout block at the end of each page with the phrasing "Finished Reading? Go back to the Home Page here." This provides the user with a direct way to go back to the home page with ease.
The overall structure is designed to allow the users to access each page step by step or jump to whatever section they need.
Each page has a clear internal structure, which is similar for each page to improve usability and readability. Even though the main content blocks change according to the page's length and purpose, the surrounding structure remains similar. This creates a predictable experience for the users, as they can quickly recognise the links, navigation, main content and heading.
Using the same layout on each page improves usability as the user quickly understands how to access the important information. The consistency also supports the visual identity of the site, making all pages feel connected as one complete website.
To visualise this better, I've created a diagram, shown on the left, to highlight the overall structure of each internal page. This structure includes:
I have used a range of CSS styles that range from class, ID and element selectors. I also use a descendant combinator selector type, which selects a certain element within a class (e.g. changing the h2 element, only for the cta class). While there are a lot of CSS Styles, this allows me to design each element carefully, giving me no restrictions on how it looks. Below is a summary of each selector, the type of selector, what the style does and where it was used.
| Selector | Type of Selector | What the style does | Where it's used |
|---|---|---|---|
| .container | class | Applies 70% width, centres the container horizontally and applies 0 margins | For each block of content, creating a gap from the edge of the page and the content |
| .grey-block | class | Applies a light blue background and 30px top and bottom padding | For the blocks of main content to apply a visual break |
| .white-block | class | Applies a white background and 30px top and bottom padding | For the blocks of main content to apply a visual break |
| .header | class | Applies a dark blue background with a 20px padding on the top and bottom | For the navigation block at the top of each page |
| .main-block | class | Applies a 100px top and bottom padding, with a white foreground colour. It applies how the background will be seen: no repeats in the image and with a size set to 'cover' so there is no extra space | For each of the hero banner blocks on each page |
| #main | ID | Applies a background of an image with a gradient overlay | Only for the hero banner block on the Home Page |
| #past | ID | Applies a background of an image with a gradient overlay | Only for the hero banner block on the 'My Past' Page |
| #future | ID | Applies a background of an image with a gradient overlay | Only for the hero banner block on the 'My Future' Page |
| #comments | ID | Applies a background of an image with a gradient overlay | Only for the hero banner block on the 'Comments' Page |
| .half | class | Applies a flex layout, vertically centres the items, spaces them across the row using space-between, and adds a 20px gap between them. | For the content blocks which have two objects next to each other |
| .cta | class | Applies a dark blue background, with a 20px top and bottom padding | For the callout blocks at the bottom of the pages to link back to the Home Page |
| .footer | class | To set a dark grey background with a 20px top and bottom padding, and applying a white colour on the foreground object (the text) | For the footers at the bottom of all pages |
| img | element | Applies a 20px margin to the right and left, sets the max width to 100% and adds a box shadow | For all images (excluding background images) |
| #profile-img | ID | Sets the max width to 25% | For the profile picture of Jia on the Home Page |
| #palette-img | ID | Sets the max width to 75% | For the picture of the colour palette used near the bottom of the Comments Page |
| #computer-img | ID | Sets the max width to 45% | For the picture of technologies' uses near the bottom of My Future Page |
| #internal-layout-img | ID | Sets the max width to 40% | For the picture of the internal layout diagram near the top of the Comments Page |
| body | element |
|
To define a consistent style for the entire content of all pages |
| h1 | element | Sets font size to 35px, changes colour to white and increases line height to 150% | For the headings in the hero main block on all pages |
| h2 | element | Sets font size to 20px and changes colour to dark blue | For the headings of each content block |
| b | element | Applies a font weight of 600 | For all text that is bold |
| a | element | Applies a color of dark blue and a font weight of 600 | For all text that has a link with the <a> tag |
| span | element | Applies a color of light blue | For the span text in Home Page |
| .menu | class | Arranges the text items in a single row, with a 40px gap in between, and aligns it to the right | For the text in the header block at the top of each page |
| .menu a | descendant combinator | Changes the text colour to light blue with no text decoration (no underline) | The links with <a> tag in the header block at the top of each page |
| .header_current | class | Changes the text colour to white, with a 700 font weight and no text decoration (no underline) | Applied to the current page link in the menu. (e.g. if the user is on the Home Page, then this class styling is applied to the Home Page link in the navigation) |
| .cta h2 | descendant combinator | Makes the text colour light blue (instead of dark blue) | In the h2 text in the callout block at the bottom of each page, which has a dark blue background |
| .cta_link | class | Makes the link coloured to white | In the callout block at the bottom of each page, which has a dark blue background |
| ul | element | Removes all margin on the top and bottom | For all unordered lists |
| ol | element | Removes all margin on the top and bottom | For all ordered lists |
| table | element | Removes distance between cells so the borders are adjacent to each other | For styling applied to the entire table |
| th | element |
|
For the header row of this table |
| td | element | Applies padding of 10px on top and bottom, and 20px on left and right. Adds a small dark blue bottom border | For the data rows of this table |
| #col_one | ID | Sets width to 10% | Only for the first column in the table |
| #col_two | ID | Sets width to 10% | Only for the second column in the table |
| #col_three | ID | Sets width to 40% | Only for the third column in the table |
| #col_four | ID | Sets width to 40% | Only for the fourth column in the table |
The graphic design of my website was based on keeping the layout simple, readable and consistent throughout the entire page.
I used a structured layout of clear blocks with spacing, and a repeated navigation so the user can move through the site easily. Each page has a similar internal structure for consistency and making the entire website easier to understand. Images were used carefully to enhance the quality of the content, without overwhelming the page. I ensured there was whitespace through margins to prevent the layouts looking crowded.
I chose a limited colour palette using shades of blue, white, and dark grey:
Blue was used as the main accent colour, because Blue represents trust and other positive feelings and it's my favourite colour. It creates a clean and professional appearance, while the white and light blue backgrounds help keep the content easy to read. The dark grey was used against the light backgrounds to maintain strong contrast. I ensured to keep the colour combinations high contrast so they wouldn't be hard to read, and focused on a balanced and simple design. Therefore, I also used a colour overlay on the main hero blocks to ensure there is high contrast between the colours.
The typeface used throughout the website is a sans-serif font stack: Gill Sans, Gill Sans MT, Calibri, Trebuchet MS, and sans-serif. I chose this because sans-serif fonts are easy to read and are known to suit a modern style of a website. To ensure a clear visual hierarchy of h1, h2, p etc., I used different heading sizes, font colours and font weights to create that hierarchy. Large headings help divide the content into sections, while the paragraph text is used to remain consistent and readable for larger amounts of text content.
The alt attribute was used on images to provide text descriptions of the image content. This is important for accessibility as it allows screen readers to describe the image to users who may not be able to see it. Also, if the image fails to load, the user can still understand what the image was intended to show. For this reason, I used alt text to describe each image in a meaningful way.
The website is also designed to remain usable when CSS is turned off. Without CSS, the webpages lose their colours, spacing, and visual styling, which removes most aesthetics. However, the content still appears in a logical order, because the HTML structure is clear. This includes headings, paragraphs, lists, tables and links still function properly. So, the user can still read the information and navigate between pages.
Unfortunately, the site looks much more basic without CSS, but it remains functional and accessible. This shows that the website does not rely only on styling for usability, but also on well-organised HTML.