Project milestone 1 for Code Institute Full-stack development program: HTML/CSS Essentials
This project is a Front End website for a Travel Company. Regardless of their industry, a business’ online presence can have a massive impact on its success. The main purpose of this website is to show the users the company, promote their brand to new clients and to display package holidays. The website is interactive and user-friendly allowing the user to interact with the company through a contact form and social media channels.
- As a website creator, I want to:
- Build a website that is visually appealing from the user’s first visit so they are intrigued to explore all the pages.
- Build an easy to navigate website for its users.
- As a new visitor, I want to:
- Understand the main purpose of the site.
- Be able to easily navigate throughout the site and find relevant content about package holidays.
- Be able to easily contact the company for more information.
- As a returning visitor, I want to:
- Be able to find newly available package holidays.
- Be able to find more relevant information about the company.
Travel World website is a four pages site: Landing Page, Home Page, Contact Page and Thanks Page. The default loading page is the Landing Page and it is linked to the Home Page by a button. The Home Page has 8 sections: (1) Trust, (2) About, (3) Banner Bali, (4) Top Trips, (5) Banner Maldives, (6) City Breaks, (7) Partners and Footer. This page, is linked to all the pages in the website by the Navigation Menu on the top. The Contact Page has the Menu at the top and 3 sections: (1) Contact Form, (2) Partners (3) Footer. The Thanks Page has two sections: (1) 'Thanks' message and (2) Footer.
There are four main colours used: (1 ) white (#ffffff), (2) a variation of white (#faebd7), (3) an orange tone (#f84f0d) and (4) a black (#111111). The white is used for the main website background, the black is used for text while the orange represents a colour tone that can be seen in the logo, titles and icons. When the user hovers, the white variation (#faebd7) is used for the button background.
In the Footer Section I used a linear gradient as background using four main colours and orientation of 258 degrees.
- The Poppins , sans-serif is used as the main font for the whole website.
- The El Messiri, sans-serif is used to display the hotel's name on the cards.
- 3 background images one in the Header and another 2 in the Banner Section.
- 6 Images for the icons in the Trust Section with the size of 48px by 48px. They are PNG files.
- 2 images in the About Section with the size of 680px by 410px.
- 12 images for the Top Trips Section and City Break Section with the size of 950px by 713px.
- 8 Images in the Partners Section with the size of 580px by 280px.
- 1 image GiF animation in the Thanks Page.
- Please Note (All images were converted to the webp files except the 6 images in the Trust Section).
- The Landing Page has one video as a background displaying muted, loop and autoplay.
- The web site has a Google Maps location section where the users can locate the office in Dublin.
- At the bottom of the Landing Page and footer, users can access the company social media links (Facebook and Twitter). Once these icons are clicked they are opened in a new tab.
- In the Banner Bali and Banner Maldives the user can directly telephone the company by clicking the 'book now' button.
- The Landing Page is the first contact that users have with this website. This page works as a cover with a video playing in the background. It also features text used as a marketing slogan to retain the users engagement with the website. When clicked, this button drives the viewers to the homepage.
Live Page Here
- At the top of the website, users can find a fixed navigation menu that is fully responsive in all devices. In this navigation menu users can navigate to the different pages in the website. They can also see the Travel World logo on the left side.
Live Feature Here
- In this feature users can see a travel image as a background followed by some services provided by the company. It is advertising cost savings to the user by booking a trip with Travel World.
Live Page Here
- In this feature users have access to information about the company, for example the company's main purpose, its history, mission statement, and also the benefits of working for Travel World.
Live Feature Here
- This feature is a highlight banner where the user can see a travel deal and book the trip by clicking on ' Book now' and it will allow the user to ring the
Travel World office.
Live Feature Here
- This feature is a cards section where the top travel deals are displayed with information about the city, country, price, hotel name, hotel stars and duration of stay (number of days and nights). The card has a button where the user can book. When the user hovers over this, the box-shadow changes.
Live Feature Here
- This feature has the same purpose as the Top Trip Section. A modification to this section is when the user hovers over the card the user can zoom in on the image.
Live Feature Here
- This feature has the same purpose as the Top Trip Section. The difference is when the card is hovered by the user the image zoom in.
Live Feature Here
- In this section users can see partners and companies that Travel World work with.
Live Feature Here
- This feature is called the Footer Section. Here users can see information about the company's schedule and contact Travel World through the social media links. The copyright message is displayed on the bottom.
Live Feature Here
- In this page users can contact the Travel World via a contact form. The contact form requires the user's first name, last name, email and message. The user can also see the location of the Travel World office on Google Maps.
Live Feature Here
- Once the user successfully submits a contact form, they will land on the 'Thanks' Page. When the button is clicked it brings the users back to the contact form.
Live Feature Here
- Add a Customer Review Section in the Home page. This would allow users to offer suggestions on how to improve the website and display customers' experiences and their opinions of Travel World.
- Google Fonts:
- Google fonts were used to import the 'Poppins' and 'El Messiri' fonts throughout the style.css.
- Font Awesome:
- Font Awesome are used as an icons for user UX purposes.
- Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub:
- GitHub is used to store the project's code after being pushed from Git.
- PIXLR:
- PIXLR was used to create, modify and resize all images on this website.
- Canva
- Canva was used to creat the image logo, favicon and also the office image.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
Google Lighthouse was used to test Performance, Best Practices, Accessibility and SEO on both Desktop and Mobile devices.
The testing was done using the Google Chrome Browser. Chrome Developer Tools was used extensively, particularly to check responsiveness on different screen sizes. Testing was also done using Firefox on desktop, and again on Google Chrome and Opera on the Huawei P20.
-
Responsive on all device sizes between 280px - 2600px wide
-
Devices tested using the Google Developer Tools emulator
- BlackBerry Z30 (360px x 640px)
- BlackBerry PlayBook (600px x 1024px)
- Samsung Galaxy Note 3 (360px x 640px)
- Samsung Galaxy S3 (360px x 640px)
- Samsung Galaxy S9+(320px x 658px)
- LG Optimus L70 (384px x 640px)
- Microsoft Lumia 550 (640px x 360px)
- Microsoft Lumia 950 (360px x 640px)
- Nexus 4 (384px x 640px)
- Nokia Lumia 520 (320px x 533px)
- Nokia N9 (480px x 854px)
- Pixel 3 (393px x 786px)
- Apple iPad Mini (468px x 4024)
- Apple iPhone 4 (320px x 480px)
- Apple iPhone 5/S (320px 568px)
- Apple iPhone 6/7/8 (375px x 667px)
- Apple iPhone 6/7/8 Plus (414px x 736px)
- Apple iPhone X (375px x 812px)
-
Desktop Results:
. -
Mobile Results:
. -
All links have been hovered and clicked to ensure accessibility.
-
Pages all load correctly on all device screen sizes.
-
All social media links work correctly and open on a new tab.
-
All images load on each page as intended.
-
All the buttons are working correctly and bring the users to the function that they were built for.
-
The arrows inside the buttons in Landing Page, Thanks Page and Homepage banners, has a fully functional opacity animation.
-
Both the buttons in Homepage cards and in the Contact Page change the background and text color when hovered by the user. They are working without issues.
-
The cards in the Homepage "top trips", change the box shadow when hovered by the user, working correctly.
-
The cards in the Homepage "city breaks", has an image zoom in effect when hovered by the users, working correctly.
-
I was unable to add padding to the arrow default in the form select.
-
At the initial stages of my project, I made an error when using Git Commit. Following my first call with my mentor he clarified how to do it and I have followed his recommended approach.
The website development was created in the "main" branch. This branch was deployed using GitHub Pages.
- This site was deployed by completing the following steps:
- Open GitHub.
- Click on the project to be deployed.
- Navigate to the "Settings".
- Navigate down to the "GitHub Pages".
- Click on "Check it out here!".
- Select the "main" branch and select "Save".
- The link to the live website was ready on the top.
- Fork this project following the steps:
- Open GitHub.
- Click on the project to be forked.
- Find the 'Fork' button to the top right of the page.
- Once you click the button the fork will be in your repository..
- Clone this project following the steps:
- Open GitHub.
- Click on the project to be cloned.
- You will be provided with three options to choose from, HTTPS, SSH or GitHub CLI, click the clipboard icon in order to copy the URL..
- Once you click the button the fork will be in your repository.
- Open a new terminal.
- Change the current working directory to the location that you want the cloned directory.
- Type 'git clone' and paste the URL copied in step 3.
- Press 'Enter' and the project is cloned.
- All the text content is original. The quote in the footer is from Andre Gide.
- All images were provided and used under the Unsplash licence Unsplash.com.
- The video was provided and used under the Pexels licence Unsplash.com.
- All the icons were provided and used under the Icons8 licence Icons8.com.
- Special thanks to my mentor Sandeep Aggarwal, my colleagues at Code Institute, Kasia Bogucka and Mairéad Gillic for their assistance throughout this project.