6dfbfda1

OUR MISSION

We’re going to take your standard printed business card, and put it on the web. To do this, we’re going to cover all the basic HTML and CSS to code a sleek, modern design.

REQUIREMENTS

To complete this project you’ll need to install a code editor of your choice. My personal favorite is Atom, but here are a few suggestions so you can pick your favorite if you want:

Atom – https://atom.io/
Sublime Text – https://www.sublimetext.com/
Visual Studio Code – https://code.visualstudio.com/

I also suggest you get your favorite headshot, or your company logo ready to go, so we can use it in our design. Anything larger than 300px tall and wide will do. If it’s larger than 1000px, I suggest resizing the image so it’s not really slow to load.

RESOURCES

Fontawesome Icons: www.fontawesome.com
Groovepaper Pattern: https://www.toptal.com/designers/subtlepatterns/groovepaper/
Google Fonts: fonts.google.com

REFERENCE

You can see the finished product here: https://nateplusplus.github.io/cardtutorial/
You can dive into the completed code here: https://github.com/nateplusplus/cardtutorial

Crystal Feng

--

1