This is a website of an imaginary English Language School based in Galway, Ireland that I create for Milestone Project 1, Full Stack Software Development in Code Institute.
It is a Mobile First & Responsive website and the link to the website is available on HERE
People whose first language is NOT English and who are looking for a school to improve their English for various purposes, as well as who would like to have some experiences living in a foreign country while they study English. They could be from anywhere in the world so some might know about Galway / Ireland quite well and some might not. User's goals are to be able to find out core information about the school, such as location, courses, accommodation, prices and feedback from the former students in order to make up their mind, and to be able to contact the school or make a booking without any difficulties if they wish to do so.
The owner of the language school. Owner's goals are to increase the number of direct students (direct sales) as currently a lot of students come from agents that they work with.
As users are non-native English speakers, keeping the website simple is essential and using more visual contents than text contents would help them to understand the information easily. It targets business-to-consumer (B2C) so all the information must be clear and well presented.
The main aims for this website are;
- To provide users enough information about the school as outlined on the user's story, Who's this website for? section. To achieve this, there are basic courses and accommodation details on Home page and more details are available on Courses and Accommodation pages, that can be accessed on Home page easily, by selecting the option on the menu or clicking More Details button. The price list, that users usually want to see, is available from the menu as well as Price List button on Courses and Accommodation sections. School address and telephone number are on the footer as expected with a link of google maps
- To provide users easy access to contact and booking process as outlined on the user's story, Who's this website for? section. To achieve this, there is a very simple Contact Us Form available on top and bottom of each page. There is a Registration Form, which is designed in a very user friendly format, on the menu so users can access these from anywhere on the website
Below tables show what should be included on the website to make the website valuable to the users. I would like to implement all of them on the website, however Different Languages and Quotation Calculator are not implemented due to lack of my current skills.
| Opportunity | Importance | Viability / Feasibility |
|---|---|---|
| Courses and Accommodation Details | 5 | 5 |
| PDF Price List | 5 | 5 |
| Booking Form | 5 | 4 |
| Gallery | 4 | 4 |
| Feedback | 4 | 4 |
| Different Languages (X) | 3 | 2 |
| Quotation Calculator (X) | 4 | 1 |
Features to be included on this project are;
- Image galleries using carousel. 5 images of courses and 5 images of accommodation
- PDF price list linked with menu and buttons and opens in a separate tab
- Online registration form (static form) that users can access from the menu bar
- Contact form with modal that users can access from header and footer (Added as additional feature while creating the website)
The website consists of 4 pages (Home, Courses, Accommodation, Register) plus price list as a separate link. Everything is laid out logically so that users can easily predict and learn about the website.
Home
There is a hero image with school's catch phrase "Go west... to learn English, make friends and have fun!".
There are brief courses, accommodation descriptions and feedback underneath hero image.
Courses
Outlining the details of each course with a link to the price list. There are image galleries of the courses. Same layout as Accommodation.
Accommodation
Outlining the details of each accommodation with a link to the price list. There are image galleries of the accommodation. Same layout as Courses.
Register
Online registration form (static form) that is kept simple. Some fields have drop down menu to make users life easier.
Header & Footer
All pages are designed with the same header and footer so that users can get familiar with the website quickly. There is a navigation bar on the header which includes logo and menu. School's details and social icons are on the footer.
Green Off white* is used for header and green is used for footer, white for body and orange for buttons.
Note: *When I started coding, I felt Dark Green (#065446), that I was going to use initially on the header, was too strong and didn't match with the hero image well, therefore I used off white (#fafafa) as background colour of header with font colour of Dark Green (#065446). I also decided to add contact section on top of the page so Dark Green is used for this.
Mobile first design and there are wireframes of Home, Courses, Accommodation and Register for mobile, tablet and desktop sizes.
Note: I changed the design of Courses and Accommodation for all the sizes. I put the galleries above courses and accommodation details so that they look same as Home and this was better layout than the original plan on my wireframes.
Dark Green (#065446) is the school colour so this colour is used for header and footer and it is used for main text and background of headings. Background colour is white and orange is used for buttons. Irish flag is imaged for colour coordinations.
Note: As I mentioned on Structure Plane, I revisited the colour of header.
Serif type (Noto Serif) is used for headings to make the website trustful as this is for education. On the other hand, San-Serif type (Open Sans) is used for contents to make the website easy to read and give friendly atmosphere to the users.
- Created with HTML5, CSS3, Bootstrap
- It consists of 4 individual pages plus a PDF price list as separate link page
- Manual carousel for galleries
- Modal for contact form
- To prevent contact us form being sent unless e-mail addresses match. As far as I understand, JavaScript is required for this so I wasn't able to put this
- More modern registration form which includes better styled calendar and drop down menu. JavaScript and other technology are required so I wasn't able to do it
- Website in Different Languages and Quotation Calculator as mentioned on Strategy Plane
- HTML5 for markup
- CSS3 for style
- Google Fonts for fonts
- Bootstrap for main frame of the website
- Font Awesome for icons
- Visual Studio Code as Integrated Development Environment (IDE)
- Git for version control
- GitHub for keeping the files, documents and deploy the website
- Code Institute course materials
- Code Institute Slack Community
- MDN
- Stackoverflow
- Youtube
- W3schools
- Adobe To resize images
- Autoprefixer To parse CSS and add vendor prefixes
The purpose of this was to fix any errors before the second meeting with my mentor, that was planned almost end of completion of my website.
W3C Markup Validation Service was used to check any errors on html files.
Three errors found on index.html
- "Stray end tag i": There were two closing tags of i for Font Awesome icon. Fixed the error by removing one of them
- Same as above in the different line
- "aria-describedby attribute doesn't point to an element in the same document": Fixed the error by putting the id in the same element
Note: These errors were on header and modal form that are being used on all the pages so I fixed these on all the pages before testing other pages
One warning found on courses.html
- "section lacks heading": I used section tag for image gallery on courses.html without any heading and that was the reason of the warning. As I wasn't sure if I needed to use other semantic tag or div tag for this, I asked the question in Slack community and I was told "this is a warning and it's usually ok" so decided to leave it
One warning found on accommodation.html
- Same as warning on courses.html
Seven errors and One warning on register.html (error 1 - 5) / (error and warning 6 - 8)
- "Stray end tag span": There was end tag of span on home of navbar, that shouldn't have been there. Fixed this by putting it on register of navbar
- "End tag a violates nesting rules": Fixed by putting span in this element
- "The first child option element of a select element with a required attribute, and without a multiple attribute, and without a size attribute whose value is greater than 1, must have either an empty value attribute, or must have no text content. Consider either adding a placeholder option label, or adding a size attribute with a value equal to the number of option elements": Fixed by adding
size="13" on select tag. Errors from 4 - 6 were also same errors. - Same as 3 in different field
- Same as 3 in different field
- Same as 3 in different field
- "Duplicate ID": Fixed by replacing another id, which was register-email, for email id on the registration form
- "The first occurrence of ID email was here": Same error as above and fixed by putting a new id, register-email
Note: Adding size="13" on select tag was not the proper solution for this as all 13 options showed on the registration form. I googled the issue and found that I needed to put value of disable option to none(value="").
W3C CSS Validation Service was used to check any errors on css file.
No error or warning found
Lighthouse was used to check common issues that affect on my site performance, accessibility and user experience. Issues anything below 90 were addressed.
- Performance 73: I thought I could fix this by reducing the size of images but I couldn't, so I needed to keep this on hold as well as there were some other issues that I didn't have time to look at
- Accessibility 95: OK
- Best Practices 86: Fixed by adding rel="noopener" on tags which has _blank. Also, removed one of JavaScript link that I copied from Font Awesome CDN that didn't need to be on index.html
- SEO 92: OK
Note: Regarding the issues of Performance, I looked these with my mentor however we weren't able to solve the issues. Please refer the final testing section for more details
- Performance 92: OK
- Accessibility 95 OK
- Best Practices 93: OK
- SEO 90: OK
- Performance 94: OK
- Accessibility 95: OK
- Best Practices 93: OK
- SEO 92: OK
- Performance 100: OK
- Accessibility 95: OK
- Best Practices 93: OK
- SEO 90: OK
Note: For both mobile and desktop versions of courses.html, I knew that there were some same issues as index.html (such as the size of images, rel="noopener", JavaScript of Font Awesome) so I fixed these first before the test
- Performance 60: It seemed Performance on Lighthouse changes every time. (It may depend on the speed of broadband?) Fixed the issue by reducing the size of images, however this gave an issue for Best Practice on desktop size as I got a warning saying low resolution image was being used for the first photo so I had to adjust the size of this photo and test it.
- Accessibility 95: OK
- Best Practices 100: OK
- SEO 92: OK
- Performance 100: OK
- Accessibility 95: OK
- Best Practices 93: OK
- SEO 90: OK
Note: For both mobile and desktop versions of accommodation.html, I knew that there were some same issues as courses.html (such as the size of images, rel="noopener", JavaScript of Font Awesome) so I fixed these first before the test. For some reason, performance on mobile is not high although it is same as courses and I reduced the size of images.
- Performance 93: OK
- Accessibility 85: Fixed by changing the colour of label from grey to dark green
- Best Practices 93: OK
- SEO 90: OK
- Performance 98: OK
- Accessibility 85: Fixed by changing the colour of label from grey to dark green
- Best Practices 93: OK
- SEO 90: OK
The purpose of this was to make sure that my website was properly functioning before submitting the project.
-
W3C Markup Validation Service was used to check any errors on html files. I confirm that there were no errors as some issues were fixed at Pre-Testing point. There was a warning on courses.html and accommodation.html but it was OK as explained on the Pre-Testing section
-
W3C CSS Validation Service was used to check any errors on css file. I confirm that there were no errors which were same as Pre-Testing. However, there were 8 warnings appeared. Warning (line 8) was just information that it's not going to validate the imported style sheet. The rest of warnings were related to webKit which is a HTML/CSS web browser rendering engine for Safari/Chrome and they were added on my CSS after putting it in Autoprefixer so these warnings could be ignored
- Lighthouse was used to check common issues that affect on my site performance, accessibility and user experience. Everything was 90+ scores except index.html - Mobile and accommodation.html - Desktop.
My mentor and I looked at the issues of index.html - Mobile but we weren't able to figure out how to solve the issues. According to the report, it mentioned about links of bootstrap and CSS, that suggested that I wasn't using them, but I actually was. I have exactly same layout on other html files and not sure why it caused issues on only index.html - Mobile so I had to leave it.
For the other issue that Best Practice for accommodation.html - Desktop, this was caused by the size of main image being low resolution. If I increased the size of the image, it would raise issues on mobile size, that images would be too big so I decided to leave this as it is
- Tested in major web browsers such as Google Chrome, Safari, Firefox, Microsoft Edge, Opera and the website worked both visually and functionally, except that date picker didn't show on Safari as it is not supported. I also tested with Internet Explorer 11. Home, Courses and Accommodation pages were fine however Register page didn't show properly. I looked up the solution but learned from a recent post in Slack community that I wouldn't need to worry about it as long as it works on Microsoft Edge so decided to take no action about it
- I used Google Chrome Dev Tools to check the responsiveness of my website. I tested with mobile, tablet and desktop sizes and all worked. It also responded on each breakpoint that I set up on Media Query (Tablet: 48rem / 768px, Desktop: 62rem / 992px and Extra Large: 93rem / 1488px) and no visual or functional errors found
- This was carried out to make sure that the main aims of the website were met. I visited each page and tested by clicking on each link on the page to see if the link wasn't broken and was led where it was supposed to. I also tested the forms by completing the details and I confirm that none of the links were broken and all the links and forms work fine
I faced some difficulties and issues before starting the project. During the project, I didn't have many difficulties or issues but spent a lot of time on something I wasn't used to doing. Below are the list of them.
- Starting the project: As I had never created a website with HTML and CSS properly by myself, I wasn't sure how and where to start, although I took the lessons to prepare for this. What I did to solve this was to watch two session videos (MS1 Planning Session by Jim Lynx) & (README Video by Anna Greaves) repeatedly until I understood the process, got an image of it and got ready for it
- Customising hamburger menu: I used quite basic HTML and CSS so I didn't have many coding issues, however customising hamburger menu, that I had thought it was straight forward enough, wasn't easy to do, so I had to look up solutions on google
- List on form: I wanted to add more nationalities and languages on the list on registration form. The only option I could think of was to manually add them on HTML. I was looking for better option / solution but couldn't find anything other than a list of template which includes all the countries. As this website is my project in the institute, I decided to keep nationalities and languages as they were instead of having so many of them on html file
- Date picker: I wanted to style date picker on the registration form in a better format, however it seems JavaScript is required for this, so decided to leave it for the moment
- Bootstrap default margin and padding: When I set up max width of 93rem and trying to put borders around the website, courses and accommodation sections were expanded more than 100% which I think it was caused by Bootstrap's default setting (margin) so I used Chrome Dev Tools and Toggle Pesticide to see where the issues were and fixed them by putting margin 0 on row class
- New features: There were some new features that I had never used. For example, README was one of them and it took sometime for me to get used to write in markdown. I learned it by looking up on google as well as by writing as much as possible
I used Git as a local repository and GitHub as a remote repository. The process of version control was;
- I created a remote repository in GitHub by clicking "New repository" on main page
- I created a folder called ms1-school-of-english on my computer
- I opened the folder with Visual Studio Code
- I created README.md file
- I created a local repository by command line with git init command
- I did my first commit in git repository and first push to GitHub using the below commands;
* git add README.md
* git commit -m "Initial commit"
* git branch -M main
* git remote add origin https://github.com/Toto-Kotaro-Tanaka/ms1-school-of-english.git
* git push -u origin main
- From the second commit, I used the below process and I did it whenever I completed a section or even a group of work in order to make sure to keep the history of my work logged
* git add . / to put all new and updated work on the stage in git
* git commit -m "Example commit" / to commit the work on the stage
* git push / to update the work in GitHub
To deploy the website, I followed the below steps in GitHub.
- Go to "Settings" on the repository
- On "Source" of "GitHub Pages", select "main" for Branch and click save
- The link is published and confirmed above "Source".
URL is "https:// +your GitHub username+ .github.io/ +your repository name+ /"
(e.g. https://toto-kotaro-tanaka.github.io/ms1-school-of-english/)
HTML5
- Bootstrap Navbar for navigation bar
- Bootstrap Carousel for feedback and image galleries
- Bootstrap Modal for contact form
- Bootstrap Forms for registration form and form on modal
Note: *These are credited on all the html files
CSS3
- Stackoverflow to remove border colour of hamburger menu
- Stackoverflow to change the colour of hamburger menu
- Stackoverflow to change the colour of carousel arrows
Note: *These are credited on the css file
- All the contents were written by me
Logo
- Created by me using Wix Logo maker
Hero Image
Feedback Images
- feedback1: Unsplash by Icons8 Team
- feedback2: Unsplash by Johm Kan
- feedback3: Unsplash by Lars Zhang
- feedback4: Unsplash by Tamarcus Brown
- feedback5: Unsplash by Irene Strong
Courses Images
- courses1: Unsplash by Windows
- courses2: Unsplash by You X Ventures
- courses3: Unsplash by ThisiEnginneringRAEng
- courses4: Unsplash by Devon Divine
- courses5: Unsplash by M. Monk
Accommodation Images
- accommodation1: Unsplash by Dimitry Anikin
- accommodation2: Pexels by Askar Abayev
- accommodation3: Pexels by Yan
- accommodation4: Unsplash by Edgar Castrejon
- accommodation5: Unsplash by Raphael Schaller
I would like to thank ;
- My mentor, Spencer Barriball, who went through the project with me and assured that I was doing right for the project
- Jim Lynx whose "MS1 planning" session video gave me clear guidance and got me start the project
- Anna Greaves whose "README" session video gave me ideas of how to write README
- Code Institute Slack Members who answered my queries during the project