Building your first website

Where to even begin?

Let's assume for the sake of clarity that you already have a complete design that you want to build, and you just need to build it!

BEFORE WE GET STARTED -- DO NOT COPY AND PASTE THIS CODE.

Seriously, a huge part of learning during coding comes from muscle memory when you actually type something in. When you copy and paste you deny yourself the opportunity to learn.

Step 1. Planning

Before we even touch the keyboard, let's look through and think about how we might do this. Is it a modular design where certain blocks are repeated? Does each page or section have a totally custom design or are they repeating similar elements of styles? Make a list of all of the 'modules', which might look something like this:

  • header
  • footer
  • image banner
  • video banner
  • icon grid
  • grid of circle images (ie staff profiles)
  • contact form
  • blog tiles
  • sidebar
  • buttons

Making a list in this way helps you to identify common reusable elements.

Step 2. Writing the HTML

Setup your folders, open in Atom and create an index.html file. Remember to make sure all of your folders and titles are lowercase and with dashes in place of spaces.

  • website-folder
    • index.html
    • css
      • main.css
    • images

Then write out the html for your home page, adding comments wherever necessary. As you are just getting started, avoid adding classes at this stage.

Step 3. Setting up your css

How you set up your CSS document will be so important to your sanity throughout a web project. You want to make sure it's logically organised and clearly commented. This will save you literally hours and hours of time, and hundreds of lines of code.

/* ------ INDEX --------------------
  - CSS RESET
  - GENERAL HELPER CLASSES
  - UNIVERSAL STYLES
    - Layout 
    - Typography
    - General Styles
  - HEADER & FOOTER
  - MODULAR ELEMENTS
    - Element Name
  - FORMS

---------------------------
Website Fonts: List fonts here for reference
Website Colours: List colour hex codes here for reference
----------------------------
*/

Then for each section you'll use a comment to separate that section. As always we'll start with the CSS reset.

/* ---- CSS RESET --------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto; 
}

Then we'll go ahead and create a set of helper classes that we can reuse throughout our document. These are just a few examples, but feel free to add your own.

/* ---- GENERAL HELPER CLASSES --------------------------- */
.tall         { min-height:100vh; }
.med-height   { min-height: 50vh; }
.short        { min-height: 30vh; }

.left         { text-align: left; }
.centered     { text-align: center; }
.right        { text-align: right; }

.no-padding { padding: 0; }

.light-bg    { background-color: rgb(245,245,245); }
.dark-bg     { background-color: rgb(60,60,60); }
.feat-bg     { background-color: green ; }

Step 4. Setting up the grid & layout

Ignore this step if you haven't learned grids yet!
Add the link to the Gridlex cdn to the head of your html.

Go through the project and add relevant classes and divs in your html to set up your grids. Go ahead and add the responsive class (ie col-4_sm-8_xs-12) right from the start. (SEE the CSS Layouts Section for more info).

When you've done the whole html page, go to your css file and add this line of code which will add a thin yellow border to your entire page. This is ugly, but will help you to position your page -- it's only temporary and we'll remove it as soon as we're done!

* {
  border: 1px solid yellow;
}

Everything should now be in the correct columns.

Step 5. Universal Styles

How to remember CSS

CSS can be overwhelming at first because there are so many different options when it comes to how to create your styles. One of the reasons is that it's too big of a leap for your newly formed neural pathways to jump from looking at the design to writing the css code, so one of the mind hacks that you can use is to break it down in to simpler steps -- and you'll realise how much you actually do know.

  1. Write down what you are trying to do in plain english (ie. I want my headings to be blue, I want more space around my buttons.)
  2. Think about which properties you might be able to use (change text color with the color property, add space with padding or margin)
  3. Think about which selectors you might use to select that (ie h2, .button)
  4. Attempt to write out the full css
h2 {
  color: blue;
}
.button {
  padding: 10px;
  margin:20px;
}

