rhelli / landing-page

FCC Project - Landing Page

INTRODUCTION

This is a web page built to the specifications of Freecodecamp's Responsive Web Design project "Build a product landing page". The page was intended to produce a showcase a product with the additional stipulation of being responsive on mobile.

(https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-product-landing-page)

OBJECTIVES

• Build a webpage showcasing a product (fictional or non-fictional)
• Include a form for users to submit an email address
• Include a fixed navbar
• Include links that direct the user to different parts of the webpage
• Embed a product video
• Include media queries to make the page responsive

PERSONAL OBJECTIVES

• Build a product landing page with a little personality - this means it's necesserily the stock product landing pages that are often made by many other users.

• Inject a little humour into the project. For anyone looking through finished Freecodecamp projects, I'm sure it gets boring to look at the same boilerplate product landing page a thousand times so a little humour, satire and creativity in making something different can go a long way.

• Add a creative web design flair to the page to make it a little less dull. Less flat, lifeless colours, more gradients. Less single dimension element design, more inset and classic box shadows, etc.

---

SWOT ANALYSIS

STRENGTHS

• Navbar on mobile and web works well

• Good implmentation of product photos and design

• Page spacers provide a pleasant break between pages

• 3 line specs boxes looks and works particularly well to convey information in a small amount of space

• Strong implementation of flexboxes throughout the webpage to symmetrically lay out the page

• Above average web design

WEAKNESSES

• CSS code is bloated. A lot of repeating and modifying of code previously written in order to achieve goals.

• Too much writing for a product landing page. Should contain less writing with more succinct information.

• CSS & media queries should be attacked from the very beginning in order to reduce code quantity.

OPPORTUNITIES

• Design from mobile from the get-go. Avoids having to re-design the page for a smaller screen which is headache inducing.

• Commit to DRY principles to avoid bloated code.

• Plan the content of the page a little better next time.

THREATS

• Mobile is the future of web and most likely the way most people access web pages currently and in the future. Ensure that webpages are designed for mobile FIRST before applying web design as reversing the process is both incredibly difficult and may also result in the webpage not acting exactly as intended when viewed on mobile.

• Phones with 16 or more cameras