The Marbella Spanish School is a website designed to advertise the fictional aforementioned academic private school and enroll students onto the courses it offers. The school offers a Full-time Course and Part-Time Course and carries out examinations based on the Common European Language Framework.

The website contains four pages: About, Contact, Sign Up and a Thank You page (after signing up) which are all linked together to give guided content.

Users of the website are able to find all the information they need regarding the school and what it is offers, its location and time schedule and are able to sign-up for its services. The website is targeted towards students of any age looking to achieve official certification in the Spanish language.

The project is the first milestone of five that needs to be completed for the Code Institute. The requirement is to create a static, responsive website just using HTML and CSS3.

The deployed version of the site can be found here: https://keironchaudhry.github.io/p1-marbella-spanish-school/

Requirements

To create a static website applying the knowledge of what has been learned so far that contains responsive functionality and smooth user design. The development of the site should be controlled and documented through Github.

The required technologies are HTML and CSS3.

• UX
  • User Demographic
  • User Goals
  • Design
  • Typography
  • Colour scheme
  • Images
• Features
  • About page
  • Contact page
  • Sign up page
  • Thank you page
• Website features
  • Navigation bar
  • About page
  • Footer
  • Contact page
  • Sign up page
  • Thank you page
• Testing
• Development and deployment
• Media
• Acknowledgments
• Useful sources

This site has been designed for students of all ages that wish to study Spanish and obtain certification.

• To be able to find out information about the school.
• To be able to contact the school.
• To be able to find its location instantly.
• To be able to sign up.

The design has been inspired by the Love Running project. The code for the footer was borrowed from that project, although different Font Awesome icons have been used. The design of the header has been influenced by that same project.

The aim of the website has been to create a simple website with a pleasing colour scheme, which is appropriate to colours associated with the Spanish language and culture (especially around the Marbella area) and that also contains a high level of functionality.

The Marbella Spanish School is a website consisting of three HTML pages that are all interlinked and consistent in design. The navigation bar menu is fixed at the top and the footer is found at the bottom. At the bottom of every page there is always another link to the following page to encourage users to proceed.

There is also a fourth HTML page which is for the form-dump, that allows users to know that their submission has been successful.

The fonts applied to this website was Bebas Neue as the principal font of the headers and subheadings, and Montserrat for the rest of the smaller font types.

The colour design used for MSS was a blend between Orange, Orangered, White and Goldenrod. This colour design was influenced by my own geometric patterns that I personally practise at home. The colour design is relevant to the theme of the site, which is the Spanish language, as Oranges and Lemons and their associated trees are a well known aspect of Southern Spanish culture. It also holds relevance to the national flag, which is a scheme of Orange and Yellow.

All images have been chosen in accordance with the design, content relevance and colour-scheme of the website. The purpose of the website is to give an air of Mediterranean culture and scholarship, yet simple enough within that content to attract students and maintain their interest.

The Marbella Spanish School has three main HTML pages and a fourth for when the Sign Up page form is filled.

• Nav bar
• Hero-image
• About us
• Getting started
• Recommended links
• Footer

• Nav bar
• Hero-image
• Timetable
• Contact information
• Address
• Map
• Footer

• Nav bar
• Hero-image
• Form
• Submit
• Footer

• Nav bar
• Hero-image
• "Thank you" message
• Footer

• Located at the top of the page, it includes the website logo on the left and the three About, Contact and Sign-Up links on the right.
• The logo is also an anchor link to the About page (first page).
• The links on the right navigate the user to the corresponding About page, Contact page and/or Sign-Up page.
• The navigation bar provides clear information about the website name and its pages.
• The navigation bar position is fixed so that it follows the page up and down, therefore being continuously available.
• The color scheme for the navigation bar is also thematic throughout the website - orange and white, typical Mediterranean colours.
• It is located on every single page in the same location across the website.

• The about section supplies concise information about the history and development of the Spanish language.
• Hero image compliments the colour scheme of the website.
• It supplies information on the similarity between Spanish and English as a whole.
• The section concludes by providing information and a link to the Common European Language Framework.
• It has a sub-section of "Getting Started" to engage users around the subject.
• It also provides tips and brief, engaging lessons for the user.
• The final sub-section, "Recommended Links" provides users links to various sources for Spanish language elementary learning.
• It also features extra links to the contact page or to the sign-up page as continuous user guidance.

• Located at the bottom of the page, it provides links to social media pages: Facebook, Twitter, Instagram and Youtube.
• Anchor elements have been made into icons representing the social media links, each from Font Awesome.
• Like the navigation bar, the footer can be found consistently across all pages across the website.

