Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Practical CSS Layouts

Project Homepage: http://jaspreetkaur.com/practicalcsslayouts/

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.

Layouts

Layout 1 - Page 1 | Page 2

Layout 2 - Page 1

FAQs

Can I use these designs?

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.

Can I use this code?

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.

Can I contribute?

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

Can I provide you a design for coding?

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

How can I learn CSS Grid Module?

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 @jaspreetkjain

Spread the word

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

Releases

No releases published

Packages

No packages published