Build a Valentine's Day eCard using 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.
Our Card's Structure (HTML)
We'll be using the following HTML tags to develop our card:
Title:
<title>Heading:
<h1>Image:
<img>Paragraph:
<p>Divider:
<div>Anchor:
<a>
Many of these tags will be styled using CSS. We'll also fancy it up by applying a border around the entire webpage, which is strictly a CSS style.
Add basic structure
Copy and paste this basic webpage structure into the HTML pane within CSSDeck.
<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> </body></html>
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".
Congrats! You just made a webpage. (Your first?!)
http://cssdeck.com/labs/kz8sc3zw
Title
Add a title to your card between the opening and closing <head> tags:
<title>Happy Valentine's Day!</title>
Heading
Update the heading in your card:
<h1>Happy Valentine's Day</h1>
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!
http://cssdeck.com/labs/62mmslgp
Image
Insert an image (we designed this one for you) just below the main heading (the <h1> tag):
<img src="http://i.imgur.com/a2tjOcm.png">
Our card after adding in the image:
http://cssdeck.com/labs/ohqmko16
Paragraph Text
Say something sweet. Write your personal message within the paragraph text and insert it below the image:
<p>Write your personal message here</p>
Tip: Replace "Write your personal message here" with your actual message. Show some love, or some wit :) A suggestion: "You are the HTML to my CSS."
http://cssdeck.com/labs/ofag2kig
Divider
Let's create a button using the divider tag:
<div>click here to get your present</div>
Doesn't look much like a button yet. It will soon. Trust me.
http://cssdeck.com/labs/1opjhgbg
Anchor
Finally, surround the divider tags with an <a> tag to create a link:
<a href="/"><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
http://cssdeck.com/labs/m9d3pqjy
Well, we've added all the HTML structure to our page:
Check out the fullscreen preview here.
Kind of bland, to put it nicely. Fortunately, we can quickly change that with CSS!
Our Card's Style (CSS)
From the size of the text to the background colors to the positioning of HTML elements, CSS gives you control over almost every visual aspect of a page.
CSS and HTML work in tandem (again, like you and your partner). CSS styles (or rules) are applied directly to HTML elements using selectors.
We're going to add three selectors to our HTML page:
headermsgbutton
Selectors are used to change the style of specific elements in the HTML.
To add the selectors to the elements on our page, insert them in the opening tags:
Happy Valentine's Day!<p id="msg">Write your personal message here.</p><div id="button">Click here to get your present.</button>
Add them now. Your code should now look like this.
Header
Here, we are increasing the size of the font, changing the thickness of the text, and adding some space to the top of our header selector.
Copy and paste this into the CSS pane within CSSDeck.
#header { font-size: 68px; margin-top: 50px; font-weight: normal;}What's going on?
We have the
#headerselector, which is associated with the same selector in our HTML document, followed by curly braces.Inside the curly braces, we have properties, which are descriptive words, like font-weight, font-size, or background color. In our case, we have
font-sizeandmargin-top.Values are then assigned to each property, which are preceded by a colon and followed by a semi-colon.
Tip: http://cssvalues.com/ is an excellent resource for finding the applicable values given a CSS property.
Here is our card with styling applied to the header:
http://cssdeck.com/labs/ej1kciif
Paragraph Text
Update the style of your personal message. Copy and paste this into the CSS pane within CSSDeck:
#msg { font-style: italic; font-size: 36px; color: #f12469; margin-top: 50px;}This changes the color of our text and italicizes it. It also changes the size of the font and adds a margin to the top of our message.
Here is our card with the style changes applied to our message:
http://cssdeck.com/labs/brkeecsj
Divider
Let's make that button look like a button. Copy and paste this into the CSS pane within CSSDeck:
#button { border-radius: 30px; height: 40px; width: 335px; background-color: #f12469; font-size: 20px; color: #ffffff; margin:0 auto; padding-top: 15px; margin-bottom: 50px;}With this, our button becomes rounded. We set its height and width, and applied color changes.
Here is our card with the updated styling for our button:
Have some fun with this. Change the
background-coloras well as the fontcolor.
http://cssdeck.com/labs/zh2itiuj
The text is still a bit off, and our button could still look better. Let's fix that.
Additional CSS
Copy and paste this into the CSS pane within CSSDeck.
body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif; border-width: 20px; border-style: solid; border-color: #fcd2d8; text-align: center;}a { color: #ffffff; text-decoration: none;}Try changing the border values. Play with the pixel size until you get it to be the right width. Try a dashed ordotted value for the style, and find a pretty color here.
Pro Tip: Use that special someone's favorite color! (You should know this ... and if you don't, find out quickly.)
Here is our finished card:
http://cssdeck.com/labs/npulm7vr
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.
You must Sign up as a member of Effecthub to view the content.
A PHP Error was encountered
Severity: Notice
Message: Undefined index: HTTP_ACCEPT_LANGUAGE
Filename: helpers/time_helper.php
Line Number: 22
11500 views 2 comments
You must Sign up as a member of Effecthub to join the conversation.