3D DREAMS 3D printing service

This site will be an ongoing dynamic page, designed to show what i learned in the course and to ofer a 3d printing service

UX

The purpose of the site is to provide a simple, easy to use format for users that want a 3d printed design.

Features

Existing Features

*Home page - Shows location of the page and a small presentation

*Materials -Shows different materials we print and the properties of each one

*Contact -An e-mail form to send a request for contact to me.

Features Left to Implement

• Create - A page to allow the customers design their ideas.

Technologies Used

1. HTML, or Hyper Text Markup Language: Used to construct all the pages of this web site. For further info on this language;
   https://developer.mozilla.org/en-US/docs/Web/HTML

2. CSS, or Cascading Style Sheets: Is used to style various elements on a web page via coloring, fonts, spacing, etc. For further info, see this link; https://www.w3.org/Style/CSS/Overview.en.html

3. Bootstrap: A CSS framework that assists the programmer in creating responsive, mobile first front-end web sites. https://getbootstrap.com/

4. Visual Studio Code: Is a programming code editor created by Microsoft that I used extensively. It allows programmers to create, save and edit their code on their own pc's. https://code.visualstudio.com/

5. SourceTree: A software application that runs on your computer that simplifies saving your programming code from your PC up to an oline respository like Github. You do not have to use a command line interface when using this application. For further info; https://www.sourcetreeapp.com/

6. Gitpod: An online IDE also used for creating & saving code that runs in a browser, it does not have to be installed on your PC. https://www.gitpod.io/

7. Git: A version control system for tracking changes in source code during software development. https://git-scm.com/

8. GitHub: A company that provides hosting for software development version control using Git. It is a subsidiary of Microsoft. https://github.

9. Chrome DevTools: A set of web developer tools built directly into the Google Chrome browser. I used these tools constantly thoughout the development cycle. https://developers.google.com/web/tools/chrome-devtools

10. W3C Markup Validation Service Used to run all html and css code thru a validation process looking for errors; https://validator.w3.org/ https://jigsaw.w3.org/css-validator/validator

Testing

1. http://ami.responsivedesign.is/ has been used to see how the site performs on different Apple devices and their viewports, all pages, links, icons performed as expected on all devices. I also used it to create the AppleDevicesView.png at the top of this Readme.

2. Desktop

   • Google Chrome, Internet Edge & Mozilla Firefox browsers; all pages, links on those pages, and footer icon links perform well on all viewport sizes. Developer tools were also used on all browsers for the various viewport sizes.

3. Mobile

   • Used iPhone6 plus, as well as relative's iPhone X, Android smartphones to test; all pages, links, icons performed well on all devices using various browsers; Safari & Chrome.

Deployment

1. Created a Github account at https://github.com My account url; https://github.com/nax977

2. I uploaded all files to my Github repository located at this url; https://github.com/nax977/Milestone-project which is for this individual project.

3. To publish the project to see it on the web, I then went into the Settings on my respository, scrolled down to the heading, GitHub Pages. Under the Source setting, I used the drop-down menu to select master branch as a publishing source and saved it. Refreshed the github page, and you are then given a url where your page is published; Your site is published at https://github.com/nax977/Milestone-project/

4. To run this code on your local machine, you would go to my respository at https://github.com/nax977/Milestone-project and on the home page on the right hand side just above all the files, you will see a green button that says, "Clone or download", this button will give you options to clone with HTTPS, open in desktop or download as a zip file. To continue with cloning, you would;

• Open Git Bash
• Change the current working directory to the location where you want the cloned directory to be made.
• Type git clone, and then paste this URL; https://github.com/nax977/Milestone-project.git Press Enter. Your local clone will be created.

For more information about the above process; https://help.github.com/en/github/creating-cloning-and-archiving-repositories/cloning-a-repository

Credits

Content

1. HTML & CSS Timeline code directly from; Bootstrap 4.1.1 Snippet by Siddharth Panchal; https://bootsnipp.com/snippets/Q0ppE "Timeline Using CSS" Timeline Demo #11. Used on my Experience page.

2. W3schools.com; for code used on e-mail form on Contact page. https://www.w3schools.com/

3. Google Fonts for font styles; https://fonts.google.com/

Media

1. Adobe Color for choosing a color palette for overall use on entire site; https://color.adobe.com/create#

2. Colorspace for my final color palette; https://mycolor.space/

3. I used the logo from the forbes magazine link:https://www.forbes.com/sites/anthonykarcz/2019/12/25/5-essential-3d-printing-tips-for-beginners/#c342a715867a

4. Am I Responsive web site for checking responsiveness on all Apple devices screen sizes; http://ami.responsivedesign.is/

Acknowledgements

1. Code Institute Tutors; Anna for her many helpful posts and info on Slack for using Bootstrap, Milestone projects, etc. Stephen and Haley also. Richard Wells-lead on Slack's User-Centric Channel for his informative Slack calls on creating Milestone 1 projects.

2. Code Institute's Slack Channels and the many alunni,mentors, tutors and users who contribute to them; the many pinned announcements, pdf files, etc. were of great help. https://app.slack.com/client/T0L30B202/C0L316Z96

3. Mentor Adegbenga Adeye for site architecture inspiration, programming help and great advice.