This website was established to help those who want to explore the unique geography of Alaska, its pristine landscapes and iconic wildlife. This is a project for a course in Html and CSS for the Code Institute by Istem Karakas.
The purpose of this website is to demonstrate my skills in Html and CSS. The target audience is anyone who wishes to explore new places and have exciting adventures.
Link to the website: North Travellers
- Create a website that showcases my skills in Html and CSS.
- Create a website that is responsive on all devices.
- Create a website that is easy to navigate and looks elegant.
- Create a website that is easy to read and understand.
- Create a website where you can sign up for travel advice.
- Highlight to students the opportunity to learn a language by traveling, working and living abroad.
- As a user, I want to be able to navigate the website easily.
- As a user, I want to be able to read the website easily. -As a user, I want to be able to contact the website owner easily.
- As a user, I want to be able to communicate easily with the organisation.
- As a user, I want to easily understand the content and purpose of the site.
- As a user, I want to be able to plan the best holiday according to my budget and interests.
- Text color used:
- #3a3a3a
- rgb(0, 100, 0)
- #ff6600
- #007bff
- #333
- #ffffff
- Background color used:
- Whitesmoke (#F5F5F5)
- #f5d1d7
- gb(224, 255, 255, .7)
- rgb(234, 255, 0)
- rgb(245, 209, 215, 0.6)
- #0056b3
- #007bff
- Border color used:
- #ccc
- #e2435d
- Font
- The main font used in the project is the Roboto font from googlefonts.
- The fallback font is sans-serif.
I created the wireframes for this site with Balsamiq. All wireframes can be found in the folder called Docs. The wireframes should not be considered finished product, but as a tool I used as inspiration when creating the website.
- The website is responsive on all devices.
- The website is using the same color and font throughout the entire site to make it easy to read and understand, no matter where you are.
-
- The header is the same on all pages.
- The header is the same on all devices above 768px. Under 768px the header becomes a column instead.
- The header is a sticky header, meaning it will stay at the top of the screen even if you scroll down.
- The header is responsive on all devices.
- When you hover over the links in the header, the text is underlined.
-
-
- The footer is the same on all pages.
- The footer is the same on all devices.
- The footer will always be on the bottom of the page, even if you scroll up.
- The footer has links to social media platforms.
- All the links are working and will open a new window when clicked.
-
-
- The home page, or index page, is the first page a user sees when they visit the website. In the upper left corner, there is a logo that says "North Travellers", designed with an outline of Alaska.
- This is true for all pages where the logo is displayed. There is a menu next to the logo, which is responsive on different screens.
- Just below the logo is a photo showing Alaska's unique glaciers and mountains. The words "Explore Alaska" are overlaid onto the photo.
- Below the photo, the service offered by the website is introduced. In this paragraph, clicking on the word "activities" directs users to the "Activities" page.
- There is a map showing where Alaska is located. Below the map are links to social media platforms.
- The Activities page starts with a brief description, with photos of activities that visitors can do in Alaska.
- The Activities page is responsive: the size of the photo depends on the user's screen.
- The activities page is the page that contains photos and brief tour names of the activities that visitors can do in Alaska.
- At the bottom of the Activities section, there is a sentence that can direct the visitor to the contact us page.
- The Activities page has a footer identical to that on the home page.
This section contains brief and important advice for those planning to travel to Alaska. There are three photographs, which are responsive.
A different photograph of Alaska is used as the background on this page. Overlaid on the photo is a form that allows users to get in touch. The form asks for:
- First Name*
- Last Name*
- Email address*
- Trip duration*
- When the user would like to visit to go (choose Summer or Winter)*
- Any additional information the user would like to give
- A "Confirmation page" thanks the user for signing up.
- *An asterisk indicates a required field
- You can view all test results for the site Testing.md
- All the links are working an will take you to the correct page.
- All the external links are working and will open a new tab and take you to the correct page.
- All the internal links are working and will take you to the correct page.
- All the buttons are working and will take you to the correct page.
- All code on the site has been validated, both HTML and CSS, by use of the W3C validator.
- W3C - HTML validator: (https://validator.w3.org/)
- W3C Validator for HTML shows no errors on any page.
- W3C - CSS Validator: (https://jigsaw.w3.org/css-validator/)
- W3C Validator for CSS shows no errors in the style.css file.
- The website is tested on different devices. The website is responsive on all tested devices.
- The website is tested on different browsers. The website is working on all tested browsers.
- Tested browsers: Chrome, Edge, Safari & Firefox.
- The website is working and is responsive on all tested devices:
- iPhone SE
- iPhone XR
- iPhone 12 pro/14 pro
- iphone 15 pro max
- iPad
- iPad Air
- iPad Mini
- Pixel 7
- iPad pro
- Samsung Galaxy S8+
- Samsung Galaxy S20 Ultra
- Surface Pro 7
- Surface Duo
- Samsung Galaxy Fold
- Samsung Galaxy A51/71
- Nest Hub
- I have tested the site in Chrome Dev tools.
- I have tested the site on different browsers using my PC.
- I have tested the site using (https://www.browserstack.com/).
- I have tested the site on my phone (Nothing phone 1) using chrome.
- The commit history for this website can be found on Github: (https://github.com/techistem/alaska2/commits/main/)
The final result is a website that is responsive on all tested devices and browsers. The website is validated with W3C validator. The website works on all tested devices and browsers.
- Here is a link to the website: (https://techistem.github.io/alaska2/)
- This website was developed using Gitpod which I used to commit and push to GitHub using the terminal in GitPod.
- Log in to GitHub and locate the GitHub Repository.
- At the top of the Repository, locate the Settings button on the menu.
- Under Source, click the dropdown called None and select Main Branch.
- The page will refresh automatically and generate a link to your website.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL you copied in Step 3. $ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter. Your local clone will be created.
-
The images belong to the two sites I mentioned below.
- Link: (https://pixabay.com/)
- Link: (https://www.pexels.com/)
-
The fishing charters image is my own.
- The logo is my own design. I designed it on Canva.
- Link: (https://www.canva.com/)
- I used google fonts as my main font:
- Link (https://fonts.google.com/)
-
I used the markdown cheat-sheet to help me with the readme.md file.
-
I got help with the readme file from CodeInstitutes samplereadme.