This book provides a practical hands-on project and the step-by-step visually coding guide for the brand website with CSS Grid.

XD and Figma design files, specs, assets, and codes included. FREE on Kindle Unlimited.

■ What you'll learn

• •  Basic CSS Grid layout (for mosaic layout, using as layout guidelines, layered multiple grids, and more)
• •  Coding the Design from scratch
• •  Mobile-first and Responsive Layout
• •  HTML with semantics and Simple CSS management

■ Who this book is for

• •  Who want to learn web development with CSS Grid by doing
• •  Who want to practice your HTML & CSS skills

■ Assets provided as Download

• •  XD and Figma design files
• •  Design specs with additional notes
• •  Image assets
• •  Complete HTML and CSS code (Case study's code explained in this book)

■ Level for reference

• •  Level 2 (it's a Basic level in 5 scales)

■ Table of Contents
▼ Design Mockup and Specs
▼ Case Study

• •  STEP 1 ― Analyzing the Design
• •  STEP 2 ― Start Coding
• •  STEP 3 ― Page Grid
• •  STEP 4 ― Parts Grid
• •  STEP 5 ― Main Content (Header Image and Article)
• •  STEP 6 ― Photo Gallery
• •  STEP 7 ― Hero
• •  STEP 8 ― Message
• •  STEP 9 ― Navigation Menu
• •  STEP 10 ― Finishing and Final Checks

▼ APPENDIX

• •  How to use Adobe XD
• •  How to use Figma
• •  How to publish a website on Netlify
• •  Key points of coding
• •  Download and Support

This book is the second volume of the "Practical Hands-on Series."

=======================================

― This book is published under the Print Replica format. The page layout is a single page view style to make reading easier.

― You can read the Print Replica Book via the Free Kindle Reading App (for PC, Mac, Android, iOS) and Fire Tablets.

― There are cases where some functions (link, highlighting, search, dictionary, quotes) don't work. You can't zoom only text.