Learning HTML and CSS Code: A Web Developer's Valentine Project

It can be fun to write and play around with code. A Web Dev's Valentine was a web designing activity recently created by Matt Smith, also known as AllThingsSmitty. This project can be an amusing way to learn code while also making something nice for your special someone. In fact, you can send this entire project to your special someone if they also happen to like coding or are interested in learning.

The point of this project is to witness, and possibly change, the code of a Valentine's eCard. Interestingly, this is based on a tangible Valentine's card that looks exactly the same. There's even a little separately-coded envelope behind it. Fun fact: you can remove the envelope by going to the CSS portion, adding display: block; under .envelope, and then replace .envelope with .card:before. It's a pleasant little task just in case you want to do away with the envelope.

There are two main sections you can fiddle around with: the HTML and CSS sections. For those who may not know, HTML mainly deals in the text portion of a webpage. CSS integrates the style of the text and the entire website in general. It mostly deals with colors, shapes, sizes, font, and alignment, just to name a few. CSS contains a lot more lines of code, even though it looks like a small, simple card. It affects the colors of the words "CSS" and "HTML" on the card. It is also the reason for the little heart on the bottom left of the card.

The HTML section allows you to apply the CSS to the finished product. This section is where the words "You are the CSS to my HTML" placed, but without adding the CSS, it would just be plain text. The great thing about this activity is that someone who doesn't know code stumbled upon this, they could probably figure some of this out by looking back and forth between the HTML and CSS sections. A Web Dev's Valentine project is recommended for those who want to play around with their coding skills while also having the chance to send something nice to someone else.