Welcome back to part 2 in this two-part tutorial series on how to design and code a responsive app landing page. In this tutorial, I’ll show you how to code this responsive app landing page using the latest in web development; Flexbox. If you haven’t already, be sure to watch Part 1 so that you have all the assets needed to code this responsive app landing page.
Gold Members can download the final project file below:
What You’ll Need
Export Design Assets
Open the design mockup of our app landing page created in part one of this series. We’re going to now export a few design assets from our design into an image folder for our website.
Select the “Chatr” logo and then go to File > Export Selected. Set export format to SVG and select “Optimize File Size (Minify)”. Now, we’ll export the blobs, device mockup and illustration as a PNG and we’ll export it for the Web.
Now that we’ve exported all the design assets for our landing page, we can start coding.
Header & Navigation Menu
In our HTML file, we’re first going to use the
<header> tag and give it the class name “container”. Within the header tag, we’ll use the
<div> tag and give it the class name “logo”. Then, we’re going to use the
<nav> tag to create a series of unordered links. For the last list item, we’re going to give it the class name “highlight”.
Within the “logo” div, we’re going to go into our images folder to grab our logo SVG and paste the code within the logo div. We’re also going to give our logo the id “chatr-logo”.
Below the closing
</header> tag, we’re going to use the
<main> tag and give it the class name “container”. Then, we’re going to use the
<section> tag give it two classes “hero” and “container”.
Within the section tag, we’re going to add our heading and paragraph text. Below the paragraph text, we’re also going to add a link using the anchor tag that says “Go To App Store”.
Below the closing
</section> tag, we’re going to use the div tag with the class name “device”. We’ll use the
<figure> tag and then within that, we’ll add our device image. Be sure to use the alt attribute for accessibility purposes.
That’s all for our HTML file, now let’s head on over to our CSS file to add some life to our app landing page.
Body & Background
As you can see, I’ve already imported the Google Font used throughout this website, Source Sans Pro. I’m also going to use the background property to add the image of the blobs, adjust its position by adding no-repeat, right, top, and finally adding the turquoise background color.
I’ve also added the following styles to our websites container.
Logo & Navigation
To style our header area, we’re first going to align its content to the center. We’re going to give our logo a specific width of 180px.
To style the navigation menu, I’m going to first use margin to align it to the center and give it a max-width of 600px.
For the nav ul, we’ll remove its margin and padding, and use the flexbox declaration
display: flex so our menu links are inline. Next, I’ll apply various styles to the list items and anchor links.
The main content area includes the headline, blurb and device image. First, we’re going to style the main content container by using the flexbox declaration
display: flex and use
flex-flow: column so that our content is stacked when viewing on smaller mobile screen.
Now, in the following declarations, we’re going to select the hero section, headings, and paragraph text to style the main content. We’ll also add the yellow dividing line above the paragraph text with the help of the pseudo element
::before. We’re also going to select the anchor in the hero section to create our “Go To App Store” button.
Finally, we’re going to position our device image by selecting the
figure tag and
figure img and align its content to the center, add margin and set the width of the image to 300px.
Our landing page now looks great on small screens, but now we’re going to use media queries so that it looks good on larger screens.
Let’s write a media query for when the device screen has a min-width of 820px.
First, we’re going to select the header of our website and add the following flexbox layout properties.
On the next lines of code, we’re going to apply styles to the nav, main content area, hero text, and our device image.
Note that we’ve selected the highlight class to add the yellow border around the “Learn More” link. We’ve also changed the background color of our CTA button, from yellow to purple.
Now, to create the illustration version of our app landing page, we’re going to first simply replace the images in our HTML file.
In our CSS file, we’re going to remove the background image and positioning.
<main> tag, we’ll change flex-flow to column-reverse. The CTA button background will change to purple.
For the figure and figure image, we’re going to remove the margin property and instead, align text to the center.
In the media query, we’re going to remove the hero anchor declaration and then we’re going to remove the margin property for the figure image and change the width to 120%.
That’s how you code this responsive app landing page using the latest in web development, Flexbox layout. If you’ve designed your own version of this website, be sure to share it with me on social media using the hashtag #XOPIXELPerfect and you’ll design will be featured on xopixel.com.