4. Web Images
HTML/CSS Lesson Categories
Images make websites come alive. These lessons cover the two main types of web images — embedded HTML images and CSS background images — along with how to prepare and optimize images for the web, create a hero image, build a simple logo, and add a JavaScript photo gallery to your site.
Ready to test your knowledge?
4.1 Background vs. Embedded Images
Learn the key difference between HTML image tags and CSS background images, and how to choose the right one for any situation. Start the Background vs. Embedded Images Lesson
4.2 Organizing Your Image Files
Learn best practices for naming, sizing, and organizing image files so your projects stay clean and your image links never break. Start the Organizing Your Image Files Lesson
4.3 HTML Embedded Images
Master the img tag and its key attributes (src, alt, width, and height) so you can place images anywhere on your webpage with confidence. Start the HTML Embedded Images Lesson
4.4 CSS Background Images
Learn how to set, size, position, and repeat background images using CSS to create hero sections, textured backgrounds, and more. Start the CSS Background Images Lesson
4.5 Preparing Images for Web Use
Learn the three things every web image needs: the right format, the right dimensions, and a lean file size, so your pages load fast and look great. Start the Preparing Images for Web Use Lesson
4.6 Two Ways to Create a Hero Image
Learn two techniques for building a full-width hero image section, the kind that greets visitors at the top of nearly every modern website. Start the Two Ways to Create a Hero Image Lesson
4.7 Building a JavaScript Photo Gallery
Put your HTML, CSS, and a little JavaScript together to build a clickable photo gallery, a great feature for any portfolio or photography site. Start the Building a JavaScript Photo Gallery Lesson
4.8 How to Create a Simple Logo
Discover beginner-friendly approaches to creating a clean, professional-looking logo for your site. No design software or art degree required. Start the How to Create a Simple Logo Lesson