Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying Practical HTML and CSS
  • Table Of Contents Toc
Practical HTML and CSS

Practical HTML and CSS - Second Edition

By : Brett Jephson, Lewis Coulson, Ana Carolina Silveira
4 (1)
close
close
Practical HTML and CSS

Practical HTML and CSS

4 (1)
By: Brett Jephson, Lewis Coulson, Ana Carolina Silveira

Overview of this book

In the ever-evolving landscape of web development, mastering HTML and CSS is crucial for building modern, responsive websites. This comprehensive guide equips you with the essential knowledge and skills you need to excel in web design and development. Starting with the foundational principles of HTML and CSS, the book swiftly advances to cover more complex topics, providing a thorough understanding of these vital technologies. You’ll learn how to build websites from scratch, create intuitive user input forms, and enhance web design by integrating multimedia elements like videos, animations, and themes. Emphasizing responsive web design principles, this book teaches you how to create layouts that flawlessly adapt to different devices using media queries. You’ll also get to grips with SEO essentials to optimize website visibility and search engine rankings. A dedicated section guides you through performance optimization techniques to ensure your websites deliver a smooth and lightning-fast user experience. By the end of this HTML and CSS book, you’ll have developed confidence in your web development skills, and you'll be well-equipped to build modern, visually appealing, and high-performing websites.
Table of Contents (20 chapters)
close
close
Lock Free Chapter
1
Part 1: Introducing HTML and CSS
5
Part 2: Understanding Website Fundamentals
9
Part 3: Building for All
13
Part 4: Advanced Concepts

Introducing wireframes

When working on commercial projects, it is common for web page designs to be provided to web developers in the form of a wireframe. A wireframe is a low-fidelity design that provides enough information about a page for the developer to start coding. Usually, they will not include much visual design information and are focused on the main structure of a page.

The following figure is an example of a wireframe for a new home page:

Figure 2.12: Example of a wireframe

Figure 2.12: Example of a wireframe

Activity 2.01 – video store home page

Suppose you are a frontend developer working for a tech start-up. You have been asked to build a home page for the online video store. You have been given the following wireframe from the UX designer:

Figure 2.13: Wireframe as per the UX designer’s expectation

Figure 2.13: Wireframe as per the UX designer’s expectation

Using your newly acquired HTML5 knowledge, you can start to convert the wireframe into working HTML code. At this stage, you...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
Practical HTML and CSS
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon