Falling in Love with HTML and CSS

Valentine’s Day is just around the corner, and there's no better way to someone's heart than a handmade card — which is exactly what we're making in this tutorial. Using the power of HTML and CSS, you'll learn how to develop a website that doubles as a v-day card to wow that special someone in your life. (Disclaimer: I don't advise giving this as your ONLY V-Day gift.)

HTML and CSS

Websites are made up of many things, but HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) are the two main components. Together, like you and your partner, they are the building blocks for every single webpage on the Internet.

Here's a quick overview: HTML provides structure, while the CSS is used for styling and making websites look pretty.
For more information on HTML and CSS basics, check out the beginner tutorials here and here.

Think of a classic Valentine's Day card. It's made up of many attributes, such as text, images, and often a poem. In the world of HTML, such attributes are the elements of a webpage. Meanwhile, each of the card's attributes differ in size, shape, or color. In the web world, CSS is used to define the look and feel of a webpage.

Now let's turn to an actual web page ...

The image above is an example of what we're going to be creating, using just HTML and CSS. You can also view the webpage here.

Setup

For this tutorial, we'll be using an online HTML, CSS, and Javascript code editor called CSSDeck. Sign up for a free plan here. After signing up, navigate to the homepage and click the "New" button to create an environment for us to work in.

You should see four panes. The three smaller panes on the left are for entering your HTML, CSS, or Javascript code, while the large pane displays a preview of the how the webpage will actually look.

Workflow

We'll be creating this web page iteratively, step-by-step. In other words, we'll add a line of code then discuss what it does. I've included links to the updated code after each step.

Add basic structure

This structure is commonly referred to as a boilerplate template. Such templates are used to speed up development so you don't have to code the features common to every single webpage each time you create a new page.

What's going on in the boilerplate?

The first line, <!DOCTYPE html> is the document type declaration, which tells the browser the version of HTML the page is using (HTML5, in our case).

<html> informs the browser that all code between the opening and closing, </html>, tags is HTML.

The <head> tag contains links to CSS stylesheets and Javascript files that we wish to use in our web page, as well as meta information used by search engines.

All code that falls within the <body> tags are part of the main content of the page, which will appear in the browser to the end user.

This is how a standard HTML page is structured.

Add the following element to the page within the <body> tags:

<h1>Hello, World</h1>

Check out the preview pane. You should see the header text, "Hello, World".

Title

Heading

Headers include the <h1>, <h2>, <h3>, <h4>, <h5> and <h6> tags. <h1> is the main heading and the remaining headings decrease in size, with <h6> being the smallest. It's best practice to use the <h1> tag only once per page, while the other tags can be used any number of times, but they should always be in order. In other words, <h3> should be a sub-heading of <h2> and <h4> should be a sub-heading of <h3>, and so forth.

Want it to say something different? Just change the text between the tags!

Divider

Anchor

Finally, surround the divider tags with an <a> tag to create a link:

<ahref="/"target="_blank"><div>click here to get your present</div></a>

You also need to insert a link to replace the slash. You can use something like this cute Google video. Or, maybe you could link to a dinner reservation confirmation page for the 14th. To really wow your partner with your DIY gift, break out the guitar and create your own video to link to! <3

Sharing

Show that you care. Share. In CSSDeck, click the "Share" button. Copy the URL for the "Full Screen Result." Then email/tweet/post the link to that special person in your life.

Next Steps

Did you customize the card? Do it again. Share it again. That special someone deserves it, right?

Need a challenge? Design your own card from scratch and code it up!

Want to learn more? Check out this awesome Javascript/jQuery tutorial.

Conclusion

Great work on this. Thanks for learning with us. Please let us know (@thinkful) if the card helps out this Valentine's Day. If you're interested in a career in web development, learn about ourWeb Development Bootcamp.