Welcome to the Basic Prep!
These free mini-courses will give you a strong foundation in web development. Track your progress and access advanced courses on HTML/CSS, Ruby and JavaScript for free inside our student portal.
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:
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:
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!