Layout

Depending on your design, this is where you might want to add some basic padding to your elements. If you want padding on every column, add it using the 'clever' selector below which selects every class that includes the word col, like col-3 and col-6.

/* ---- UNIVERSAL STYLES --------------------------- */
/* ---- Layout ---- */

header, footer {
padding: 5vh 5vw;
}

section {
padding: 10vh 5vw;
}

[class*=col] {
padding: 2%;
}

Then there might be some content that you need to move around or vertially center -- you can do this with gridlex. Utilise classes like grid-middle to move content around (re-read the CSS Layout section for a refresher!).

Typography

What do you want your text to look like. If you have already created a styletile, then you can pull styles from here. If not I would suggest playing with your typography styles in a tool like Codepen to see how you want it all to look. Here's a starter for reference that's based loosely on Medium.com -- http://codepen.io/instituteofcode/pen/eWzgWJ

/* ---- Typography ---- */

body {
  font-family: 'Lora', serif;
  color: rgb(60,60,60);
  font-size: 1.2rem;
}  

h1,h2,h3,h4,h5,h6 {
  font-family: 'Open Sans', sans-serif;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin: 0.3rem 0;
}

h1 {  font-size: 2.5rem; }
h2 {  font-size: 2.3rem; }
h3 {  font-size: 2.2rem; }
h4 {  font-size: 2.1rem; }
h5 {  font-size: 1.9rem; }
h6 {  font-size: 1.7rem; }

p {
  line-height: 1.8;
  margin: 1.5rem 0;
}

You might also want to style the following, depending on your site and whether you have a blog.

blockquote { ... } 
ul, ol { ... }
li { ... }
a { ... }
a:hover { ... }
hr { ... }

General Styles

Any other general styles of components used throughout your site, like buttons.

.button { ... }
.button:hover { ... }

.button-inverted { ... }
.button:hover { ... }

In this example you would do all of the general styles for the button under the button class, and then if you wanted an inverted style for dark backgrounds, you would change the colors under a button-inverted class. Then to add an inverted button in your html you would add:

<a href="http://www.website.com" class="button button-inverted"> My Website </a>

By now your header and footer should already be looking pretty good, but you probably need a few specific styles, so you can add them here.

Again try to minimize the amount of unique styles that you write. Rather than styling all the footer nav a and the header nav a separately, see what styles overlap first. Maybe the padding and hover effects overlap for instance and you could style them first using just nav a.

Step 7. Modular Elements

Now it's time to style each specific module from the list that you created earlier. While there are different approaches in how to organise this, generally it's best to structure by module(ie icon grid, banner, etc) rather than by section or page, that way if you want to add more pages or change the style of certain sections you can. This includes everything from the list you made above, like the contact forms, the icon grids, galleries or tiles.

Make this responsively as you go along.

Step 8. Unique Styles and specific pages

Up until this point almost all of your css should be relatively generic and reusable. Once you have created the modular elements, then it's time to make and specific style tweaks for particular pages or sections.

Step 9. Javascript & Interactive Elements

Let's add a bit of pizzazz. Maybe you want to add a burger menu, a slideshow or a unique feature, this is your time!

Step 10. Responsive & Browser Testing

As every browser interprets and renders your site differently, it's important to test your site in three ways:

  1. Responsively at different screen sizes
  2. On different browsers (ie Chrome, Firefox, Safari, Internet Explorer)
  3. On different devices (try at least 1 apple and 1 android device)

Common responsive changes that you might want to make using a media query are:

  • decreasing font size of headings or banners
  • changing text-alignment to be consistent
  • decreasing padding and making sure it's even
  • hiding certain elements

You'll also want to make sure that you have added any required vendor prefixes (lines of css that make certain properties work in specific browsers). You could look these up yourself, but it's far easier to just add a plugin to Atom called autoprefixer that will do it for you!

results matching ""

    No results matching ""