This is part one of a four part tutorial that will teach you how to put together a holiday card generator you can share with friends and family. The tutorial will cover basic HTML, CSS, and Javascript to ensure that your creation will have proper structure, style and functionality. If you are interested in seeing what a finished product looks like, click here and scroll to the bottom to check out a generator our team put together.

Building a Holiday Card Generator

The Holiday Card Generator

Hello, welcome! It was around this time last year when I started prepping for the Web Development Bootcamp at Lighthouse, and I really enjoyed tinkering with small projects over learning syntaxes and walking through tutorials. It was nice to have some down time over the Holidays to focus on playing with the basics which helped build my excitement for starting the program. I put together this little tutorial that will hopefully give you the opportunity to tinker, with lots of resources to explore web development and design a little furthur.

If you're considering taking a coding Bootcamp, having a good grasp of structure, styling, event handlers and DOM manipulation can be endlessly useful, and isn't always covered in a prep course. It's worth practicing and fiddling with your CSS to get a feel for the sometimes frustrating complexities of building even a simple webpage.

What are we making? Seeing 'tis the season, let's put together a simple Holiday card generator! This will give you the chance to explore page structure with HTML, styling and animations with CSS and functionality with JavaScript.

- Project setup and deploying Github
- Building a basic webpage with HTML
- CSS frameworks, grids and responsive design
- CSS styling and animations
- The Document Object Model (DOM)
- html2canvas to save your code as a .jpg image

You can see what I've made for my card generator here, but the most important part of this tutorial isn't to copy what I've created - this is your project, and you should explore the limits of CSS to make something incredibly unique that represents your aesthetic. Everything on the page can be customized with your own code, this is just a guideline.

On top of the coding bits, we'll use Github for managing and hosting projects and how to leverage the mountains of code seasoned Developers have already built with CSS & JavaScript frameworks. While there's nothing overly complicated about what we're taking on, having an understanding of simple HTML & CSS will be very useful. If you haven't explored the basics yet, it doesn't take long to get caught up! Take a few hours to try out some courses like the HTML & CSS Essentials courses or some Codecademy modules and you'll be in good shape.

Project Setup

Alright, so let's get started with some simple project setup. You're going to need a basic code editor, something like Atom or Sublime. This is where you'll write your code and manage your project's files.

Most developers out there use a service like Github to store their project files and versions. It makes it easy to contribute to projects from all around the world and is a safe haven for your code should your computer bite the dust. If you want to get more familiar with Github, check out their traditional 'Hello World' tutorial.

Register for a Github account. We'll be using Github Pages to host our card generator later on in the project and it's useful to get familiar with Github's interface. To get started on our Holiday Card Generator, you'll need to download the boilerplate I've shared through my Github repository.

  1. Grab the starter files found here. Click the big green 'Clone or download' button and hit Download Zip, or clone using Git if you decide to take on the <a href='#stretch-goal'>stretch goal below</a>.

  2. Unzip the folder and open the project with your preferred code editor.

  3. Open the index.html file in your browser and take a look at the index.html file in your code editor - that's what we'll explore first.

Building Your Page Structure

I like to think that a webpage is like an apartment - HTML is your walls & furniture, CSS is your paint colours, animations are those smooth no-slam drawers, and JavaScript is the electricity that powers the joint. But before we can move in and start decorating, let's build our walls and set up the furniture.

When you open up your index.html file, you'll see some basic tags.

  • <title> & <meta> tags which will help search engines like Google show your page to the right people.

  • <link> tags to import your CSS files

  • <body> tag to hold your page structure

  • <script> tags to import your JavaScript files

Notice in our <link> tags, we've included a stylesheet called skeleton.css. Skeleton is a CSS framework of premade styles to simplfy building our page. There are many different CSS frameworks available, like the popular Bootstrap or Bulma. To get an idea of some of the basic pre-build styles Skeleton gives us, you can visit their documentation.

One example of the default styling are with forms. In your <body>, add a basic form that will accept the data for the message on your card, like the greeting title, image, your message content and your signature.

<form>
    <label for="title">Card Title:</label>
    <input type="text" id="title" name="title">
    <label for="from">From:</label>
    <input type="text" id="from" name="from">
    <select id="image">
        <option value="./img/LHL-Christmas-Photo.jpg">Human Family</option>
        <option value="./img/our-family.jpg">Dog Family</option>
    </select>
    <label for="msg">Message:</label>
    <textarea id="msg" name="message"></textarea>
    <button id="save-button">Save Card</button>
