Project: Brewed in Heaven Landing Page
After several weeks spent completing four courses in the Web Design for Everybody Specialisation by University of Michigan, I designed and built a landing page for a fictional tea company named Brewed in Heaven. This project’s purpose was to apply my knowledge of HTML and CSS and to learn to utilise components of Bootstrap 4 to build a webpage. The wireframing phase of the project primarily involved designing the layout because I’m creating a static landing page.
Phase 1: Wireframes
I designed the layout of the page to draw attention to images of tea that would encourage potential buyers to visit the shop. Keywords such as “ethically sourced” and “fair trade” distinguish this brand from its competitors. I highlighted aspects of service offered through the ‘Bestselling Products’ section.
I included a call to action – subscribe to our newsletter – and provided a means for potential customers to contact this company through the contact form.
Phase 2: Design
I selected two versatile Google fonts that complemented each other beautifully: Playfair Display and Montserrat. I selected a color palette that would be minimalist but visually appealing and complement the images I selected and styled for the web page.
Phase 3: Code
I started off by familiarising myself with the Bootstrap 4 documentation. All of the code I wrote is available on my Github repository. The website can be found here.
key components
Navigation bar with dropdown menu
Carousel consisting of images accompanied by captions and buttons.
Card decks for advertising bestselling products and the blog
Two forms: newsletter + contact form
Footer consisting of font awesome social media icons + address
CSS styling: fonts, colors, padding, margin, height & width, buttons, containers, footer, social media icons, etc.
