the gallery landing page

gallery landing page

Features

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

Skills Used

Concept Development

Wireframing (Adobe XD)

Design (Adobe XD)

Web Development (HTML5, CSS3, JavaScript)

Responsive Web Design

The Details.

Goal

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.

Process

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.

Outcome

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.