READ ME
The Project is to build a website about natural soap. The term natural soap is used interchangeably with organic soap. It is intended that the website soap-hero, encourages and empowers the audience to consider and hopefully adopt the use of Natural soap in some form, or at least be curious enough to give it a try. The website has 5 pages, Home, About us, Gallery, FAQ and a sign up feature called GET FREE SOAP. I wanted to make a good case for this humble, uncelebrated everyday household staple, then showcase the benefits and difference of Natural and Organic to ordinary and mass-produced alternatives. The concept to do this site was inspired by my hobby of making and formulating natural soaps, by hand at home; The code was heavily inspired from the Love running project, which I did side-by-side to soap-Hero.
Favicon attached Readme image 9.
- Project title
- Repository name
- Project Description
- Technologies Used
- Section A: The Overall Project a. Aim of project b. Project Objective c. Project Approach d. Rationale for doing.
- Section B: The Website a. Website objective/ what does it do b. Why website is useful? c. Intended effect on users? d. Target Audience e. Out of scope/ Future development f. Requirements g. How it all started/Inspiration h. Credits i. Project Approach i. An Idea is Born j. Development process i. Design structure and content od website ii. Research topic in greater detail iii. Assemble Content and images iv. Re-write content and finalise design
- Features and images
- Code a. Skeleton code b. Making alterations to meet design decisions. c. Aligning website to design / design integrity d. Adapting website for accessibility e. Adapting website for Responsiveness
- Concept and idea challenges
- Dealing with bugs and workarounds
- Testing
HTML to code and develop the website. CSS to style the pages. GitHub is the repository. Gitbod is the code space.
To educate and advocate for the adoption to any extent, of natural soaps instead of normal factory produced soap. I have presented content that encourages the audience to be curious enough about natural soap and inform about the potential problems in regularly using soap with harmful chemicals. The main persuasion is highlighting and promoting the benefits of natural soap for the skin. Knowledgeable customers are more likely to trust and engage with this brand as well as become consumers of Natural soap and possibly become patrons of any future natural skincare we may add to our catalogue of product lines.
To Create a beautiful, visually appealing website with all the bells and whistles that my imagination and limited knowledge of HTML and CSS can conceive.
I am not trying to demonstrate technical prowess, as there are elements that I imagined but had to research the web for tips on how to implement them. For instance, the changing colour of the Nav bar, one colour for active, another when clicked and a default colour for when not active.
This site is to meet the criteria as set out in the guideline, “to educate and empower the audience about the benefits of Natural soap.
Heavily inspired by the Love running, using this as my skeleton code, then change it to suit my intended design, accordingly, removing unwanted features, adding imagined features. What is not known, would be researched, from primarily the course material but as a last result from google (W3C and Stack Overflow), just as I would in real life. Rationale for doing this project. I am a bona-fide artisan, skilled at soap crafts, this is a hobby, a passion, and therapy. I paid to study for a double diploma in botanical and organic skincare and soapmaking in 2021-22 which I bagged a distinction on both (relevant certificate attached); since then, I have obsessively been formulating and crafting Botanical soaps and skincare potions. So, when I discovered that we had to do a project, it was an easy decision to make it about Natural soaps. I tackled this challenge as though it were “the real world”.
This website highlights the benefits of Natural soap and makes a subtle argument for conversion.
Research shows a decided global shift in culture towards clean beauty. Natural and Organic skincare products have seen a steady rise in market share globally. This is currently a 3billion dollar industry, globally. It is a culturally trendy topic of discussion with hardly any negatives.
Encourage to at least try Natural soap.
Based on US stats, and using the US as a model for which other regions will more or less match. The US Statistics and Facts Statista-states (ULTA), states that ninety percent of Gen Z and younger millennials are interested in purchasing clean beauty products in the future. By 2027, ULTA expects overall revenue to grow 12% in the global clean beauty market. Independent research is common in clean beauty. My target audience therefore is this demographic specifically and anyone who cares about the environment, as well as those who already are consumers of bar soap albeit factory soap. Further research shows that in the United States, 28 percent of men and 22 percent of women will mainly use organic skin care products, perhaps because nearly 40 percent of U.S. consumers believe that organic personal care and cosmetics products are healthier than conventional personal care and cosmetics products.
Ecommerce on this website. Offering goods and services for purchase.
Adhere to these guiding principles: • Seamless navigation • Responsive design • Across the board consistency • Smooth performance • Frictionless conversion • Clear communication • Effective visual language • Hierarchical content structure • Familiar web conventions • A reliable, transparent interface
Fonts – Font Awesome, fontawesome.com Favicons - https://clipart-library.com/soap.html Signup form : https://formdump.codeinstitute.net"> Images – Goole pictures, details specified below: o Hero image: Clipart library free soap; Emmie Koreman, Pinterest o About us image:How stuff works, the science behind soap-making. o FAQ image: Freepik. Assorted food on wooden table o FAQ Video- youtube. https://youtu.be/rlklQAC40g0?si=u0H7mXb-mWEdGWOi o Sign up image: by Soak yourself luxury handmade soaps, https://www.soakyourself.co.uk/ o Gallery images: Rasberry soap, ebay.co.uk Soap logs by Jasandjul soaps Slice-o-soap by i.pinimg.com Abs (African black soap) by life balance Cupcake by nectar usa sunflower soap by Yaya, Etsy. https://www.etsy.com/shop/SweetSkinofMineShop Blue soap. by Etsy seller, Perman man artisan soap, ShabbyheartSkincare Coffee soap in mock bath, by Gingers garden, https://www.gingersgarden.com/handmade-natural-artisan-soaps-with-essential-oils-or-fragrance/handmade-artisan-soap-carrot-castile-coffee-goatmilk/coffee-handmade-artisan-soap-detail
Soap by Nerdy farm wife. soapandrestless.blogspot.com
sweet rose soap by Debby Howard-Richards. handmadeinflorida.blogspot.com
Giant pink Cupcake soap by Norfolk bath and body
"Oriental looking soap" - by Lexica. https://lexica.art/prompt/5b6770ca-ad29-4c3d-8c18-be0e9b66c703
Strawbery and cream soaps -handwash picture -Ebay.co.uk, Antex24 Germany -https://www.ebay.co.uk/itm/315183837717?itmmeta=01HWDP3X7TZBYQV2CJW01W0ZRR&hash=item49626bb215:g:oTEAAOSwWo1l3x-r&itmprp=enc%3AAQAJAAAA4NF15HGo%2F8muCt5KmUK7TZ7yaj%2FGokbXPVYt756CjUDe5azBPkIyduaPxcitZxnpZEqEbeMz7zDeh9nTaUfSskvl%2FgBtSHuSEormgVHWCtMiWxcT0%2FtPmQPuz2OsbmRKWsDgV%2BmWJ3R9jzdIG%2B3nkyMJfF%2BibnHyNElJkZTcM1bue%2Bq5inCsBFwM9qEOGHNQcYLYbZvPNIi4aPDeQUC0E%2BL6ZDPn73b9sIl3FFiI%2BGMI20DTUSp47%2FPar927oiZkdH1JtRMmAAcwEmoWN1Ig%2B1VLnlpVCnjqSY3LO8MDhtoO%7Ctkp%3ABFBM_tOPtuNj
handwash picture -Ebay.co.uk, Antex24 Germany -https://www.ebay.co.uk/itm/315183837717?itmmeta=01HWDP3X7TZBYQV2CJW01W0ZRR&hash=item49626bb215:g:oTEAAOSwWo1l3x-r&itmprp=enc%3AAQAJAAAA4NF15HGo%2F8muCt5KmUK7TZ7yaj%2FGokbXPVYt756CjUDe5azBPkIyduaPxcitZxnpZEqEbeMz7zDeh9nTaUfSskvl%2FgBtSHuSEormgVHWCtMiWxcT0%2FtPmQPuz2OsbmRKWsDgV%2BmWJ3R9jzdIG%2B3nkyMJfF%2BibnHyNElJkZTcM1bue%2Bq5inCsBFwM9qEOGHNQcYLYbZvPNIi4aPDeQUC0E%2BL6ZDPn73b9sIl3FFiI%2BGMI20DTUSp47%2FPar927oiZkdH1JtRMmAAcwEmoWN1Ig%2B1VLnlpVCnjqSY3LO8MDhtoO%7Ctkp%3ABFBM_tOPtuNj
• Code source – skeleton :Love running, Bug fixes: Stack Overflow; W3C
• Text content research – riverdancesoapworks.com; The US Statistics and Facts Statista-states (ULTA)
It started with a definite topic, Soaps. I wanted to make a good case for this humble everyday household product, then showcase the benefits and differences of Natural and regular soaps. The concept is inspired from my hobby of soap making, the code was heavily inspired from Love running project.
I decided not to use any of my personal soaps, even though I have 200 unique pieces, I sought free pictures on google and Shutterstock. The reason was to maintain objectivity. These are all referenced in the appropriate section of this readme file. I also made it good practice to research my assumptions about Natural Soap to add great weight and credibility to what I knew about it, and what I learned formally.
Once I got my theme, I imagined what the website should look like, very pretty, feminine, young, conversational and lots of pictures. I wanted enough content upfront but have an FAQ for adding more content for hungrier audiences. Then I conceptualized it in my mind first. Fortunately, the Love running project was very similar, to what I imagined, so I adopted that design as a skeleton, so this gave me a HeadStart.
Started the process by imagining and conceiving what the final website would be, what pages would be presented, what text and information each page would convey and contain.
Then I scouted for relevant attractive images for each page, then I wrote down the actual page content in a word document. Read through multiple authority websites to gather relevant updated information.
I managed to accumulate more content material than I could possibly use, without making the site too cluttered and tedious. So, I selected what I would use, then I rewrote the main points that I wanted to use, and matched the content of text with most suitable images. The compilation file called Soap star notes is surrendered for your scrutiny and attached. Finally, I designed the order of pages and the navigation bells and whistles.
Now, with a clear idea of what I wanted to do I began coding. Firstly, from using the bits from Love Runing that I needed, amending this as I went along. Then tweaking the code to suit my imagined design.
Testing as I went along by viewing the output and amending it.
The Love running code was the foundation for this projects code, with some tweaks here and there, mostly by design, but sometimes by accident. For instance, my cover text did not look good on smaller screens, so I began to adjust the padding and margin by testing different values, until I found it positioned to my liking. Image below: Readme Image 1
I felt my idea was very ambitious for someone new to programming. But compelled to do a to-the best-of-my-ability job, especially because the topic being a particular passion of mine, I needed to bridge the gap between what I knew and where I wanted to go. For the most part, it was fine. The challenge arose when bugs were discovered, and the output is not as I expected. From time to time, I had to enquire in Stack overflow for tips.
From the 5 -day coding challenge, Code Institute said we could research things on google, as even experienced developers did so.
So, I did. Referenced all in the Credits section.
The Website has 5 pages – Home, About us, Gallery, FAQ and Get free soap (sign up The home page begins with the Hero image, a beautiful and colourful image of handcrafted Natural soaps in a white bowl, like a bowl of fruits would be presented. Almost to say to the audience that these look “good enough to eat.”
The other notable feature is that in the meetup section just above the footer on the Home page, I initially had an image of soaps which i set to .5 opacity, but to make it more friendly to visually impaired users, I added a black semi-transparent scree overlay. This ensures its readability. Maybe I could have deleted the background image, but I wanted it to stay. too much? maybe!
The next nav item is the about us page. Here I want to draw the audience to the human being behind the site. An image of a woman wearing an apron pouring out soap, with the text /content on the page of my personal journey, adding a human and personal touch to the site, again for brand loyalty and increased credibility.
The Next section is the wonderful gallery, showing a dozen of assorted handmade soaps. Again, to imprint on the user "you really should try it"; to assert an emotional anchor.
Then I did an FAQ. Not wanting to overwhelm the home page, I listed questions that people usually ask me when I display my soaps. Again, to increase credibility of the site. In the FAQ section, I added a YouTube video, wrote some alt text just above it to state what the video was about.
Finally, my call to action page, Sign up for free soap. It is hoped that everything seen and heard would motivate the user/audience to engage risk free. That is my website.
I had a lot of pictures to add but due to time constraint may not add them all.
performance 99% accessibility 97% SEO 100% BEST PRACTICE 100%. pdf/screenshot is available for inspection.
Viewports Desktop 1600x992px scaled down to scale(0.3181) Laptop 1280x802px scaled down to scale(0.277) Tablet 768x1024px scaled down to scale(0.219) Mobile 320x480px scaled down to scale(0.219) A note on the viewports
I tested the webpages on Chrome, Google, Duckduck, firefox and safari
I confirm that the project is responsive and looks good on all screen sizes. Ami responsive gave a printout. will attach.
Form is easy to understand and fill, from my observation of my test users. It verifies the email input. It returns a friendly acknowledgement. I have screenshots.
The validation has 1 error: Error: The element a must not appear as a descendant of the button element. But I decided to live with it. Because I intentionally coded it that way.
The site is deployed to GitHub. You can do the same by going to Github repository Soap-Hero Go to Settings, from there, to Source. Then select from the drop-down menu Main branch. save.
link: ### Link: Link: https://vivian5pdev.github.io/soaphero/index.html
LIGHTHUSE TESTE: PERFOMACE 99% SEO 99% ACESSIBILITY 97% BEST PRACTICE 100% -Sreenshots taken and full report is available. OUTSTANDING WORK: embedding images and screenshots to readme. However, i created a folder in images folder in assets, called Readme supporting images and added neccesary images in there.