Let’s Make A Webpage In 2016

Jordan Scales
Jan 12, 2016 · 5 min read

In today’s thought-piece I’m going to walk you through the process of creating my webpage. I’ll show you all the best practices I know, the heartbreak I’ve gone through to get here, and how I learned to love the web again. Enjoy.

The Idea

I want a simple webpage that displays my picture, some information about me, and links where readers can see some of the stuff I do. My mom thought it was a great idea, so I grabbed the pen I stole during my Medium internship and began sketching out my idea in a $24 Moleskine that I bought at a Hudson News.

Image for post
Image for post

Now, I have a few requirements for this project. I want it to be fast, responsive, accessible, and mobile-friendly, so I’ll be using React.

Setting Up React

For those unfamiliar, React is a web framework for building user interfaces. Below is the landing page for React explaining some of its features and a 300px banner with three lines of content in it. Since my webpage will be a user interface, it’s a perfect fit.

Image for post
Image for post

Now, actually setting up React takes a bit of work and configuration, so instead I’ll be using what those in web development refer to as a “boilerplate,” or a project that someone has already written for me.

I’m a big fan of Dan Abramov’s hair, so I started off by grabbing his React boilerplate off GitHub.

Image for post
Image for post

The Wild World of Boilerplates

I started off by creating a new folder for my project, then cloned the repository from GitHub:

I then followed the instructions from the README:

While this was running I decided to go for a run. By the time I got back it was nearly done. I’m a decent runner too, in 8th grade I tried out for the cross country team and would have made it if my coach didn’t have a personal agenda against my family. I then proceeded to run the included web server:

And — surprise, surprise — it didn’t work (as if npm ever works am I right?). After writing JavaScript for a few hours you get used to this sort of thing, so we’ll move on and try another boilerplate. The react-transform-boilerplate, also from Dan Abramov, looks good and has many stars.

Image for post
Image for post

Setup for this boilerplate went a little more smoothly:

And then we’ll start the server like so:

It’s alive!

Image for post
Image for post

Diving into React

Now that we’ve successfully proven all those really mean blog posts wrong by getting React up and running in under 3 hours, let’s make a few changes here. My webpage is not a counter, so I’ll be changing that, and we’ll also be getting rid of the ugly orange color that this boilerplate ships with.

Finally, let’s check out some code. After poking around for a few minutes, we see that a file called index.js (the .js part stands for JavaScript in case you were wondering like I was) actually renders our webpage.

Image for post
Image for post

Now, there’s a lot going here, and a lot of this may be new to you as it was for me when I first started developing web applications. Let’s take a look at a specific part of this file:

The <App /> part may look like HTML to you, but it’s actually a templating language called JSX: an HTML-like syntax developed by a few fatigued Facebook developers looking to make React development more pleasant. We can use all the HTML elements you’re familiar with such as <p>, <a>, and <font>, and you can even define your own tags like <Comment>, <img>, or even <App>!

I’m going to move a bit quickly now since my battery is almost dead, but I highly recommend this React tutorial if you’re looking something more in-depth.

Let’s proceed to change the markup a little here:

And our webpage is starting to come together quite nicely!

Image for post
Image for post

Going Forward

At this point I now have a fast, responsive, declarative layout for my webpage, and I can begin adding more content to it without the fear of bugs or crashes.

We’ve had our fair share of problems developing this webpage and wrapping our heads around the sheer magnitude of libraries in tools available to us in 2016, but once we settle down and take a deep breath, we realize that things can and probably will be a lot worse.

We did it, together, and now we have a great story to tell.

friendship .js

JavaScript is better with friends

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store