The recent rise in conversation surrounding the environmental impact and ethical business practices of the fashion industry has given rise to new terminolgy such as "Fast Fashion" and "Sustainable Fashion" to describe different aspects and practices of the fashion industry.

With that in mind I decided to build this website to help people gain a better understanding of what these terms mean, the effects of Fast Fashion, and how Sustainable Fashion can help to counteract the impact it is having on the planet. Also to build awareness on the subject and to inspire users to make more sustainable choices in a fun and engaging way.

• Define Fast Fashion and give users a better understanding of what it means
• Highlight and raise awareness of the environmental and ethical impact of Fast Fashion
• To promote sustainability in the fashion industry
• To encourage users to think about impact of the choices they make when shopping for fashion
• To encourage users to change the way they shop to lessen the impact on the planet
• To offer tangible alternatives to users

The target demographic of this website includes but is not limited to:

• those with an interest in Fashion
• those who are socially and enviromentally conscious
• those who are interested in learning more about Sustainable Fashion
• those interested in learning more about Fast Fashion
• those who are would like to make more sustainable fashion choices
• those who are looking for ways and ideas on how they can change their shopping habits

Users of this site are searching for:

• Clear and easily accessible information on Fast Fashion
• Clear and easily accessible information on Sustainable Fashion
• Alternative shopping choices to High Street stores/Fast Fashion Brands
• Real world locations they can shop sustainably

This site is best equipped to help them because:

• Easy to navigate
• Aesthetically pleasing
• Visually interesting
• Offers clear and concise information without overloading the user
• Gives them the option to learn more with links to relevant sites

"As a user of this site, I want to easily find relevant information on fast fashion & sustainable fashion"

"As a user of this site, I want information on fast/sustaianble fashion that is not preachy"

"As a user of this site, I want inspiration and ideas on what I can do to make a difference"

"As a user of this site, I want to learn about practical ways I can become more sustainable"

"As a user of this site, I want to know what alternatives there are to high street and fast fashion brands"

"As a user of this site, I would like the option of keeping up to date with relevant information"

"As a user of this site, I would like to find a community of like minded people"

As part of the design process wireframes were created for Desktop, Tablet and Mobile screen sizes using Balsamiq

The navigation bar is fixed to the top of the page with links to each section, so each part of the page can be easily accessed using the navigation links from anywhere on the site.

The Home section features a full browser height background image to capture the users attention and spark further interest in the site. The website title is overlayed on the image with a subject line enticing the reader to explore the site further.

An image to draw the users attention and a paragraph with some of the definition of Fast Fashion and facts about the industry. It also contains a call-to-action button for users who would like to more detailed information on the Fast Fashion industry and the ethical and environmental impact it makes.

A second image and paragraph with an overview of what changes users can make to their own habits to lessen their impact on the environment. Including links to relevant sites and resourses.

An image to draw attention and a paragraph about the benefits of choosing charity shops. Includes links to various charity shops and their locations.

An image to draw attention and a paragraph on the benefits of shopping in vintage shops. Includes links to vintage shops in Dublin.

An image to draw attention and a paragraph extolling the benefits of repairing/upcycling clothes. Includes a link to sewing tutorials for beginners.

Photo gallery to showcase looks created using pieces of clothing bought in vintage/charity shops. The purpose of the gallery is the hightlight the fact that users don't need to buy new clothes to create stylish, unique and on trend looks. Fancybox used to make images popup.

List of events users of the site would have an interest in attending. Option to book places and get more information about the events.

Call to action to sign up to the sites newsletter. Clicking the SignUp button deploys a modal with the required attribute for the email address input.

Links to social media pages.

Contains copyright information.

• Add pages for Projects based in other major cities in Ireland (Galway, Cork, Belfast) initially, with a view to setting up projects for UK & European cities in the long term.

• An interactive gallery that will allow:

  • users to submit their own images of outfits and looks they've created from clothing bought from charity/vintage shops
  • owners to review submissions before they are posted to the site
  • owners to set criteria for submissons - location, suitability, where it was purchased etc.

• A curated directory of sites, articles, blogs and resources users of the site would be interested in.

• Submissions from hosts of relevant events that will be promoted on the site.

• A News section that can be updated easily and regularly by owners.

• HTML & CSS programming languages
• Bootstrap 4 and BootstrapCDN - To simplify the structure and make the website responsive.
• Google Fonts - Oswald & Poppins styles
• Font Awesome - for social media icons
• jQuery - for navbar and modal and fancybox
• Popper.js - for navbar and modal
• fancybox - for pop out Lookbook images
• hover.css - for grow effect on Lookbook images
• Gitpod - IDE for local development
• Github - version control & repository
• Github Pages - for deployment of the website

Other Resources Used

• cdnjs - for hover.css & fancybox libaries
• HTML Formatter - used to format HTML code

Testing was carried out throughout the build process to ensure site was responsive at relevant breakpoints using Chrome Developer Tools.

The below tools were used at various points throughout the build:

• W3C Markup Validation - to validate HTML
• W3C CSS Validation - to vaildate CSS Code
• Unicorn Revealer to identify any overflow issues
• Lighthouse - to test the loading speed of the website

Manual Testing:

Navigation Bar:

• Navigation links tested to ensure they worked and that they linked to the correct part of the page
• Each Link was tested individually at both expanded and collapsed states to ensure they brought the user to the correct part of the website
• Site title in navigation bar, when clicked, will always return user to the Home page.

The Facts - Did you Know?:

• Link for quote source Good on You opens to the correct external site in a new tab
• Call to action Learn More button clicked to ensure it opened the correct external site in a new tab
• Hover over button to ensure color change

So What Can We Do? - Charity Shops - Shop Vintage - Repair & Upcycle:

• Links to external sites & pages tested to ensure they opened the correct external sites and in a new tab

Lookbook:

• Images clicked to ensure fancybox popups opened correctly

Events:

• Book Now and More Info buttons return to Home page. (site is an imagined site and these are sample events booking is not currently available)
• Hover over buttons to ensure color change

Sign Up:

• When Sign Up call to action button clicked modal is triggered
• Tried to submit form without any or valid email address: - Email input in modal has required attribute - Email must have correct format [email protected] - Error messages appear if email is not entered or email is not the correct format
• Social media icons return to Home page (social media pages do not exist for this site)
• Hover over buttons & social media icons to ensure color change

General:

• Ran site on Chrome, Mozilla Firefox, Internet Explorer & Safari.

Testing User Stories:

• "As a user of this site, I want to easily find relevant information on fast fashion & sustainable fashion"

  • This information is available directly below the Home page, in The Facts section and each part of The Facts section has its own link, so it is easily accessible

• "As a user of this site, I want information on fast/sustaianble fashion that is not preachy"

  • The information is presented in an engaging manner
  • Encouraging users to consider alternatives rather than berating or guilting them for being part of the problem
  • The site is not overloaded with facts and statistics but rather an overview with an option for users to learn more if they wish

• "As a user of this site, I want inspiration and ideas on what I can do to make a difference"

  • The So What Can We Do? sections give users an overview of different ways they can makes small changes that make a difference

• "As a user of this site, I want to learn about practical ways I can become more sustainable"

  • The Charity Shops, Shop Vintage & Repair & Upcycle sections give users practical ways to become more sustainable

• "As a user of this site, I want to know what alternatives there are to high street and fast fashion brands"

  • The So What Can We Do?, Charity Shops, Shop Vintage & Repair & Upcycle sections give users real world alternatives to high street and fast fashion brands

• "As a user of this site, I would like the option of keeping up to date with relevant information"

  • The Sign Up section offers the user the option to sign up to the sites newsletter

• "As a user of this site, I would like to find a community of like minded people"

  • The Events section promotes events that would be of interest to people interested in making more sustainable fashion choices and opportunities to meet like minded people in a social setting

The following issues were identified and rectified during the build process.

• Background images not displaying:

  • File path was incorrect

• Collapse icon on navbar not displaying on mobile screen sizes:

  • Although the icon was there and clickable the burger icon was not displaying.
  • Resolved by adding the navbar-dark to the navbar class.

• When navbar dropdown menu was activated and link clicked, the menu didn't collapse up again:

  • Resolved by adding data-toggle="collapse" data-target=".navbar-collapse.show" to each list item

• Cards in the Events section pushing down below background image and overlapping the sections below it on smaller screen sizes:

  • Resolved by removing set height: 100vh on background image

• The Facts section not displaying correctly at tablet screen size:

  • Resolved by changing column width from col-md-6 to col-lg-6

• Images and paragraphs in The Facts section not displaying in the desired order:

  • Resolved by adding Bootstrap order class - order-lg-2 & order-lg-1 to relevant images and paragraphs

• When I ran Lighthouse it indicated that some of the images were increasing the load time of the page.

  • Reduced image file sizes to decrease load time

• On extra large widescreen (≥1500px) the text in the facts section was hugging the top of the

  • Media query added to push down content at that screen size

• Heading in Welcome section not rendering correctly on Internet Explorer:

  • Not yet resolved

To deploy this page to GitHub Pages from its GitHub repository

1. From the menu items near the top of the page, select Settings.
2. Scroll down to the GitHub Pages section.
3. Under Source click the drop-down menu labelled None and select Master Branch
4. On selecting Master Branch the page is automatically refreshed, the website is now deployed.
5. Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.

To clone this project from GitHub:

1. Under the repository name, click "Clone or download".
2. In the Clone with HTTPs section, copy the clone URL for the repository.
3. In your local IDE open Git Bash.
4. Change the current working directory to the location where you want the cloned directory to be made.
5. Type git clone and then paste the URL you copied in Step 3.

git clone https://github.com/aineon/The-Sustainable-Fashion-Project-Dublin.git

6. Press Enter. Your local clone will be created.

Further reading and troubleshooting on cloning a repository from GitHub here.

• In Did You Know? paragraph:

  • Fast Fashion definition taken form Good on You website.
  • Ireland facts paragraph taken from Oxfam Ireland website.
  • Global fast fashion facts taken from 7billion for 7seas website.

• Text in Vintage paragraph:

  • taken from Readers Digest website.

• In Events section:

  • Swap Shop & Sip and Sew ideas taken from Swapsies website.

• All images taken from:
  • Unsplash

I would like to thank everyone on the code institute slack channels.

My mentor Adegbenga Adeye

All images and content on this website is for educational purposes only