Building A Holiday Card Generator Part I: Coding Practice

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.

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.

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.

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>.

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

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.

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:

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:

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>

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.