• The contact page contains contact information and location regarding MSS.
• Hero-image matches the colour design.
• Contains clear sub-heading titles.
• Contains a timetable with the opening and closing hours.
• Contains information on how to directly contact MSS (it may be appropriate to mention that all numbers are fictitious).
• Contains an address (fictitious) to a street in Marbella.
• Contains a map guiding the user to the location.
• Contains link at the bottom of the page to guide the user straight to the sign-up page.

• The sign up page contains the form that is to be filled in order to sign up.
• Hero-image is relevant to the content of the page.
• Contains clear sub-heading titles and description.
• Form is wide, ample and very clear.
• Form colour scheme is consistent to the website.
• Form will not allow itself to be sent unless filled.
• Form must be filled with the appropriate type text and email.
• Submit button changes text colour to goldenrod to indicate that it is responsive to the user.

• Contains a hero-image with a thank you message, in this case in Spanish ("Gracias!").
• Contains below a descriptive thank you message for the user.

• HTML
• CSS3

Testing the functionality and overall appearence of the website has been largely dealt with throughout the creation and development of the website.

Tests have been conducted using Google Chrome, Mozilla Firefox and Safari. Testing the different sizes has been carried out using Google Developer Tools.

The issues that came about were:

1. Deployment of website would not initially work and the deployed link went to a blank, basic READme.

• Solution: Folder and files in the First Project main branch were not orderly. Shifted style.css file out of a CSS folder, moved into the main First Project folder, renamed CSS folder to Assets and moved Images into it. Then renamed first-project.html to index.html.

2. Poor performance on smaller screens. Mostly trouble with navigation bar and the anchor links cropped with the logo as from 768px and below.

• Solution: Used media queries to align the anchor elements below the logo as from 768px downwards.

3. Data form allows users to submit their information, even when an email hasn't been provided.

• Solution: E-mail input type was incorrectly entered as text, has since been changed to email.

4. Poor performance from hero-image on the Contact page.

• Solution: Using media queries for different screen sizes and lower, have adjusted the CSS style so that it can be displayed correctly.
• Solution (2) 28-04-2022: Totally replaced image with a new one, and removed margins on responsive design.

5. Navigation bar on Mozilla Firefox browser was not cropping correctly despite it functioning on Safari and Google Chrome.

• Solution: Removed float from the style.css file for screens 768px or lower.

6. Recommended links on About page begin to crop outside of the website border as screen-size lower.

• Solution: Lower font size and spacing between anchor links.

7. Footer crops outside of website border as screen sizes collapse lower.

• Solution: Changed the font size on the i elements to fix the spacing.

8. Left-side margin on input labels mis-alignment in responsive design.

• Solution: Gone through the responsive design and adjusted margin on label.

9. Resolution size of contact-page hero image taking long to load and too big.

• Solution: First resized image, which fixed issue initially, but decided to totally replace the image with a smaller resolution image.

Ongoing bugs

1. Poor performance and cropping of elements below 320px or lower.

Validator testing

• HTML

  • No errors were returned when passing through the official W3C Validator

• CSS

  • No errors were returned when passing through the official Jigsaw validator

• Lighthouse testing

The development environment used for this project was Gitpod. Regular commits and pushes to Github have been employed to be able to track and trace the development process of the website.

The live version of the project is deployed at GitHub pages.

The procedure for deployment followed the "Creating your site" steps provided in GitHub Docs.

1. Log into Github.
2. Select desired GitHub Repository to be deployed live.
3. Underneath the repository name, click the “Settings” option.
4. In the sub-section list on the left, under “Code and automation”, click “Pages”.
5. Within the ”Source” section choose ”main” as Branch and root as folder and click ”Save”.
6. The page refreshes and a website shall then deploy via a link.

The following is the live link deployed: https://keironchaudhry.github.io/p1-marbella-spanish-school/

The hero-image used on the About page was borrowed from "Natalie / iStock", which was located via aarp.org (https://www.aarp.org/espanol/politica/latinoamerica-mundo/info-2019/trivia-idioma-espanol-castellano.html#quest1).

The chalkboard image used on the About Section is credited to "Tarifa Adventure" (https://www.tarifaadventure.com/activities-in-tarifa/spanish-language-courses/).

And finally the form-dump "Gracias!" is credited to the "Fundacion Hospital General de la Santisima Trinidad" (https://fhgst.es/gracias-por-vuestra-solidaridad/).

All other images were sourced via Pexels.

For inspiration, guidance and inputs, thank you to:

Sandeep Aggarwal

• Great mentor at Code Institute

Jack Crymble

• Friend and guide, thank you for your knowledge and insight!

Jody Murray

• Fellow student and colleague, thank you for your input!

The website outside of Code Institute that has provided me with a lot of guidance are:

https://www.w3schools.com/

https://stackoverflow.com

The project Love Running, which was a guided-practice website provided by Code Institute.

For the responsive screen, http://ami.responsivedesign.is/