The idea behind this project was to give Gaudi lovers a chance to view as much architecture in one day as they can when having the opportunity of being in the beautiful Barcelona. I personally have never been to Barcelona but I would love to get the oppertunity to go one day to see Gaudi's work.
This Single Page Application has some information on the architecture and Gaudi for people who arrive on the page non the wiser of him or what he is known for.
Click here to view the live page.
The end user of this project is for people who have a keen interest in Art and Architecture. The users would range from any age. It will be used mainly on mobile and tablet devices going by the technology used in this day and age, but can also be accessible through desktop comfortably.
The end user wants to see information on Antoni Gaudi himself and his work.
The benefit of the project is to show off the Gaudi building's in an inviting way with bright colours and a user-friendly style just like some of the mosaic on his buildings.
Other features that are to note is the user can get in touch easily by navigation to the social links.
-
As a user I want to find out more about Antoni Gaudi
-
As a user I want to find this information easily without many clicks
-
As a user I want to know more about the architecture
-
As a user I want to get in touch with you easily
-
As a user I want to be able to find your contact details and social links easily
-
As a user I want to view this information on my mobile device or tablet or desktop if needs must
-
As a user I want to view this information with ease
The Landing Page: Is a landing page for the user when they first come on to the page. This will catch their eye with a colourful mosaic background with bold text of the page name.
About: This section covers a little bit about Antoni Gaudi and a link to his Wikipedia webpage if the user wishes to find out more about him.
Gallery: This section shows 3 clickable images that when clicked will take them to the chosen image with information on what to do in that part of the day.
Contact: Is a section to ask for more information on how it works, speak to us or how to book the day.
-
Nav bar that is easily used and accessible
-
Contact section to speak with us
-
Smooth scrolling which is better UX
-
Amazing colourful images
-
Accurate information on Antonio Gaudi himself
-
Proper footer to give more contactable information
-
Booking Section with dates and times
-
Possible change to a multipage website with more days and activities added
-
More links for places to eat etc
-
Map of where the hot attractions are and how to get to them
-
Reviews on the days themselves
The theme of this project is called Gaudi In a Day. It will be based on his architecture.
Fonts: I have chose Nato Sans, I have chose this font as it is simple and easy to read from.
Colours: Colours I am going with chosen colours from the mosaic in the landing pages which will range from oranges, reds and blues. They stand out nicely with the white that the rest of the site will be. The orange I picked is Spanish Orange.
Images: Will be selected carefully of 3 buildings from Antonio Gaudi’s collection and most well known work.
Below are a list of the programming languages, technologies and frameworks used for this website:
- HTML
- CSS
- Bootstrap
- Google Fonts
- JQuery
- Git
- Github
- Gitpod
- Balsamiq
- Boostnote
- Font Awesome
- Google Chrome Developer Tools
HTML was put through the W3C Validator tool and resulted in 0 errors found.
CSS was also put through W3C and resulted in 0 errors found.
- Ipad (768 x 1024)
- Iphone 6 plus
- Iphone 7 plus
- Iphone 8 plus
- MacBook Air
- Lenovo Idea Pad (Windows 10)
Test: Testing on mobile screens to ensure layout was as how it should be.
Implementation: Having to remove the VH of 100 as this moved it's contence down which resulted in a cluster of content which looked very messy and was unreadable.
Result: Removed all VH and added padding instead to ensure layout is now fixed. All 3 images click correctly and link down to image an information
Test: Tested use of filling out contact form and modal.
Implementation: Filled in form and checked button worked.
Result: Form won't submit due to running out of time to test it as a submitting button without interfering with my modal. Modal works correctly on all screens.
Images with the paragraph of information, I played around with order and d-flex how ever it did interfere with the desktop version and layout which I didn't have time to play about with much as I only discovered it.
Manual testing was also conducted to ensure the user story objectives were achieved.
Bug: At the beginning of this project I knew what I wanted it to look like, I unfortunately focused on Desktop screen more that Mobile this meant that the 3 card images that are click-able with the 3 buildings were supposed to grow in size I later found out that when being selected they were moving the titles of the images and the about section with Gaudi.
Fix: To fix this I removed the growth as it didn't work well with tablet or mobile and applied an opacity blur to the images which looks a lot better.
Result: Images can now be clicked, No movement of the titles.
Bug:I also came to learn the smooth scrolling behaviour I had implemented for a smooth transaction between the navigation bar and the images wasn't working on most browsers.
Fix: Would be to find a more better option.
Result: I have kept it for better UX when on tablets/mobiles.
Bug: The Contact Form form when you submit it it doesn't actually submit the information collected.
Fix: Fix for this would be to turn the button into a submit button but without it interfering with the modal.
Result: Unfortunately I ran out of time before this could get resolved.
The website was created using Gitpod. Git was used for version control and pushed to a repository hosted on Github. The website is deployed using Github pages Gaudi-In-a-Day. How it was done is listed be below:
- Visit GitHub in the browser.
- Logged in
- Selected my repositories
- Navigated to Taitdanielle/Gaudi-In-a-Day
- In the top navigation clicked settings
- Scrolled down to the GitHub Pages area
- Selected Master Branch from the 'Source' dropdown menu.
- Clicked to confirm my selection.
- Gaudi-In-a-Day is now live on GitHub Pages.
How to deploy the code locally? If you wish to run this code locally then please follow the instructions below.
- Download the code from the Github repository at Gaudi-In-a-Day
- Click on Clone or Download button then select Download ZIP (this will download the code into a ZIP folder locally on your computer)
- Uncompress the ZIP folder and select open
OR
- Navigate to Taitdanielle/Gaudi-In-a-Day
- Click the Clone or Download button
- Copy the url in the dropdown box.
- Using your choice of IDE open up your preferred terminal.
- Navigate to your desired file location.
- Copy the following code and input it into your terminal to clone Gaudi-In-a-Day
- The photos used for this project were obtained from Wikipedia, I have used the images that are selected for non commercial use along with google Images.
- Some images for this web site are being used under free commercial license from AdobeStock
- My mentor Simen Daehlin (legend)
- Everyone at Slack and Student Care
- My love for architecture
- Anna Greaves for her awesome Bootstrap break down
This project was made for educational purposes only