Build a HTML5 and CSS Website From Scratch by Raphael Heide is your ultimate guide to creating stunning, modern websites from the ground up—no prior coding experience required! Whether you're a beginner eager to launch your first site or a budding developer looking to master the essentials, this book offers a hands-on, step-by-step approach to building professional websites using HTML5 and CSS.
Dive into the fundamentals of HTML5 to structure your web pages with semantic elements, forms, and multimedia, then harness the power of CSS to add vibrant styles, responsive layouts, and dynamic transitions that bring your site to life. With clear explanations, practical examples, and real-world projects, you’ll learn how to craft a fully functional website—complete with a blog and online store using WordPress, plus custom features coded in PHP. From saving your first .html file to styling with .css or style tags, this book walks you through every detail, ensuring you understand both the "how" and the "why" behind each step.
- What is a Website?
- How Browsers Render Websites
- Introduction to HTML5
- Choosing a Text Editor (VS Code, Sublime Text, etc.)
- Installing a Browser for Testing
- Folder Structure for Your Project
- Anatomy of an HTML Document
- HTML5 Doctype and Document Structure
- Basic HTML Tags (html, head, body, etc.)
- Comments in HTML
- Semantic HTML5 Elements (header, main, section, article, footer, etc.)
- Headings (h1 to h6)
- Paragraphs, Line Breaks, and Horizontal Rules
- Ordered, Unordered, and Description Lists
- Creating Hyperlinks (a)
- Linking to External Pages, Internal Sections, and Emails
- Adding Images (img) and Optimizing Them for the Web
- Using Figure and Figcaption
- Setting Image Dimensions (Width and Height)
- Using Responsive Images (srcset and sizes)
- Compressing Images for Faster Loading
- Creating Forms (form)
- Input Types (input, textarea, select, etc.)
- Form Validation with HTML5
- Buttons and Submission
- Adding Videos with video
- Supported Formats and Codecs
- Adding Controls, Autoplay, and Looping
- Using Poster Images
- Adding Audio with audio
- Embedding YouTube Videos and Other External Media
- Creating a Simple Image Gallery
- Adding a Lightbox Effect for Pop-Up Images
- What is CSS?
- Inline, Internal, and External CSS
- CSS Syntax and Selectors
- Changing Font Family, Size, and Weight
- Text Alignment and Decoration
- Using Google Fonts
- Setting Colors (Hex, RGB, HSL)
- Background Colors and Images
- Introduction to Flexbox
- Linear and Radial Gradients
- Understanding Margin, Border, Padding, and Content