Giter VIP home page Giter VIP logo

heathertatum's Introduction

Milestone Project for Code Institute Full Stack Development course:

An Artist's Website for Heather Tatum

To view the demo click here

Motivation behind the project

This website is to showcase the work of Heather Tatum, an artist (and also my mother!), and to let the reader get to know the person behind the work. Although she has a social media presence on Facebook, Instagram, Pinterest and Etsy, she did not have a website dedicated to her and her work, so this site was created to fill that gap.

Layout of the site and UX

Landing Page

On the landing page, there is a short introduction piece and a portrait of the artist. Then in the centre of the page, her most recently listed pieces and three best sellers are displayed, with links to their individual pages on her Etsy site. Next to these are some testimonials from previous customers.

Header, Footer, and Navigation Bar (featured on all pages for continuity)

The header contains the artists name in bold lettering, linking back to the homepage, and has her art featured on either side to form an eyecatching banner. Underneath this is a navigation bar with links to: HOME, ABOUT, MEDIA, SHOP and CONTACT pages. All links are to pages within the site, with the exception of the shop link, which takes the user to the artist's Etsy shop in a new tab. In the footer there are icons linking to the artist's Facebook, Instagram, Etsy and Pinterest pages. Then the copyright is included.

About Page

The ABOUT page features a timeline of Heather's time as an artist, then a biography with photos.

Media Page

The MEDIA page has a Pinterest widget showing the artist's activity, then a video embedded from Youtube giving a demonstration of her painting. Underneath the video is a Spotify player with Vivaldi, an artist Heather enjoys listening to while she works. Finally on this page is a widget from Instagram, featuring photos displaying Heather's art and life.

Contact Page

The CONTACT page has a form for the user to contact Heather directly, for commissions or collaboration requests, or any other inquiries.

Coding languages and libraries used within this project:

For this website I used HTML5, CSS3, and Bootstrap 4.2.1 (including some JavaScript elements).

Bibliography / Websites I used:

  • courses.codeinstitute.net
    • The website where I access my Full Stack Development course.
  • console.aws.amazon.com/cloud9
    • The development environment which I use to write my code.
  • getbootstrap.com/docs/4.2/getting-started/introduction
    • I used Bootstrap for various front-end components.
  • fontawesome.com
    • For the social media icons.
  • responsinator.com
    • To test the responsiveness of my code on different devices.
  • w3schools.com
    • A good source of reference for various elements.
  • fonts.google.com
    • Used for the heading font and the body font.
  • developers.pinterest.com/tools/widget-builder
    • Used to create the Pinterest widget on the MEDIA page.
  • YouTube.com
    • Used to host the demonstration video on the MEDIA page, and also the code to embed it.
  • developer.spotify.com/documentation/widgets
    • Used to create the spotify player on the MEDIA page.
  • validator.w3.org/
    • Used to validate my code and ensure it was free of errors.

    Testing

    My site was tested using:

  • Chrome developer tools
  • responsinator.com
  • validator.w3.org/
  • jigsaw.w3.org/css-validator

    • I wrote this website's code and did the majority of the testing on a Apple Mac (1920px x 1080px). I also viewed and tested it on my iPhone 8 (750px x 1334px).

    Acknowledgements

    I would like to thank Heather Tatum for her support in this project and proving content for the site. I would also like to thank my mentor, Anto Rodriguez, for his help and advice throughout my work on this project.

    heathertatum's People

    Contributors

    oliviatatum avatar

    Watchers

    James Cloos 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.