Giter Club home page Giter Club logo

steveforrest-portfolio-project-1_sepresub's Introduction

Epic painted model

Contents

  • Reasons for this project
  • UX
  • User stories
  • Logo
  • Future builds
  • Build status
  • Deployment
  • Wire frame
  • Languages
  • Libraries and other technologies
  • Testing
  • Bugs
  • Citations

Reason for this project

This site will be used to help pepromote demonstrating minatures people have painted and allow commisions to be arranged or just to show case their work.

UX

This site is designed to advertise a store where people are able to visit in order to request painting commisions done for there models, they will also be able to purchase advertised projects.

Logo

Responsive display of the site

Future builds

The site will be intended to facilitate sales, bids on already painted models and a funtion to allow commissions to be made with more ease, eg. Allow people to select amount of models quality of painting when the commision should be achieved by and allow the person fulfilling the commission to quote accordingly.

Depending on how many users it may be feasable to allow a function to allow people to search through different commissioners

Site responsiveness

Responsive display of the site

Features

Gallery Gallery page is created in a mosaic grid form

Buttons

Buttons are used to allow you to navigate to different parts of the site

Navbar A navbar is utilised to aid website navigation

Deployment

This project was developed using Gitpod IDE and pushed to Github using the in-built terminal. This project was deployed from the Github Respository to GitHub Pages using the following steps:

Log into Github.

  • Select the https://github.com/steveforrest/portfolio-project-1 respository.
  • Click the settings tab.
  • Scroll to the GitHub Pages section of the page.
  • Under the source heading select the master branch option.
  • Click save.
  • The project has now been deployed. Scroll back to the GitHub pages section and click on the link above the source heading to view the live site.

Making a clone to run locally

  • Log into GitHub.
  • Select the repository.
  • Click the Code dropdown button next to the green Gitpod button.
  • Download ZIP file and unpackage locally and open with IDE. Alternatively copy the URL in the HTTPS box.
  • Open the alternative editor and terminal window.
  • Type 'git clone' and paste the copied URL.
  • Press Enter. A local clone will be created.

Wireframe

Landing Page wireframe

Home page wireframe where you will first come to when searching for the site

Home page wireframe where you will first come to when searching for the site

Gallery page Wireframe

Gallery page wireframe where you will See all images that are able to be bought clicking on the image will take to a new tab where the image is larger or on the name to a new tab where you can message the seller

Gallery page wireframe where you will See all images that are able to be bought clicking on the image will take to a new tab where the image is larger or on the name to a new tab where you can message the seller

Enquiry form Wireframe

contact form page wireframe where you will be able to enter details in with an enquiry so that the seller can respond

contact form page wireframe where you will be able to enter details in with an enquiry so that the seller can respond

Who we are contact form Wireframe

Who we are is a page where you will be able to find out some details about the physicalk place with details like location and a map

Who we are is a page where you will be able to find out some details about the physicalk place with details like location and a map

Languages

Libraries and Other programmes / sites

Testing

HTML passed validation

HTML passed validation

First CSS failed validation

CSS failed validation

But this was corrected and it passed

CSS passed validation

  • Responsiveness was tested in dev tools on google chrome, microsoft edge, mozilla and firefox. The site was also tested live on iphoneX safari, amazon kindle fire10 and widows desktop.
  • Testing was conducted by
    1. Using dev tools responsiveness was tested by reducing the horizontal screen size
    2. the device setting was selected and then the orientation was changed
    3. All navigational links were checked by clicking on them
    4. buttons were selected to see if you were taken to the correct place
    5. forms were filled out to see if each required field worked as intended and if you were taken to the dump page.

Bugs

Home page sections

On the home page the first section would not perform as intened taking into account the justify content parameter of the class attached. I used unauthordox code in order to get the lower section to act as intended and used

  • to group the actual list which was nested inside the parent nest in order to get the image to sit next to the nested lists correctly.

    Gallery images

    The images should line up so images in land scape or portrait are next to each other. I considered using Grid for this but was unable to learn and impliment it due to time constraints.

    Citations

    Spikeybits.com taken for contact for back ground image

  • steveforrest-portfolio-project-1_sepresub's People

    Contributors

    steveforrest avatar

    Watchers

     avatar

    Recommend Projects

    • React photo React

      A declarative, efficient, and flexible JavaScript library for building user interfaces.

    • Vue.js photo Vue.js

      ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

    • Typescript photo Typescript

      TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

    • TensorFlow photo TensorFlow

      An Open Source Machine Learning Framework for Everyone

    • Django photo Django

      The Web framework for perfectionists with deadlines.

    • D3 photo D3

      Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

    Recommend Topics

    • javascript

      JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

    • web

      Some thing interesting about web. New door for the world.

    • server

      A server is a program made to process requests and deliver data to clients.

    • Machine learning

      Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

    • Game

      Some thing interesting about game, make everyone happy.

    Recommend Org

    • Facebook photo Facebook

      We are working to build community through open source technology. NB: members must have two-factor auth.

    • Microsoft photo Microsoft

      Open source projects and samples from Microsoft.

    • Google photo Google

      Google โค๏ธ Open Source for everyone.

    • D3 photo D3

      Data-Driven Documents codes.