Falling in Love with Markup

Some folks wear their heart on their sleeve while others embed it in their markup.

Scroll down...




Show us some love markup!

See the Pen CSS3 Heart by Bideo Wego (@BideoWego) on CodePen.

In this lesson, we will introduce you to markup and let you elope together. There is just so much out there for you to see and do together! But don't take our word for it! We're going to give you the chance to see for yourself!

Exploring Markup on CodePen

You may have already heard of the popular CodePen site that allows you to create, explore and share chunks of front-end code. Developers from all around use CodePen for fun and to show off their skills! Now it's your turn!

Create an account on CodePen or simply login using Github and let your curiosity run wild! Well not too wild... avoid any examples that use JavaScript for the time being. We're only eloping with markup!

Here are a few great starting places:

  1. HTML5 Pens
  2. HTML Form Pens
  3. HTML Table Pens
  4. CSS3 Pens
  5. CSS Animation Pens
  6. CSS Template Pens

Forking Pens

Your task is to pick at least 3 noteworthy pens and fork them using CodePen's fork button located at the top of the menu of the Pen's viewing page:

CodePen fork button

Once you have them forked, play around with them! Change around and tweak the styles. If you're unsure how to, just explore and alter the CSS property values and add/remove elements. Move the markup around and create your own styles! Once your fork a pen, it's yours to do with as you please so enjoy!

Wrapping Up

This lesson was all about fun. Hopefully you had it! CodePen is a huge ecosystem of front-end goodies. You could spend hours exploring but now it's time to dive into the details. You've been formally introduced to markup and styling, you've also had some good times on the dance floor and a beverage or two over dinner. Now it's time to begin the rest of your lives together in HTML and CSS harmony!

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Introduction to HTML5