HTML Tags I Used
This website was created using the basic HTML tags taught in Modules 1–3. I built the page using a simple structure that includes the
<header>, <main> and <footer>.
- I used the heading tags "
<h1>", "<h2>" and "<h3>" to create my main title and the smaller section titles on the page. - I used the paragraph tag "
<p>" to display all the normal paragraphs throughout my website. - I displayed my travel photos by using the image tag "
<img>" with "src" attribute to load the picture and "alt" attribute to give a short description. - I designed the navigation using the "
<nav>" tag and "<a>" tag to link the menu between Home, WebDev1, Terms and Contact pages. - I also used an "
<a>" tag with an "id" so that my "Back to top" link can jump back to the top of the page. - I used the "
<div>" tag as a container to group elements like my navigation bar, mood cards and destination cards so they are easier to style with CSS. - I used the "
<span>" tag for small inline elements like the plane icon in the header. - I used the "
<section>" tag to group my content like the 'Explore By Mood' and 'Popular Destinations' parts of the page. - On this WebDev1 page I used the "
<code>" tag to show HTML and CSS examples in a code style. - I used the "
<form>" tag on the Contact page with "<input>", "<textarea>" and "<label>" tags to create the contact form.
CSS Styles Used in my Website
I used a single external CSS file named "styles.css" to handle all styling including colours, font sizes, margins, padding and the page layout.
- I used "
background-image" to add the big header photo and "background-size: cover;" to let it fill the whole space smoothly. - I used "
background-color" to give the body, sections and footer solid colours so each part of the page is clearly separated. - I used the CSS properties "
color", "font-family" and "font-size" to change the text colour, choose different fonts and the size of the words. - I used "
margin" and "padding" to control the empty space around my sections and cards so that everything looks neat and evenly spaced. - I used "
text-align: center;" on headings and sections to keep my titles and cards neatly centred on the page. - I used "
width" and "height" to keep all the images the same size so they line up neatly in their boxes. - I used "
max-width" on my rows and hero text so the content does not stretch too wide on large screens. - I used "
display: inline-block;" to place the mood cards next to each other in one row. - I used "
float" on the plane icon so it stays on the left side of the header. - I used "
position: absolute;" and "position: relative;" to place the navigation bar on top of the hero image so it stays in the right spot.
Flexbox Layout
In Module 4, I learned how to use Flexbox, a CSS layout technique that makes it easier to organise elements in rows and columns. I used Flexbox throughout my website to create layouts that adjust smoothly on different screen sizes.
- I used "
display: flex;" to create a flex container that arranges its child elements in a row. - I used "
flex-wrap: wrap;" to allow items to wrap to the next line when there is not enough space. - I used "
flex: 1;" to make columns take up equal space in the container. - The blog section on my home page uses a three-column Flexbox layout that automatically adjusts on smaller screens.
- On the Terms and Conditions page, Flexbox is used to place three topic columns side-by-side in a clean and organised way.
Adapting the Website for All Screen Sizes
I also learned how to make my website responsive using CSS media queries. This helps the layout adapt for both desktop and mobile users.
- I used "
@media screen and (max-width: 600px)" to apply different styles when the screen is smaller than 600 pixels. - On mobile devices, the flex columns change to "
flex: 100%;" so each section takes the full width and displays vertically. - The navigation menu adjusts on mobile to stay easy to use.
- Card elements resize and organize to improve readability on smaller devices.
Purpose of My Travel Website
The purpose of my website is to share places I have visited and places I would like to visit in the future. It also shows my understanding of HTML structure, CSS formatting, Flexbox layouts and responsive design from ISYS1001 Modules 1–5.
GenAI Use Statement
I acknowledge that I have used GenAI tools to complete this assessment. I used "ChatGPT" to "brainstorm ideas, improve sentence clarity, paraphrase text and check grammar" within the parameters outlined in the Assessment Brief and by the Unit Assessor.