"I found out about your blog through the Three Weeks Three page in ThoughtWorks WeChat Channel, and it was very insightful to read it. The way you think about the issues and the way you explain them is fascinating and enjoyable to read, thanks." -- Hongjiang Zhang
"Mr Qiu: Hi, I was surprised to see the 3 weeks 3 pages project on your podcast by chance, and I have been looking for such a tutorial." -- Mor1999
"...I just came here after seeing your book and learned a lot from your book, thanks :)" -- Dai Zhi Lian
"...I purchased your 3 weeks 3 pages and have benefited a lot..." -- Douche
"...I have received (gained) a lot from reading your 3 weeks 3 pages..." -- tkin
"...I downloaded the book from gitbook and paid for another one from selfstore..." -- Evoque
Similar to the first edition, the book is divided into three main chapters. In fact, it is a process of implementing different styles of design, three projects in three weeks time.
The first chapter is about a typical landing page. It includes a navigation bar, a hero banner and a news list. Here we go through some environment setup, including the configuration of the tools and explanation of the basics. By the end of the first chapter, you will have learned how to deconstruct a design, write the corresponding HTML, and implement common layouts through flex layouts. Also, you will be able to publish your website to the public and allow your friends or colleagues to access it.
Chapter two is a conceptual design for Instagram. It includes a vertical navigation bar, card design and more complex typography and layout. We will explore more about flex layout and grid layout. In addition, we will learn about the use of font icons and the priority of selectors in CSS.
Chapter three is a page with a responsive design. We will complete the interface on the small screen with a mobile-first strategy first, and then overrides styles to adapting to desktop version through media queries. In the process, we'll learn how to simplify HTML writing using Emmet, use CSS variables to eliminate duplicate code and much more. At the end of the project, we will also learn some foundamental design principles so that you can be more confident about how to implement a page on your own without a mockup.
The first edition had two projects plus a hands-on (build-your-own) practice. The new edition has been modified to three different projects, placing the exercises section at the end of each chapter. Regarding the distribution of knowledge, the new edition is more evenly distributed to ensure that each chapter covers some important points.
In addition, when re-reading the first edition, I found many incorrect assumptions about beginners' knowledge. Many concepts unfamiliar to beginners were not explained enough, as well as problems such as the slightly large amount of code.
In rewriting it, I tried to add as much background knowledge as possible to make each step easier for starters.
I hope you can enjoy the new edition just as you did for the first one.
August 2022 in Melbourne
Dive into the '3 Web Designs in 3 Weeks' tutorial series, a comprehensive course designed to equip you with the fundamental skills for creating a production-ready static website. From the basics of HTML to advanced concepts, this series will guide you through each step of web development.
This chapter is all about preparing for success. You'll learn how to set up a robust development environment, including configuring your editor for efficient coding and using browser tools to aid your design process. Even if you're familiar with these basics, a quick review can provide new insights.
This section will introduce you to HTML and CSS in the simplest way possible. If you have some basic knowledge of HTML and CSS, you are welcome to skip this section.
In this section, we will delve into the basics of HTML and CSS to create a functional and visually appealing navigation bar for our website. You'll learn how to structure your navigation bar in HTML and style it effectively with CSS, including an introduction to the Flexbox layout model.
This chapter focuses on creating an impactful Hero Banner section for your website. You'll learn advanced techniques in using the Flexbox layout, along with mastering relative and absolute positioning to craft a captivating and visually dynamic hero section.
This chapter focuses on implementing the 'Recent News' section of your website. We'll continue to refine our understanding of the Flexbox layout to effectively organize multiple news items. Additionally, we'll explore how relative and absolute positioning can be used to enhance the presentation of news articles.
The final chapter in our journey is perhaps the most exciting one—publishing your design. This is where you bring your project to the world. You'll learn how to deploy your static site for global access, and the best part? We'll explore cost-effective (even free) tools to make your website live.