Fork me on GitHub

Practical CSS Layouts

The best way to learn something new is to practice. When I started learning CSS Grid, I found that most of the articles/tutorials provide a very basic layout to make it easy to explain things. But those easy layouts do not cover real word challenges that we face while working on actual projects. So I decided to design some real pages to find out the real challenges while working with new CSS layout modules.

I am creating these pages using CSS Grid layout Module, Flexible Box Layout Module (Flexbox), and other new features in CSS. Also, I have shared my code in this github repository so that anybody can use the code for learning.

FAQ

I have used some open source designs available at different websites; due credit is given to each designer. Please get in touch with the respective designers if you need more details about licensing information for a design.

This is an open source project, you can use the code as you like. However because code in this project is experimental, I cannot guarantee its compatibility with all browsers and devices.

Yes, any contributions are welcome, if they are relevant to this project.

Yes, but all pages/designs will be available as part of this open source project. Alternatively I am available on upwork for paid projects.

I am curating a list of learning resources (Link to be added)

About Me

Hi, I am Jaspreet K. Jain, I am a Frontend developer, entrepreneur, co-founder @ HSR Technologies, and mother of a lovely son.

Follow me on twitter @JaspreetJain

Spread the word

Share my love for this project so that others can know and then use this code.

Kappe

Kappe is a creative multipurpose web template. With its grid-based design, you can convert into a personal blog or a business web page with a few clicks of the button.

Design: https://colorlib.com/wp/free-psd-website-templates/


Source Code Preview Page 1 Preview Page 2

Hexal

Hexal is a unique portfolio template that is guaranteed to leave an impression on anyone visiting your site. It is definitely perfect for web designers, graphic designers, and anyone with a creative mind.

Design: https://colorlib.com/wp/free-psd-website-templates/


Source Code Preview Page