Second Hand Thrift Website

Technical details

Tech stack used:

• HTML5
• CSS3
• JavaScript (ES6+)

Why I used this stack:

As this was part of our Introduction to Web Development course, we were expected to use plain HTML, then add CSS, then finish with JavaScript functionality in order to showcase we understood what was being taught.

Requirements

• Home, About, Our Work/Events, Gallery, Get Involved/Bookings, Contact pages
• Lightbox
• Form
• Table
• Link to newsletter
• Other elements often found in websites (links, images, buttons, navigation, copy)

Process

1. I first designed the mockup in Figma, both the desktop and mobile versions
2. Made use of HTML5 to implement the 6 pages and their content (headings, copy, images, links and forms)
3. Added styling and responsiveness with CSS3
4. Implemented a Lightbox and Draggable slider through Javascript

End result

• 99% for the module! I lost marks in Part 1 due to forgetting to add captions for my gallery images, though. 🤕 I added them when submitting Part 2.
• I was approached by the owner of Second Hand Thrift to push the website into production. I respectfully declined due to (in my opinion) the site needing more work towards becoming an official release.

What I learned

To put it simply, everything. I went from scratching the surface of front-end development by writing a static and very ugly looking webpage with just HTML in Grade 12 to a complete website using HTML, CSS and JavaScript. If I didn't know how to do something, I'd either ask the lecturer right then and there or I'd Google/YouTube it until it clicked. Sometimes things went wrong and I was left staring at my screen in frustration but I kept tinkering until it was working well. Even if something seemed like a challenge, I'd have a go at it.

I devoted many hours into this project - both learning and implementing/changing things around.

What I struggled with

Mostly the JavaScript. I was watching tutorials and following along for the most part, but sometimes a concept wouldn't be clear to me. When I implemented working changes and attributes to the Lightbox that wasn't part of the tutorial I felt that I finally understood what was going on! That feeling never gets old.

I also struggled a bit with the design. I'm better at coding than I am at designing, admittedly.

Other details

Project Brief

As you complete this POE, you will develop a website for an NGO, NPO or small/medium business of your choice. As your progress through each task, you will use knowledge gained in the different learning units and add in several features to your website. The outcome is to construct a well-designed website which will provide the NGO, NPO or organisation with a web presence.

Who or what is Second Hand Thrift?

Second Hand Thrift (Fest) is an organised event run by Laura Rainbird and held in various areas across Cape Town. I chose it because they only had a Facebook page acting as their main web presence, as well as the fact that I am personally friends with Laura and would enjoy doing this for her.

This was a joy to make and it was a passion project as much as it was schoolwork.