Donny's Programming Blog

How To Get Started on a New Project

February 13, 2019

One of the questions I get asked frequently when it comes to developing a web application of any size is, “how do I get started.” I feel like this is a question that can be easy to over look if you have some experience. Some may start by heading straight to a framework like Create React App, Vue CLI, or Angular-CLI. Or maybe you’re starting with just brainstorming some Proof of Concept (PoC) with just raw HTML, CSS, and JS. Personally, I love to start there whenever possible. Starting out with a basic visual representation of what you want to create before building out a fully functional application has some tremendous benefits. Now, I’m certainly not knocking the three mentioned above (and the countless others not). But, if you’ve been developing applications even for just a little while, you know how easy it is to get bogged down by implementation details that seem easy at first but snowball into something unrecognizable really fast.

I’ll use a simple blog to layout as an example.

First steps

The first thing I like to do when starting any new dev project is get some content down that represents what I’m going to be working with. To the HTML! Not so fast… Jumping straight into building up some markup can get in your way more than you think. I like to use just a plain text document and just start adding the content I’m going to need. This way I have a good base of what I’m going to be coding.

Let’s see an example:

Donny's Blog

Bio

[My photo here]

Hi! I am Donny. I write blog posts about programming!

Posts

Post One
written by: Donny Hamilton
on Feb 13, 2019

Kitsch af quinoa mlkshk vegan tacos enim squid fashion axe esse celiac chartreuse thundercats la croix. Sunt humblebrag fixie tumblr sriracha disrupt. Aliquip retro man braid hell of, mumblecore messenger bag bicycle rights tattooed ut sriracha YOLO art party fingerstache literally kombucha. Four loko gastropub jean shorts non consectetur seitan.

Post Two
written by: Donny Hamilton
on Feb 13, 2019

Yr hot chicken vinyl freegan, meh palo santo flannel marfa. Crucifix try-hard lyft quinoa godard, pabst hella commodo single-origin coffee schlitz subway tile. Marfa tumblr venmo aute pabst laborum adipisicing. Ullamco tacos intelligentsia, blog live-edge tattooed bespoke offal neutra shoreditch anim sustainable. Pinterest ea farm-to-table, selvage velit fashion axe edison bulb trust fund aliquip fixie hexagon mixtape. Banh mi esse hexagon, proident ut drinking vinegar shaman occupy.

Copyright 2019 Donny Develops

This is what we get in our browser: content alone

So here we have a basic outline of what our content should look like. This is the heart of our application. Without content, our application is useless. So the idea is to enhance our content with code, not obfuscate it.

Markup

So now that we have our content laid out, now we can move on to marking it up. The key here is to let your content dictate how it is marked up. Make sure to pay attention to semantics and use the proper HTML tags. Let’s take a look at how content like this might be marked up:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Donny's Blog</title>
  </head>
  <body>
    <header>
      <h1>Donny's Blog</h1>
    </header>

    <main>
      <section>
        <h2>Bio</h2>
        <img
          src="http://placekitten.com/300/400"
          alt="Photo of the Blog owner"
        />
        <p>Hi! I am Donny. I write blog posts about programming!</p>
      </section>

      <section>
        <h2>Posts</h2>

        <article>
          <header>
            <h3>Post One</h3>
            <p>written by: Donny Hamilton</p>
            <p>on Feb 13, 2019</p>
          </header>
          <main>
            <p>
              Kitsch af quinoa mlkshk vegan tacos enim squid fashion axe esse
              celiac chartreuse thundercats la croix. Sunt humblebrag fixie
              tumblr sriracha disrupt. Aliquip retro man braid hell of,
              mumblecore messenger bag bicycle rights tattooed ut sriracha YOLO
              art party fingerstache literally kombucha. Four loko gastropub
              jean shorts non consectetur seitan.
            </p>
          </main>
        </article>

        <article>
          <header>
            <h3>Post Two</h3>
            <p>written by: Donny Hamilton</p>
            <p>on Feb 13, 2019</p>
          </header>
          <main>
            <p>
              Yr hot chicken vinyl freegan, meh palo santo flannel marfa.
              Crucifix try-hard lyft quinoa godard, pabst hella commodo
              single-origin coffee schlitz subway tile. Marfa tumblr venmo aute
              pabst laborum adipisicing. Ullamco tacos intelligentsia, blog
              live-edge tattooed bespoke offal neutra shoreditch anim
              sustainable. Pinterest ea farm-to-table, selvage velit fashion axe
              edison bulb trust fund aliquip fixie hexagon mixtape. Banh mi esse
              hexagon, proident ut drinking vinegar shaman occupy.
            </p>
          </main>
        </article>
      </section>
    </main>

    <footer>
      <small>Copyright 2019 Donny Develops</small>
    </footer>
  </body>
</html>

markup alone

notice how the only tags used in this markup are there to identify the content. We’re not worried about adding any divs for style hooks yet because we’re not at that step yet. All we worry about first is making sure the content is properly contextualized. This ends up being really helpful for styling because understanding the content and how it relates to itself usually helps with figuring out how things should look. So with this markup we can now focus on adding some CSS!

Styling

