HTML & CSS Coding Practice BookPractical Hands-on Series

Series of Practical Hands-on Coding a Website
from Design Mockup and Specification

When we code the website, it's required to reproduce the design of mockup, but it's not a goal.

How will the code on that page be used?

  • Be extended in the future?
  • Be compatible with what kind of browsers?
  • Be combined with such as React?
  • Be built into CMS?

Etc... We need to select the best code for the situations.

However, it's not easy to learn these coding skills because the only way to learn is to create many different websites.

That is why they say that getting more practical projects done is the best way to learn to code.

Nevertheless, it would be great if it's possible to get some experience before taking on a job.

The Coding Practice Book is perfect for such a case. With this book, we would like you to experience various web development projects in practice.

Now the first one is available.

HTML & CSS Coding Practice Book 1

Practical Hands-on Project with Flexbox


This book covers basic website development from the design mockup and is suitable for mastering the basic responsive web design.

What this book covers

The Coding Practice Book covers:

  • Design Mockup (created with Adobe XD)
  • Design Specification
  • Case Study (one of the coding examples)

The website provided with a mockup is not a simple one for learning, but one with a detailed design on a practical level.

We plan to cover more design variations, both standard and trendy.

Also, some cases seem simple, but they will become difficult to develop according to the specification.

There are many ways to use this book. Trying to reproduce with following the specification is one of them. Getting creation flows, approaches, techniques by referring to the case study is also good.

What the level this book has

When developing a website, start coding based on the design mockup and specification. However, there are no hints or explanations.

The Coding Practice Book has a five-scale level designed for such a situation. It's a level based on the difficulty and effort required to develop a website according to the design mockup and specification (without the case study explanation).

So it needs to have basic coding skills with HTML and CSS, even if it's Level 1 (the most simple in our comparison).

Please note that it's not the difficulty level of the case study explanation.

What the Case Study is

This book explains one of the coding processes step-by-step as a Case Study to turn the design mockup into HTML and CSS according to the specification.

The coding process is explained step-by-step in a full-color visual format.

We start by analyzing the design mockup. Then determine the coding plan, write codes, build the website, and validate the completed one.

In this way, we explain the workflow for developing a website in detail. Some elaborate elements make the project more practical than common learning materials. We'd like you to use it as a reference for points to be concerned about or pay careful attention to developing websites.

More titles will be available in this series.