Introduction
This article is for beginner frontend developer, who just started learning frontend development and want to improve their skill.
This is a great time to learn coding and development. There are plenty of tutorial online teaching you different library, skills and best practices. However, like everything else, frontend development is a skill that take practice to master. You cannot expect yourself building an excellent website just by reading a bunch of tutorial. You need to have hands-on practice to improve your coding skill. One of the best exercise for frontend developer is to impose an existing website, and see how close you can get.
Coding is like any other skill. You need to practice a lot to makes perfect
In this article, I will try to mimic the landing page of https://www.shopify.com/free-trial. I strongly suggest you try it yourself as well. There are no correct answer of how to do it. If you just started learning frontend development, it might be useful to see how other people approach a problem. And this is what this article is meant to be.
Warning: This is a very long article, as I will show you step by step how I construct the whole page.
Quote like this are usually explanation, if you are in a hurry, just ignore them
Result Demo
Original website: https://www.shopify.com/free-trial
My result:
Codepen demo: https://codepen.io/josephwong2004/pen/bGVLKpo
Prerequisite
Basic HTML and CSS knowledge, I used a bit of SCSS as well. CSS preprocessor can help you organise your style. If you are not familiar with it:
Step by step guide
Step 1: Construct the header
To start with, let build the header area. This website has a really common header pattern, big title with support text, “call for action” input form and button. I start by drafting out the rough layout before actually start coding (usually just on paper, but for purpose of this article, digitally)
As you can see, everything align nicely at the vertical center axis. We have 3 different size of text, which you can easily check by “inspecting” the original website. The input field and button align horizontally on the same row, the container of them align to center.
One thing interesting is the image. You can see in the original website, the background color of different section alternate in yellow and white. The image here bridge across two section, creating an illusion of the two section joining together by the image.
So first thing first, let put down our html to capture what we see here:
Explanation:
container
— For the whole website, every container in following section are within this container
header-container
— For header section only
The structure it very simple, we capture everything with a container. And give a corresponding class to the UI element we saw (title/subtitle/form-container etc)
Now, let add some basic structure to our CSS:
To make thing easier for ourselves, we add some color and padding-size global variables
. (In SCSS, we use $variable_name for declaration) We also setup the font in body (The original website use their own Shopify-San, but I will just use Helvetica here). You can also see I used a * { box-sizing: border-box }
style as I think border-box is a much easier sizing and positioning standard.
In addition, we add two class, .row and .column, for aligning items in a row and column respectively. So we don’t need to reassign them to individual classes. (Of course, there are a lot more style you could reuse. But I am going to keep thing simple here)
The header-container CSS styles looks like so:
Explanation:
As you can tell, I didn’t write the button and input class myself. I simply copy the style of it out of the originally website.
Don’t get me wrong, I am not telling you to copy everything from the source code, this will defect the purpose of the practice. I am just saying when you are making a website mimic, for some standard component, you maybe better off just copy the style (like a button). there are still learning value in doing so. For example, you can see how many extra style they added in the button (such as
appearance
for cross pattern consideration). You can still learn a lot, but make sure you understand the code you are using
You can see I capture everything inside .header-container {}
style, this ensure the class name like title
or subtitle
style only apply to the class inside .header-container
. Doing so ensure the style won’t affect my other classes. I don’t like making my style global unless I have to repeat myself very often. If you found yourself keep copy and pasting some style like font-size or padding, it might be a good idea to set some global variable for it.
Now we got the header in full-size, let add some responsiveness to it
Step 1.5: Make the header-container responsive
The header looks good on full size, but on resize, it start to get out of shape. Let inspect the original website again and see how it change on resizing.
Although a lot of thing is moving, the overall structure of the container doesn’t change much. The only changes are font-size and the alignment of the form-container. We can consider it one by one in corresponding classes.
When doing responsive, sometime you may found the style you wrote cannot handle resizing. It is totally normal, just rewrite that part of the style. I also make a few changes to the code when doing the responsive.
Explanation:
I just included the part I have changed. For full code, see my codepen demo
Okay, I think it is close enough. Let move on.
Step 2: Construct the feature section
Again, to help us better visualise the UI element, let make a quick draft:
This is a very common pattern in landing page as well. A grid layout with same width, center-aligned and stacked with text of different sizes.
We also see a list of sponsor, embed within two border line. And a quote below it, center-aligned. Again, the developer use the same technique of image bridging two section.
Let lay down our html backbone first (obviously within container
class):
Explanation:
The whole section is captured in
body-container
.feature-grid-container
set out the row of the three feature-gridsponsor-container
for holding all the sponsor andquote-container
for the quote
Okay, not much to talk for the html, it is pretty standard. Let jump into the CSS:
Explanation:
You can see I use
width: 60%
in the body-container, this help uniform the size of thefeature-grid-container
andsponsor-container
. And I have redefined thelarge-image-container
here as I don’t feel comfortable sharing the class. It might backfire in larger project as I will have to write the class over and over again, but since we are only dealing with two here, it is fine I guess.There are no crazy property or style here, but you will need to observe your target website carefully in order to make it right. Luckily, we can always use inspect to get more detail.
The result look like so:
Pretty close. Next, let see how responsive affect the website.
Step 2.5 Responsive for feature section
Again, by observing the original website, we got an idea of how resizing affect the UI element:
The first thing I notice is the width: 60%
on the feature-grid-container
I used in my version backfire immediately. As the grid-container isn’t always 60% of the parent size. But it is okay. We can just change that to a combination of max-width and width. The major responsive part is the feature-grid alignment itself, once passed tablet size, it take up 100% of the space.
The secondary change is the sponsor, taking up multiple lines. which look like a flex-standard behaviour.
The rest is just font-size changes. Let jump into the code.
Again, only showing all the changes I made. One interesting note is .sponsor-container
and the img
inside. I replaced padding-top and bottom with padding-bottom only in .sponsor-container
, and added the margin-top to img. So when it wrap, each row of sponsor has some spacing between them.
Okay, not bad. Let move on to the final part.
Step 3: Construct the footer part
The last part is relatively simple. Nevertheless, let make it quick draft:
We can clearly see what should be center aligned. Also, we can reuse the button here.
There are not much responsiveness in this section, just the footer alignment moved from “flex-end” to “center”. The font-size for the “call for action” text remind the same.
Okay, let see the code:
html:
css:
And the result:
And there you have it, we have replicated the landing page!
Conclusion
Again, I cannot emphasise the importance of trying it yourself. At first glance, a lot of website look simply. Your brain could understand the property, style or layout completely. Yet, when you actually attempt to replicate it, you will find that your body betray you and fail to code smoothly. Like me, you may struggle a lot trying to make some “easy” layout to look exactly the same as your target.
It took a lot of practice to perfect your skill, and there are always room for improvement. Though this website is a relatively easy example, I also found myself learning something new trying to replicate it.
If you feel like going further, you can capture the user input action (like when the user clicking on the button) and other element of the website as well. There are so much more to do.
If you like it and want to see more, feel free to leave a comment!