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.