Milestone Project 1.
DragonFly is a space travel website that allows users to book trips, destinations, to Moons and/or Planets. With only a few clicks, and a small section to obtain more infomations about said Moon and/or Planets.
The website design is responsive so it can be used on any device.
This website uses technologies that I have learned including HTML, CSS.
Click me for DragonFly live link.
Click me for the project repository.
- User Experience
- Design
- Wireframes
- Features
- Technologies used
- Deployment
- Testing
- Future Features
- Credits
-
As a user, I want the landing page of the website to explain the purpose of the website, as well as being able, to go where, access the next steps, as simple and quick as possible.
-
As a user I want to be able to navigate the site easily to find information I may require.
-
As a user, I want the website to work and be accesible on any device.
-
As a Owner, I want it to be as easy and fast as possible for users to choose their destinations, as well as getting the necessary information regarding their choices.
-
To allow the users to to be able to contact the DragonFly either for questions or with recommendations.
-
I want the website to function and look good on any device.
- The website design is, colorful, inviting and easy to use. The name ‘DragonFly’ refers to the, delicated, colorful, fast flying insect that served as inspiration.
- The website uses a palette of colours taken from the logo image. The colour palette was created using the Coolors website. It uses a simple colour scheme of wisteria, columbia-blue and magenta with pops of dark-blue and red.
Google Fonts was used for the following fonts:
- Bruno Ace Sc : was used for the logo at the navbar.
- Ubuntu: was used for the headings
- Oswald: was used for the paragraphs, small texts and spans.
- Sans-serif: used as the fallback font.
Wireframes were created for the main pages.
- I have used icons from Font Awesome on the navbar, about us, and destinations to enhance the text, get more attention.
-
The nav bar contains the logo, home button, about us, destinations and a sign up button.
-
The logo links back to the home page.
-
The nav bar turns into a slide-out menu on smaller screen sizes
Hero carousel shows informative text about the pourpose of the site, and it's different pages, it also has buttons that allow the user to quickly find what it's looking for.
Users comentary, of what they feel thought of the experience with DragonFly.
Pictures to help attract possible new users, what others have been experiencing, memories we help them create.
Small part of the page that allows the user to subscribe, in order to receive updates regarding more available destinations.
The footer's the same for all the pages and includes the website’s name and a brief description.
It also features icons with links out to social media. These windows open in a new tab.
This page provides curiosity information regarding the Website, how it came to be, it's history and mission.
Contact us section that allow the user to leave a comment, ask some questions, or even make a special visit.
The card section on the Moons and Planet page, contains six cards that has a hover animation, rotating 180deg showing some descriptive text about it's moon.
The cards have two buttons that allow the user, either to be able to book a destination, that provides some extra information.
Some possibe new curiosity about the Moon/Planet, that may help increase the want to visit on the user.
I don't know if it can be considered a bug but since I separeted the images collums, porportionaly, at extra large screen (+1400px) col-xxl-5
and used the code : 
the display flex, and the flex wrap should wrap it, keep it contained inside it's container, and since both side of the images have the same size and height and the same collum size, i couldn't figure it ou as to why one side it's smaller then the other.
-
- Front-end library with HTML and CSS. I used features including Nav bar, Cards, Buttons, Forms, Grid, Modal.
-
- Two fonts are imported from google fonts.
-
- I used icons from font awesome on buttons.
-
- Git was used as a version control in the terminal.
-
- Github was used to create and store the project repository.
-
- Gitpod was used to create my files and where I wrote the code.
-
- Google Chrome's Dev Tools were used while building the project to test responsiveness and for debugging.
-
- To show the website image on a range of devices.
-
- Figma was used to help create the inicial idea for the project.
-
- Image Resizer was used to resize the images, as well as change it's format.
-
- TinyPNG was used to compress images, making it smaller to help with loading speed.
-
- Coolors was used to help generate the color palettes used on the project.
-
- Google Images, used to obtain images used.
-
- Pexels was used to obtain images used on the project.
-
- Unsplash was used to obtain some images used on the project.
-
- AllEars was used to obtain some images used on the project.
-
- Microsoft Bing was used to obtain some images used on the project.
Github Pages was used to deploy the live website. The instructions to achieve this are below:
- Log in (or sign up) to Github.
- Find the repository for this project, DragonFly Repository.
- Click on the Settings link.
- Click on the Pages link in the left hand side navigation bar.
- In the Source section, choose main from the drop down select branch menu. Select docs/ from the drop down select folder menu.
- Click Save. The live website site is now deployed at the URL showned at the top by Github pages.
Forks are used to propose changes to someone else's project or to use someone else's project as a starting point for your own idea. By forking the GitHub Repository you make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository. To fork the DragonFly repository:
- Log in (or sign up) to Github.
- Go to the repository for this project, DragonFly Repository.
- Click the Fork button in the top right corner.
- You should now have a copy of the original repository in your GitHub account.
To clone the DragonFly repository:
- Log in (or sign up) to GitHub.
- Go to the repository for this project, DragonFly Repository.
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
The W3C validator was used to validate the HTML on all pages of the website. It was also used to validate CSS in the style.css file.
- The main issues found while teste on the W3C Validator, were mainly the repetition of "id's", that I had forgotten it can be only one(i forgot to screen shot).
- One other issue I encounter was the iframe on the Moon and Planets page, as i had copied it from nasa as it is - (<iframe <iframe src='https://solarsystem.nasa.gov/gltf_embed/2388' width='100%' height='450px' frameborder='0'>) - I couldn't figure out what the issue was, the after a couple of searches learned(' = "), From that ended up being only: (iframe src=https://solarsystem.nasa.gov/gltf_embed/2381>), those were the main issues I encountered.
I used Lighthouse within the Developer Tools to allow me to test the performance, accessibility, best practices and SEO of the website.
Scored well in all areas on mobile except for performance. Lighthouse suggested saving images in next gen formats and eliminating unused Javascript. As well as for a better properly sized imgs and some "render-blocking resources". (Changed the images format to webp, which helped, but I didn't have time for a more in dept look at the render-blocking resources, but something to keep an eye on for next time).
- Edge
- Chrome
- Opera
- Firefox
- For some reason the performance was extreamlly low on Firefox, but I couldn't understand any of the issues, as seen here, maybe it's the browser?
To fully test my website I performed the following testing using a number of browsers (Chrome, Edge, Firefox, Opera), and on numbered of devices from 320px to 1400px, to test it's responsiveness.
Links :
- Tested each link, worked as expected, and any links leading to external pages opened correctly in a seperate browser tab.
Buttons :
-
Tested each button, worked as expected, the button the link internaly are working, as expected, as well as the buttons that link to separate pages.
-
The submit buttons take effect only after the user fill in the necessary fields, working as expected.
- It wasn't important for now, but I'll be implementing a into animation to the site, before any page loading.
- A user, account, profile picture, where they can get news/feeds, activities and challenges that would possibly allow them to get free trips.
- Didn't know how to do it, but mostly run out of time and weren't comfortable implementing, but the ideia, is to reduce the lenght of the destinations page, leave simply the cards and upon clicking on any of them, then the extra information would appear, i saw something similar on a site once, but was long ago, and didn't know how to implement it.
- I want to expand to destinations to other worlds, as a fictional website that it is. World with different types of lives, intelligent and not.
- I want to provide more information, regarding how the deslocation happens, the ships(vehicles) work, what type of accomodation do they provide during the journey, where to they stay, and for how long.
- Inprove the site images, I did searched a lot for images, as space related images are hard to find, theres, a lot, but mostly of the same.
Some text, on the Moons and Planets page were taken from Nasa
-
Icons - Fontawesome
-
Background Image - Microsoft Bing
-
Logo - Pinclipart
-
Subscribe background image - Microsoft Bing
-
Thank You Img-2 - Microsoft Bing
-
Thank You Img-1 - Microsoft Bing
Hero-Carousel
- Hero Carousel #1 - Unsplash
- Hero Carousel #2 - Unsplash
- Hero Carousel #3 - AllEars
- Hero Carousel #4 - Microsoft Bing
Quotes-Carousel
- Quotes Carousel #1 - Pexel Images
- Quotes Carousel #2 - Pexel Images
- Quotes Carousel #3 - Pexel Images
- Quotes Carousel #4 - Pexel Images
- Quotes Carousel #5 - Pexel Images
- Quotes Carousel #6 - Pexel Images
Memories
Left
- Quotes Memories-Left #1 - Pexel Images
- Quotes Memories-Left #2 -Pexel Images
- Quotes Memories-Left #3 - Pexel Images
- Quotes Memories-Left #4 - Pexel Images
- Quotes Memories-Left #5 - Pexel Images
- Quotes Memories-Left #6 - Pexel Images
- Quotes Memories-Left #7 - Pexel Images
Right
- Quotes Memories-Right #1 - Pexel Images
- Quotes Memories-Right #2 - Pexel Images
- Quotes Memories-Right #3 - Pexel Images
- Quotes Memories-Right #4 - Pexel Images
- Quotes Memories-Right #5 - Pexel Images
- Quotes Memories-Right #6 - Pexel Images
- Quotes Memories-Right #7 - Pexel Images
Moons
- The Moon - Microsoft Bing
- Io - Microsoft Bing
- Europa - Solar System Scope
- Callisto - The Planets
- Titan - Solar Sytem Scope
- Lapetus - Microsoft bing
Planets
- Mercury - Nasa
- Venus - Microsoft Bing
- Mars - Nasa
- Jupiter - Nasa
- Card Saturn - Nasa
- Info Saturn - Microsoft Bing
- Neptune - Nasa
Iframes
-
Moons
-
Planets
Code Institute: I referred to lessons and source code from Code Institute's Web Application Development course. I sourced the, Bootstrapping Your Next Big Idea With Bootstrap 4 for the modal.
-
Bootstrap I used this library throughout the project. Particularly for the NavBar, buttons, grids and modals.
-
Love Running, for the hero-image idea, along with the animation.
-
CV(Resume) from the Walk Through Projects, as inpiration for the history timeline.
-
W3Schools I referred to guides on CSS Images, CSS Card Flip, and Scroll to Top Button, for the buttons on both moon and planets page that only appears if scrolled more than 20px down.
-
BOTB used code for the arrow animation on the home page carousel button as well as, on destinations cards.
Please note this is a personal project. This website is purely for the sake of the developer's portfolio and not for public consumption.
Thank You, for getting this far!
Esmael Pinho 2023