CSS flexbox to keep the page responsive
Hamburger menu navigation on mobile to enhance user experience
Email address validation
Fixed background with foreground scrolling over it
Embedded YouTube video
Custom icons and background
Wireframing (Adobe XD)
Design (Adobe XD)
Responsive Web Design
The goal for this project was to design a landing page from scratch, and then code the design into a responsive web page using the user stories on FreeCodeCamp’s project requirements as guidelines.
First, I decided on a concept for the project: an online company providing photo storage, organization, and printing services to a target audience of couples and families. I started by brainstorming page sections and elements that would need to be included. Then I created some rough wireframes for the page layout.
Since photos are generally taken during exciting moments in our lives, I chose bright colors and a playful header fonts to create an energetic feel. I created a photo collage for the page background in Adobe XD and placed a transparent background over it so as not to distract from the foreground.
After coding the project I posted it for feedback on the FreeCodeCamp forum where I got a lot of great recommendations and questions. I chose to implement several of the recommendations on my webpage.
The landing page includes: navigation at the top of the page with a hamburger menu appearing at smaller screen sizes, a place to sign up for the service highlighted at the top of the page, descriptions of the services offered, an overview of the pricing plans available, a video to engage the audience in the services provided, and a footer for additional information.