Welcome!
The Isle of Skye's website is a simple page whose sole mission is to offer information to visitors interested in tourism on the island. The web will be updated with new articles in which the visitor will be informed of the most important places on the island.
Live website can be found through this link.
Ami link here
The Isle of Skye is the best known of the Highlands, the most appreciated and fascinating, also known as the Isle of Fairies for its impressive landscapes and hidden places. These remote lands of the North of Scotland, which have so inspired writers and painters, continue to arouse great admiration among travellers. The Isle of Skye was always separated from British soil until a bridge was built in 1995 linking the towns of Kyleakin and Kyle of Lochalsh.
Known simply as The Island, it has served as an inspiration for artists and travellers, a relief for sailors and a refuge for kings. But it is also home to fairies and giants, some of Scotland's best whiskey and cliffs that defy the north.
The following types of users can benefit from the use of this website:
- Students trips (Regular students, Language students etc)
- Regular travelers (Solo, Families, Hikers)
- Professionals (Archaeologists, Historians, Gaelic students/teachers)
The main objective of the website is to offer information to the visitor about the most interesting and most visited places on the Isle of Skye.
The website offers the necessary information in a few articles about the best places to visit on the Isle of Skye. For travellers, professionals and students, the attractions offered by nature and the fantastic history of the Island are reflected in the main articles on the web. Among the main characteristics of the website, the user expects the content to be:
- Simple web structure and easy access. In a few clicks, you can cover all the content of the web.
- The user interface is intuitive and any type of user can use it without any advanced knowledge.
- Responsive web content for all types of devices (laptop, tablet and phone).
- Compatibility with the most used web browsers (Chrome, Firefox and Edge).
- Form of contact through various channels: Telephone, Email, Web form and social networks.
The colour scheme used on the web is not very complicated. The main colours of the Isle of Skye flag (bluish #01b4ee and yellowish #ffc801) were used for the menu items. For the HTML (background) and container (content) background colour are defined as follow:
- HTML: #white
- container: #floralwhite
Balsamiq it is the software that has been used to develop the wireframes of the web. It was very useful to start the idea of the project and with it, I was able to quickly generate the code of the web structure. Captures developed with the Balsamiq program are attached below.
- Header images (1): Main header of the website that includes the title of the website, typical cows from Scotland and the Skye island flag
- Navigation bar (2): Nav bar of website thats includes the three menu elements of the site: Home, Articles and Contact. Colors (yellow from the Skye flag) changed when current page is different.
- Footer (5): The main footer is shared across the different pages and it contains the main social networks icons: FB, IG and Twitter.
- General elements shared with all pages (1, 2 and 5)
- Welcome main text (3): It contains the welcome title text, main text and image of Portree. In short it's described Isle of Skye.
- Recent articles title (4) and the last three articles of the site. In this case the articles are: Old Man of Storr, City of Portree and Dunvegan Castle which includes font awesome icon, short title and short intro.
The screenshot of index page is below:
- General elements shared with all pages (1, 2 and 5)
- List of articles (6): Section that contains all the articles of the website. They are ordered from last (top) to first (bottom).
- Each article contains font awesome icon, title and medium intro.
- In the right sided of the article all the relevant articles images are shown.
The screenshot of articles page is below:
- General elements shared with all pages (1, 2 and 5)
- Breadcrumb for single articles (7): It helps visitor to go back to articles from the single article.
- Single article content (8): All the relevant content of the article with main image, main text, subtext and images.
The screenshot of article page is below:
- General elements shared with all pages (1, 2 and 5)
- Contact details (9): Includes address, phone and email of the site owner.
- Along with the details a contact form where visitor can send messages to owner (name, email and message required)
- And a map specifying the location of the site owner.
The screenshot of contact page is below:
-
HTML5 for structure and content of the website.
-
CSS3 used for style the content and structuring using CSS Grid system.
-
Balsamiq used for create wireframes in Desktop and Mobile versions.
-
Google Fonts used to import font-family "Open Sans".
-
Adobe Photoshop used for image edition (header, resizing and optimizing size)
-
Font Awesome used for the icons on menu, articles and contact page.
-
Chrome used for debug and test the website.
-
Firefox Developer Edition used for debug and test the website.
-
Github used to create and update the online repository of the project.
-
Gitpod used for coding the project online.
-
W3C Markup and Jigsaw validation tools used for validate the HTML and CSS code of the project.
-
Ami used for generate the different responsive versions of the project.
The built-in tools of the Google Chrome and Firefox Developer Edition browsers have been used in the project. In this case, inspect each HTML and CSS element. These tools were also used to run different performance and optimization tests, such as Google Chrome's Lighthouse or the tools included to view the web on different device sizes.
An initial image has been included in the README made through the Ami web tool that includes the version in different web formats (Laptop, Tablet and Phone)
For the validation of the HTML code, the official tool has been used W3C Markup.
Web display has been tested on all available devices from the "Responsive Design Mode" tool of Firefox Developer Edition. This device list includes the following:
- Galaxy Note 20 (412x915)
- Galaxy S20 (360x800)
- Ipad (810x1080)
- Iphone 11 Pro (375x812)
- IPhone 12/13 Mini (390x844)
- IPhone 11 SE 2nd Gen (375x667)
- Kindle Fire HDX (800x1280)
TEST | RESULT | OK / FAIL |
---|---|---|
Header | Correct visualization of header image / each page | OK |
Navigation bar | Correct links and colors when select each menu / each page | OK |
Footer | Correct size and links / each page | OK |
Head title | Correct title / Each page | OK |
Favicon | Correct visualization of favicon / Each page | OK |
Responsive design | Correct visualization of content / each page | OK |
TEST | RESULT | OK / FAIL |
---|---|---|
Open FB site in new tab | OK | |
Open IG site in new tab | OK | |
Open Twitter site in new tab | OK |
TEST | RESULT | OK / FAIL |
---|---|---|
Main content | Correct content and style for main title, image and text | OK |
Articles | Correct content and style for each articles: title and text | OK |
Responsive content | Correct visualization of responsive design of content | OK |
- Lighthouse score (index)
TEST | RESULT | OK / FAIL |
---|---|---|
Articles | Correct content and style for each articles: title and text | OK |
Responsive content | Correct visualization of responsive design of articles content | OK |
- Lighthouse score (articles)
TEST | RESULT | OK / FAIL |
---|---|---|
Single article | Correct content and style of single article: main image, sub images and sub text | OK |
Responsive content | Correct visualization of responsive design of single article content | OK |
- Lighthouse score (single article)
TEST | RESULT | OK / FAIL |
---|---|---|
Contact details | Correct content and style of contact details: font awesome icons and text | OK |
Contact form | Correct visualization of responsive design of contact form | OK |
Contact form data | Check required fields name, email and message | OK |
Contact map | Correct visualization of responsive design of contact map image | OK |
Responsive content | Correct visualization of responsive design of contact page | OK |
- Lighthouse score (single article)
-
Wrong head titles in articles and article-3, article-1 and contact. After copy and paste same title I figured out after a while they were incorrect.
-
Change some div tags to semantic html tags in all pages after reviewed by a peer in Slack channel. They were all divs, now seems more correct.
-
Different html validator errors in images (no alt tags). Corrected after include all the images in the repository.
-
Fixed the resizing on index (from 500px to 800px, check style.css grid css). After resize the browser in between those values articles on index.html had bad visualization.
-
Added arial-labels in input form fields after being recommended by mentor Marcel.
The main branch of this repository has been used for the deployed version of this application.
The project deployment was based on the Code Institute Gitpod Full Template.
- Click the
Use This Template
button. - Add a repository name and brief description.
- Click the
Create Repository from Template
to create your repository. - To create a Gitpod workspace you then need to click
Gitpod
, this can take a few minutes. - When you want to work on the project it is best to open the workspace from Gitpod (rather than Github) as this will open your previous workspace rather than create a new one. You should pin the workspace so that it isn't deleted.
- Committing your work should be done often and should have clear/explanatory messages, use the following commands to make your commits:
-
git add .
: adds all modified files to a staging area -git commit -m "A message explaining your commit"
: commits all changes to a local repository. -git push
: pushes all your committed changes to your Github repository. - You can view the website in a browser by using the command
python3 -m http.server
and clicking on the buttonOpen Browser
on the box that will pop up.
Forking the GitHub Repository
If you want to make changes to your repository without affecting it, you can make a copy of it by 'Forking' it. This ensures your original repository remains unchanged.
- Find the relevant GitHub repository
- In the top right corner of the page, click the Fork button (under your account)
- Your repository has now been 'Forked' and you have a copy to work on
Cloning the GitHub Repository
Cloning your repository will allow you to download a local version of the repository to be worked on. Cloning can also be a great way to backup your work.
- Find the relevant GitHub repository
- Press the arrow on the Code button
- Copy the link that is shown in the drop-down
- Now open Gitpod & select the directory location where you would like the clone created
- In the terminal type 'git clone' & then paste the link you copied on GitHub
- Press enter and your local clone will be created.
-
The live website was deployed to GitHub pages. The steps to deploy are as follows:
- Log in to GitHub
- In your Repository section, select the project repository that you want to deploy
- In the menu located at the top of this section, click
Settings
- Select
Pages
on the left-hand menu - this is around halfway down - In the source section, select branch
Main
and save - The page is then given a site URL which you will see above the source section.
Please note it can take a while for this link to become fully active.
The live link can be found here.
- Example for project idea: Love Running projects from codeinstitute.net
- Most HTML and CSS tips and advice have been learned from Mozilla Developers and w3schools page.
- Images through different websites such as unsplash.com, pexels.com, alltrails.com, wikipedia.org and castlesfortsbattles.co.uk. Below is the content section I put the address of each image.
- Reference used to structure the README.md file (https://github.com/dhakal79/Portfolio-project-MS1/blob/master/README.md)
- Images:
Image path: assets/images/skye-1.jpg
URL: https://unsplash.com/photos/PTwcNxVfNWI
Image path: assets/images/stor-1-940x250.jpg
Image path: assets/images/stor-2.jpg
URL: https://www.pexels.com/photo/landscape-sunset-water-summer-8089495/
Image path: assets/images/stor-3.jpg
URL: https://unsplash.com/photos/Ys1UeoLuxC0
Image path: assets/images/portree-index.jpg, assets/images/portree-2.jpg, assets/images/portree-2a.jpg
URL: Personal
Image path: assets/images/portree-2.jpg
URL: https://www.alltrails.com/explore/trail/scotland/highland/scorrybreac-circuit?mobileMap=false
Image path: assets/images/portree-3.jpg
URL: https://www.pexels.com/photo/light-sea-landscape-nature-65584/
Image path: assets/images/dunvegan-castle-1.jpg
URL: http://www.castlesfortsbattles.co.uk/highland/dunvegan_castle.html
Image path: assets/images/dunvegan-castle-2.jpg
URL: https://en.wikipedia.org/wiki/Clan_MacLeod
Image path: assets/images/dunvegan-castle-3.jpg
URL: http://www.castlesfortsbattles.co.uk/highland/dunvegan_castle.html