This was created to demonstrate learnings from the Code Institute software development course and marks the first of four milestone projects to be created. It is to showcase html, css and ux by way of a static front end website.
The3DPrintQ website is a fully responsive website designed to introduce hobbyists to 3D printing. It explains what 3D printing is and directs users to common ‘builds’ so that they can build their own!
For the site owner, it’s purpose is to capture email addresses so as to promote paid content and affiliate links.
A live version of the site can be viewed here.
- As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.
- As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
- As a First Time Visitor, I want to access the site across a range of devices.
- As a Returning Visitor, I want to find additional relevant information.
- As a Returning Visitor, I want to get in contact with the site owner with questions.
- As a Returning Visitor, I want to locate their social media links to stay up to date with content.
- As a Frequent User, I want to check to see if there are any newly added podcasts or videos.
- As a Frequent User, I want to check to see if there are any new blog posts.
- As a Frequent User, I want to sign up to the Newsletter so that I am emailed any major updates and/or changes to the website or organisation.
The site uses the following 5 colours primarily.
- Green - rgb(53,206,141) #35CE8D
- Blue - rgb(2,142,175) #028EAF
- White - rgb(255,255,255) #FFFFFF
- Grey - rgb (76,76,71) #4C4C47
- Orange - rgb(255,120,90) #FF785A
- The Roboto font is used on navigational and header elements throughout the site with sans serif as a fall back in case of errors in loading the font. Roboto is a clean and stylish popular choice as Androids default font and so fits the target market of those that are more ‘tech’ orientated.
- Source Sans Pro is used for all content elements as it is intended for user interface elements and so is a fitting nod to user input screens on 3D printers.
The hero image was chosen to show the wide range of things of which an be 3D printed. With it’s vicarious colours it was used so as to be eye catching and as it fit the color scheme of the site.
As branding is alway important, the brand logo is used within the header and the footer.
The header is sticky and so keeps the branding in sight at all times.
Full Wireframes drawn up using Figma can be found here
- The home page features a slick animation when viewed on a desktop. It also has a minor animation on mobile.
- The footer is partially visible as you scroll to the bottom and fully reveals itself once the bottom of the page is reached.
-
The site is designed to be responsive across all devices.
-
The home page uses a carousel feature for the 3 build guides. Their runs and cycles through each option automatically, denotes which one is in view and also allows the user to navigate back and forth. The carousel is also responsive and so works on mobile and tablets.
-
All YouTube videos are embedded and can be play/paused by the user. As with all podcasts.
-
Sign-up opens the sign-up modal.
-
Custom 404 page should the user navigate to a non-existant link which will automatically be redirected to home.
This can be tested here
-
All navigation links feature an underline from center animation. (Credit: hover.css)
-
Footer icons for address and email feature animations. (Credit: hover.css)
- Html5 and semantic markup is the primary language used for the creation of this website.
- CSS is used for styling various elements throughout the site.
- Whilst not directly written. Javascript/Query is used by Bootstrap for the modals and carousel.
- Bootstrap was used throughout the project for it’s responsiveness of the website and styling of the nav bar.
- Hover.css was used on the build images on the build.html page to add X transition when being hovered over.
- Google fonts were used for the importing of the ‘Roboto’ and ’Source Sans Pro’ fonts to the style.css page which is used throughout the entirety of the site.
- Font Awesome is used on all pages throughout the site to create the social media and share icons.
- favIcon was used to create the site favicon by the importing of the image used in the Q of the logo.
freephototool.com was used to create the ‘3DPrintQ’ logo and it’s negatives.
- Balsamiq desktop was used to create initial wireframes of the site.
- Figma was used to create more detailed wirframing.
- Coloors was used to assist with choosing the colour scheme that is used throughout the website. Colours was given a baseline of the Blue and Grey colours which were already present in the logo and navbar.
- jQuery came with Bootstrap to make the navbar responsive but was also used for modals.
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub is used to store the projects code after being pushed from Git.
- Gitpod was used as the primary IDE for development of the site.
- Lighthouse, a Google Web Dev tool, was used extensively for testing performance, accessability, best practices and SEO of the site in it's entirety.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
- The site has a clear 'About' section which provides insight to it's purpose and infrmation that users are looking for.
- The site has a clear well thought out structure that is familiar to the user and the site itself guides you to each section. All navigation links were also extensively tested to ensure continuity.
- The site is fully responsive across Desktops, tablets and mobile devices and was tested using Chrome Developer tools on Ipad, Ipad Pro, Iphone 6,7,8 X, Xiaomi F2, Xiamoi F1, Mac pro, MacBook and Safari.
- There is additional information to external resources by way of podcasts and videos. These do not auto play and can be played by the user across all devices and all work correctly.
- There is a specific 'Contact Us' section located in the footer as well as an email address also. Clicking the email address will open up a users email client and the contact us form has been tested extensively and returns a confirmation page that the form was submiited successfully.
- All social media links are housed within the footer and have all been tested.
- User's are prompted a number of times to sign-up to the Newsletter which will keep them up to date with podcasts and videos, blog posts, articles and any other relevant information. The Newsletter modal has been tested extensively and returns a confirmation page that the form was submiited successfully.
Lighthouse, a Google Chrome web developement tool, was used extensively on the site in it's entirety. Every individual page was tested for desktop and mobile and received a score of in excess of 90+ across Performance, Accessability, Best Practices and SEO.
A copy of the Lighthouse report for each individual page can be found below:
- Index - Lighthouse Desktop Result | Lighthouse Mobile Result
- Builds - Lighthouse Desktop Result | Lighthouse Mobile Result
- Podcasts & videos - Lighthouse Desktop Result | Lighthouse Mobile Result
- Articles - Lighthouse Desktop Result | Lighthouse Mobile Result
- Articles Page 2 - Lighthouse Desktop Result | Lighthouse Mobile Result
- Glossary - Lighthouse Desktop Result | Lighthouse Mobile Result
- 404 - Lighthouse Desktop Result | Lighthouse Mobile Result
- No known bugs.
- Navigate to the GitHub Repository:3DPrintQ
- Click the 'Settings' Tab.
- Scroll Down to the Git Hub Pages Heading.
- Select 'Master Branch' as the source.
- Click the Save button.
- Click on the link to go to the live deployed page.
- Navigate to the GitHub Repository: 3DPrintQ
- Click the Code drop down menu.
- Either Download the ZIP file, unpackage locally and open with IDE (This route ends here) OR Copy Git URL from the dialogue box.
- Open your developement editor of choice and open a terminal window in a directory of your choice.
- Use the 'git clone' command in terminal followed by the copied git URL.
- A clone of the project will be created locally on your machine.
We welcome all contributions. To do so:
- Fork the Repo.
- Log in to GitHub and locate the Respository.
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Create a new branch.
- Make your changes and ensure adequate testing with supporting documents.
- Adhere accordingly to the existing style.
- Commit often with clear commit messages.
- Push to the branch.
- Create a pull request.
Should you find a bug and want to help us squash it. Please open an issue here ensuring you add the 'bug' label with clear detail under the following:
- What you done?
- Where you done it?
- What you expected to happen?
- What actually happened?
To request a new feature or function then please open an issue here ensuring you add the 'enhancement' label with proposed changes including snippets of how to do so.
- Bootstrap4: Bootstrap Library used throughout the project mainly to make site responsive using the Bootstrap Grid System.
- CSS Styling code and corresponding classes/id’s was that of the developer Jay Bradley.
- Process to creating slideout footer was taken from this CSS Tricks Article.
- Inversion of carousel arrow colours css code from this stackoverflow Article.
- Majority of the about content was written by the developer Jay Bradley. As referenced, some is from wikipedia.
- All article content in the resources section is copied from, with permission, Prusa Research.
- Build guides are used with permission from Prusa research, Caribou3D and Grégoire Saunier.
- The hero image was taken from Google Images
- Various other images are taken from, with permission:
- Prusa Research, Caribou 3D and Grégoire Saunier.
- The embedded YouTube content is used with permission from Chris Warkocki.
- My Mentor, Seun for her great feedback and continously pushing me.
- Prusa Research for allowing me to use their images and content.
- Caribou 3D for allowing me to use their images and content.
- Grégoire Saunier for allowing me to use images.
- Chris Warcocki for allowing me to embed his content.