Now that we have our content and it’s semantically marked up, we can move on to making this look pretty! We should do our best to avoid adding any more markup since our material is marked up correctly based opn the content. There are a few things that require additional containers to group elements though so we will add a few divs. The reason we are going to use divs instead of section (or something more semantic) is that these elements should only be used as style hooks. There are a lot of CSS conventions out there. I like to use BEM, but feel free to adapt this to whatever convention you’d like.

Let’s take a look at our additions:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Donny's Blog</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <header class="main-header">
      <h1 class="main-header__title">Donny's Blog</h1>
    </header>

    <main>
      <div class="container">
        <section class="bio">
          <h2 class="bio__title">Bio</h2>
          <figure class="bio__image-container bio__image-container--center">
            <img
              src="http://placekitten.com/300/400"
              alt="Photo of the Blog owner"
            />
          </figure>
          <p class="bio__caption bio__caption--center">
            Hi! I am Donny. I write blog posts about programming!
          </p>
        </section>

        <section class="posts">
          <h2 class="posts__title">Posts</h2>
          <section class="posts__container">
            <article class="post">
              <header class="post__header">
                <h3 class="post__title">Post One</h3>
                <p class="post__author">written by: Donny Hamilton</p>
                <p class="post__date">on Feb 13, 2019</p>
              </header>
              <main class="post__content">
                <p>
                  Kitsch af quinoa mlkshk vegan tacos enim squid fashion axe
                  esse celiac chartreuse thundercats la croix. Sunt humblebrag
                  fixie tumblr sriracha disrupt. Aliquip retro man braid hell
                  of, mumblecore messenger bag bicycle rights tattooed ut
                  sriracha YOLO art party fingerstache literally kombucha. Four
                  loko gastropub jean shorts non consectetur seitan.
                </p>
              </main>
            </article>

            <article class="post">
              <header class="post__header">
                <h3 class="post__title">Post Two</h3>
                <p class="post__author">written by: Donny Hamilton</p>
                <p class="post__date">on Feb 13, 2019</p>
              </header>
              <main class="post__content">
                <p>
                  Yr hot chicken vinyl freegan, meh palo santo flannel marfa.
                  Crucifix try-hard lyft quinoa godard, pabst hella commodo
                  single-origin coffee schlitz subway tile. Marfa tumblr venmo
                  aute pabst laborum adipisicing. Ullamco tacos intelligentsia,
                  blog live-edge tattooed bespoke offal neutra shoreditch anim
                  sustainable. Pinterest ea farm-to-table, selvage velit fashion
                  axe edison bulb trust fund aliquip fixie hexagon mixtape. Banh
                  mi esse hexagon, proident ut drinking vinegar shaman occupy.
                </p>
              </main>
            </article>
          </section>
          <!-- /.posts__container -->
        </section>
        <!-- /.posts -->
      </div>
      <!-- .container -->
    </main>

    <footer class="main-footer">
      <small>Copyright 2019 Donny Develops</small>
    </footer>
  </body>
</html>

and the styling:

/* Browser default reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Set root font rules */
html {
  font: 20px/1.618 sans-serif;
}

/* Default HTML Element Styles */
img {
  width: 100%;
}
p {
  font-size: 0.75rem;
}

/* Element styling */
.container {
  margin: 0 auto;
  width: 40rem;
}

/* Main Header */
.main-header {
  align-items: center;
  background-color: tomato;
  display: flex;
  padding: 1rem 2rem;
}
.main-header__title {
  color: #eee;
}

/* Bio */
.bio {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}
.bio__title {
  border-bottom: 1px solid #aaa;
  margin-bottom: 1rem;
}
.bio__image-container {
  display: inline;
  width: 10rem;
}
.bio__image-container--center {
  align-self: center;
}
.bio__caption {
  font-size: 0.625rem;
}
.bio__caption--center {
  align-self: center;
}

/* Posts */
.posts__container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
.posts__title {
  border-bottom: 1px solid #aaa;
  margin-bottom: 1rem;
}

/* Post */
.post {
  border: 1px solid tomato;
  margin-bottom: 1rem;
}
.post__header {
  background-color: tomato;
  color: white;
  padding: 0.5rem 1rem;
}
.post__author {
  font-size: 0.625rem;
}
.post__date {
  font-size: 0.625rem;
}
.post__content {
  padding: 0.5rem 1rem;
}
/* Footer */
.main-footer {
  align-items: center;
  background-color: tomato;
  color: #eee;
  display: flex;
  justify-content: center;
  padding: 1rem 2rem;
}

and this is what we get:

App with styling applied

So there we have it. A nicely templated frrontend application. Now that we have a base layer of content, HTML, and CSS all working together to give us this visual, we can start to actually build this out. If we wanted to use react, we could start pulling out components and populating the content through a backend server environment or external API.

Take Aways

The big take aways here are that your application, and more specifically, your frontend is nothing without some content to shape. Keep your design simple and readable. Your process should start with planning out exactly what your app needs to contain and how it connects to the user. Once you have the content, move on to markup, and then on to the styling.


Don Hamilton III

Written by Don Hamilton III who lives and works in Columbus, OH teaching folx to program at We Can Code IT. You should follow him on Twitter