Magic Balon Decor is a company that mainly decorates for all kinds of occasions, they also sell all kinds of balloons and decoration. This site targets new but also regular costumers. It provides information about the company, lets the costumers see what the company is capable of and gives the option for the client to fill in a form and schedule the company for decoration. Now all the costumers call the company so the use of this site could help them win time by not being on the phone as much.
- Contains links to the Home, Webshop and the Decoration pages and will be responsive on all devices.
- When the user hovers over "Decoration" on the navbar the links to the Birthday, Engagment, Gender reveal, Grand opening and Wedding pages will be shown. We didn't learn this yet so i used this site to help me make this feature https://www.w3docs.com/snippets/css/how-to-create-a-drop-down-navigation-menu-with-css.html
- The navbar is fixed so that the user doesn't need to scroll up when wanting to go to another page.
- This section will allow the user to easily navigate from page to page across all devices without having to revert back to the previous page via the ‘back’ button.
- This section provides a big image of balloons with a text overlay of "welcome to magic balon decor" to catch the eye of the costumer.
- The about us section has a background of some decoration the company has done for a mall. The picture is to show especially new costumers that the company is creative and some things they are capable of.
- Text overlay over the picture tells again especially new costumers about the company and why you should choose it to decorate a special occasion.
- On the left side of this section you can find the open times and the address of the company.
- On the right side of this section there is a google maps map with the location of the shop with an option to plan a route to the location.
- The footer has on the left side a contact us with a phone icon and fake number. And on the rightside it has an instagram icon that contains a link that takes the user to the instagram of the company in a new tab
- The company only has a instagram no facebook and twitter so i kept it simple
- All the pages have the same lay-out and structure only the content is different.
- This section shows the name of the page your on and 2 pictures of examples with regards to the page the user is on.
- The first picture doesn't have many options and is a more basic version and the second picture has more options. This is also that the user can see a difference and what they would like more.
- This section tells about the pictures above and gives the user some more information.
- The form has a your details section where the user needs to fill in their first and last name, email and phone number. these are required.
- The decoration and options section lets the user choose 3 colors they want and extra options thru checkboxen it also has a textarea if the user want something specific.
- Lastly the form has a date and time the user needs to fill out when they want the decoration. these are also required.
- Just like the other pages in the decoration section This section shows the name of the page your on and 2 pictures of examples with regards to the page the user is on.
- It also gives some information that the user should call the company because with weddings they want to make it as specifik as possible.
- The webshop page for now just says there will be a webshop in the future. The company wants and needs a webshop so i already put it in the navbar.
- When the user fills in the form they are sent to this page. Because of the lack of javascript this was the selution to make it look like the users form is send.
- It informs the user that this is just for show and if they want they should contact the company thru instagram (link in the footer). The user can go back to the homepage thru the button.
- A 404 page will be implemented and will display if a user navigates to a broken link.
- The 404 page will allow the user to easily navigate back to the home page if they direct to a broken link / missing page, without the need of the browsers back button.
- The webshop page
- The form and contact.html page that it actually works and pushes the information
All pages were tested to ensure responsiveness on screen sizes from 320px and upwards.
Steps to test:
- Open browser and navigate to magic balon decor
- Open the developer tools (right click and inspect)
- Set to responsive and decrease width to 320px
- Set the zoom to 50%
- Click and drag the responsive window to maximum width
Expected:
Website is responsive on all screen sizes and no images are pixelated or stretched. No horizontal scroll is present. No elements overlap.
Actual: website behaves as expected except for the decoration-info section in the decoration files. It feels out of place some of the time but on phone, tablet and desktop screens its fine.
Website was also opened on the following devices and no responsive issues were seen:
- Iphone 12
- Ipad air
index page
decoration pages
webshop page
contact page
Wave Accessibility tool was used throughout development and for final testing of the deployed website to check for any aid accessibility testing.
The website has no errors when passing through the official Wave Accessiblility.
issue: The site had color contrast errors.
fix: made the main color darker.
- HTML
- No errors were found when passing through the official W3C validator.
- CSS
- No errors were found when passing through the official (Jigsaw) validator.
| Navigation links | Page to load |
|---|---|
| Home | index.html |
| Birthday | birthday.html |
| Engagment | engagment.html |
| Gender reveal | gender-reveal.html |
| Grand opening | grand-opening.html |
| Wedding | wedding.html |
| Webshop | webshop.html |
The form on all pages is almost the same so testing the form on one page is sufficient.
The form on the birthday page was tested to ensure it functioned as expected when correct data was input and when incorrect data was input. The following test scenarios were covered:
steps to test:
- Navigate to Magic Balon Decor - Birthday page
- Scroll down to the form and input the following data:
- First Name: Obi
- Last Name: Kenobi
- Email: [email protected]
- Number: 0612345687
- Date: 07-12-2022
- Time: 21:00
- Click Make Appointment
- User should be redirected to contact.html confirmation page
Expected:
Form submits with no warnings or errors and user is redirected to contact.html page.
Actual:
Website behaved as expected with no errors or warnings and redirected to contact.html.
steps to test:
- Navigate to Magic Balon Decor - Birthday page
- Scroll down to the form and input the following data:
- First Name: Obi
- Last Name:
- Email: [email protected]
- Number: 0612345687
- Date: 07-12-2022
- Time: 21:00
- Click Make Appointment
- User should be redirected to contact.html confirmation page
Expected:
The form does not submit and an Error is displayed to tell the user that the field is required.
Actual:
Website behaved as expected, error message was displayed and the form did not submit.
Note: If any of the required fields are blank you will get the same result.
steps to test:
- Navigate to Magic Balon Decor - Birthday page
- Scroll down to the form and input the following data:
- First Name: Obi
- Last Name: Kenobi
- Email: obi-one-jedi.com
- Number: 0612345687
- Date: 07-12-2022
- Time: 21:00
- Click Make Appointment
- User should be redirected to contact.html confirmation page
Expected:
The form does not submit and an Error is displayed to tell the user that a valid email (needs an @) is required.
Actual:
Website behaved as expected, error message was displayed and the form did not submit.
Testing was performed on the Font Awesome Instagram icon in the footer to ensure that it opened in a new tab.
Expected:
Opens company instagram page in new tab.
Actual:
Behavior was as expected
Testing was performed on the phone number in the footer.
Expected:
A window is opened asking which device you would like to call from.
Actual:
Behavior was as expected.
Text in birthday page in decoration info div is not positioned well when viewing on phonescreen.
The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the menu on left select 'Pages'
- From the source section drop-down menu, select the Branch: main
- Click 'Save'
- A live link will be displayed in a green banner when published successfully.
The live link can be found here - https://huremovic95.github.io/magic-balon-decor/
The site was created using the Visual Studio code editor and pushed to github to the remote repository ‘tacos-travels’.
The following git commands were used throughout development to push code to the remote repo:
git add - This command was used to add the file(s) to the staging area before they are committed.
git commit -m “commit message” - This command was used to commit changes to the local repository queue ready for the final step.
git push - This command was used to push all committed code to the remote repository on github.
- w3docs
- Code was used to make the navbar especially the dropdown function
- Coders coffeehouse example/walkthrough from Code institute
- Love running walkthrough project
- The icons in the footer were taken from Font Awesome
- The map in the visit our shop section is from google maps timeline.
- The picture of the contact, 404, webshop pages and the hero image in the index page are taken from pexels.com
- The rest of the pictures are taking from the instagram page of the company with the consent of the owners