</form>

Make sure you refresh the index.html page in your browser to see your changes.

Here's where we can start to see the benefits of using a CSS framework - the default styles from our framework are applied on our new form giving them a much smoother feel than the browser defaults.

<center>
    <figure>
        <img src="https://i.imgur.com/aG32HYx.png" style="width: 100%">
        <figcaption>Browser default form styling.</figcaption>
        <br>
        <img src="https://i.imgur.com/Db385XQ.png" style="width: 100%">
        <figcaption>Skeleton.css default form styling</figcaption>
    </figure>
</center>

Another benefit of using a CSS framework is a pre-defined grid system. A grid system allows us to easily divide our page into rows and columns that will occupy a set width depending on which column size you choose. Visit the documentation for Skeleton's grid system for a detailed visual their columns and lets apply that to building our page and card's structure.

Looking at our form, it seems like it would look better split into two columns. Create a form container to wrap the whole row and then split the form elements into two half sized columns:

<div class="row form-container">
    <div class="one-half column"></div>
    <div class="one-half column"></div>
</div>

Now let's add our form code into our new columns:

<div class="row form-container">
    <div class="one-half column">
        <form>
            <label for="title">Card Title:</label>
            <input type="text" id="title" name="title">
            <label for="from">From:</label>
            <input type="text" id="from" name="from">
            <label for="image">Background Image:</label>
            <select id="image">
                <option value="./img/LHL-Christmas-Photo.jpg">Human Family</option>
                <option value="./img/our-family.jpg">Dog Family</option>
            </select>
        </form>
    </div>
    <div class="one-half column">
        <form>
            <label for="msg">Message:</label>
            <textarea id="msg" name="message"></textarea>
            <button id="save-button">Save Card</button>
        </form>
    </div>
</div>

Perfect! Our forms should now be split into two lovely columns, leaving us more space to build our card container. You can take some creative liberty for your card layout and build whatever structure you'd like, but I'm going to make two-column card.

My card will eventually look like this:

img

I set up my card container with a one-third column to hold the text content and a two-thirds column to hold the image.

<div id="card-container" class="row">
    <div class="one-third column text-container">
        <h2 id="card-title">Happy Holidays!</h2>
        <p id="card-msg">Lorum Ipsum and a Happy New Year! We would like to 
        thank our entire community for their support this year. We enjoyed all 
        the challenged and achievements 2017 brought our way and we’re looking 
        forward to what 2018 will bring.<br><br>May your holidays be filled with 
        code and cocoa!</p>
        <h3 id="card-from">Love Lighthouse Labs</h3>
    </div>
    <div class="two-thirds column">
        <img src="./img/LHL-Christmas-Photo.jpg" id="card-image">
    </div>
</div>

<center>
    <figure>
        <img src="https://i.imgur.com/ray2gWl.jpg">
        <figcaption>A basic two-column card container.</figcaption>
    </figure>
</center>

Looking sharp 😎. We've split our form and card containers into organized columns, and we have the start to a wonderful webpage. The boilerplate project that we're working out of includes some basic CSS styling for this card layout, but we'll be tackling customization with CSS shortly so don't worry if this doesn't quite fit your vision.

If you want to dive deeper into the world of structuring your HTML layout using CSS, you can learn about building your own grid system, or I encourage you to explore Flexbox or CSS Grid as newer alternatives to using a grid framework.

Stretch Goal: Using Git to Manage Your Project

While it's in no way necessary for this project, learning the basics of Git early on will help you build your skills using the best practices of professional developers. Try learning enough about Git to manage your project on Github using Git from the Command Line (😅)!

Git is used for something called Version Control which allows developers to easily keep track of project versions, see changes between old and new code files, segment projects into branches and so much more. Git is most often used as a Command Line Tool, which at first can seem intimdating but very quickly makes you feel VERY COOL. Like hackerman cool.

To get started, you'll need to download Git and get familiar with the basic commands. You can get Git direct from the source here or take a look through Git - the simple guide. If you want to dive a even deeper, make your way through Git-it, a simple tutorial that walks you through how to leverage the benefits of using Git.

Try cloning the boilerplate repository from the command line: git clone https://github.com/drhaliburton/card-generator-boilerplate