Share to EffectHub.com

You can earn money or coins from your share:)

Tips: you can use Sparticle for uploading away3D effects.

Tips: you can download Sparticle for uploading effects.

Tips: The ActionScript editor is supporting Away3D, Starling, Dragonbones and Flex frameworks.

Tips: paste the web page URL then click button:)

EffectHub.com: Your Best Source for Gaming
Login    or

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

final_card

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: You must Sign up as a member of Effecthub to view the content.

5245 views    0 comments

You must Sign up as a member of Effecthub to join the conversation.

roens

A PHP Error was encountered

Severity: Notice

Message: Undefined index: HTTP_ACCEPT_LANGUAGE

Filename: helpers/time_helper.php

Line Number: 22

2014-02-13
>>Back to HTML5 group


Latest Topics


Sponsor


They are waiting for your help



Guess You Like

  1. colorful bubble
  2. treeLeave1
  3. particle_texture

Share

Join Effecthub.com


Or Login with Your Email Address:

Or Sign Up with Your Email Address:
This field must contain a valid email
Password should be at least 1 character

A PHP Error was encountered

Severity: Notice

Message: Undefined index: HTTP_ACCEPT_LANGUAGE

Filename: views/footer.php

Line Number: 6

A PHP Error was encountered

Severity: Notice

Message: Undefined index: HTTP_ACCEPT_LANGUAGE

Filename: controllers/topic.php

Line Number: 21

A PHP Error was encountered

Severity: Notice

Message: Undefined index: HTTP_ACCEPT_LANGUAGE

Filename: controllers/topic.php

Line Number: 85