Impose website exercise for beginner frontend developer — “Shopify”

Practice your frontend development skill by imposing different website

Content

1. Introduction
2. Result demo
3. Prerequisite
4. Step by step guide
5. Conclusion

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:

This is the final 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:

Sass: Syntactically Awesome Style Sheets

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.

* This is the impose version, pretty close, right?

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-grid
sponsor-container for holding all the sponsor and
quote-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 the feature-grid-container and sponsor-container. And I have redefined the large-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:

The height exceed my screen so I use a gif

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:

This is the original website

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.

It is not identical as the breakpoint I used is different

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!