HTML - Images

Your web site is really starting to come together but it’s lacking a little something: pictures! How can you have a web site if you can’t post cat photos? And beyond photos, images can be used for logos and design elements so let’s learn how to get them loaded in.

“What is the difference between PNG and JPG and in what situation would you use one versus the other?”
sample interview question

Pinterest is one of the fastest growing social networks, and Instagram was acquired by Facebook for a billion dollars. What do these two tech enterprises have in common? Yep, that’s right, they’re all about photos and images.

To begin adding images to your page, take the two Codecademy tutorials on Images and Clickable Images then read Shay Howe’s A Beginnere’s Guide to HTML & CSS Images, Audio, & Video to learn the nitty gritty. Watch out for our new friend, the float, in a couple of Shay’s examples.

Codecademy:Images and Clickable Images HTML & CSS for Beginners: Lesson 7 - Images, Audio, & Video

Let’s find out about the different types of images that can be used and when each is appropriate with Web Designer’s Guide to PNG Image Format and for a very serious look at the differences between PNGs and JPGs, watch this very captivating video PNG vs JPG

Web Designer’s Guide to PNG Image Format PNG vs JPG

Gotcha! Did you see the difference between the two sides of the screen at the end of that video? That’s a little web design humor for ya! Let’s start embedding images on our site. See you in the Challenge!

What's next? Do the challenge!

0 Comments — Be the first!