Tech Tuesday: Web Colors & Icons

To learn more about Web Design, I’m:

  • Completing the Udemy course “Build Modern Responsive Website with HTML, CSS3 & Bootstrap” by Irfan Dayan.
  • Continuing to practice my skills using the Brackets code editor.
  • Playing around on the Lrn app whenever I have a free moment.
  • Listening to the Code Newbie podcast.
Disclaimer:

These are not affiliate links and I was not compensated for citing these resources. My takeaways are also not comprehensive of the resources I share. If you like what you read, please support the creator.

Web Colors & Icons

In my Udemy class, I’m working on selecting color schemes and icons for my website. I didn’t think I’d be that interested in spending much time on this, but the tools are so easy and fun to use, I found myself spending more time playing around than I expected.

First, I found a color scheme on Adobe Color CC that I liked.

screen-shot-2017-06-20-at-5-41-50-pm.png
Then, I used a Chrome extension recommended in the course, called Colorzilla, to ID the colors in the color scheme. This tool gives you the color name and RGB and HEX codes.

I added the color codes to my CSS file (using Dayan’s recommended formatting – which I’m ALL ABOUT because it makes my code incredibly easy to read)!

After that, I downloaded Font Awesome to add the icon library to my index.html file and played around adding icons in my code.

SUPER FUN!

New Skill Learned: CSS: Embedding web colors | HTML: Embedding icons

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s