Insha Profile picture
6 Jul, 11 tweets, 6 min read
9 Awesome CSS layout generators for beginners.
(Grid and Flexbox)

A Thread πŸ‘‡
Grid-Based Layout Generator

1️⃣ Layoutit

LayoutIt is an interface builder for CSS Grid and Bootstrap. You can quickly design web layouts, and get HTML and CSS code. πŸ“Ž
2️⃣ Griddy

Griddy is actually a free learning tool made for frontend developers who wanna understand more about CSS grids.

With this web app, you can add new items into the grid, remove other items, and resize them to fit any layout you want. πŸ“Ž
3️⃣ GridCSS

Use the Generator to create a Responsive website your way
Select the number of columns you want in a row and set the margin you want to use.
Automatic maths will show you magic. πŸ“Ž
4️⃣ CSS Portal

CSSPortal is home to a large range of CSS generators, tools, and resources. πŸ“Ž
Flexbox based Layout Generator


With you can create your layout with ease and visually learn about flexbox while doing it. Basically a flexbox playground for on-demand CSS generation. πŸ“Ž
6️⃣ Build with Flexbox

Flexbox is a layout system optimized for building user interfaces. Use this interactive reference tool to recall flexbox properties and experiment with layouts. πŸ“Ž
7️⃣ My CSS Builder

MyCSSBuilder is a one-stop-shop for developers, allowing you to quickly and efficiently generate CSS for your websites. πŸ“Ž
8️⃣ CSS

Here you can find popular Layouts & patterns made with CSS. πŸ“Ž
9️⃣ CSS Grid Template ( Quackit)

CSS grid layout allows you to create website layouts easily, by using a kind of "ASCII art" syntax. πŸ“Ž…
That's all for this thread. If you fount it useful, consider retweeting the first one. It would mean a lot! 😊

β€’ β€’ β€’

Missing some Tweet in this thread? You can try to force a refresh

Keep Current with Insha

Insha Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!


Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @Insharamin

8 Jul
Resources to excel in your Tech interview.

A Thread πŸ‘‡
1️⃣ Tech Interview Handbook

This repository has practical content that covers all phases of a technical interview, from applying for a job to passing the interviews to offer negotiation. πŸ“Ž… Image
2️⃣ JavaScript Algorithms

This repository contains JavaScript-based examples of many popular algorithms and data structures. Algorithms and data structures implemented in JavaScript with explanations and links to further readings. πŸ“Ž… Image
Read 11 tweets
3 Jul
7 meta tags to improve the optimization of your site.

A Thread πŸ‘‡
Why Meta tags are important?

-Meta tags are invisible tags that provide data about your page to search engines and website visitors.
-They can be optimized to highlight the most important elements of your content and make your website stand out in search results.
1️⃣ Title tag

Title tags are used by search engines to determine the subject of a page and are one of the first things that users notice in the SERPs.

Try to keep your title tag clear, descriptive, and usually not more than 55 characters.
Read 10 tweets
30 Jun
8 Essential Chrome extension for Web Developers.

A Thread πŸ‘‡
1️⃣ Fake Filler

A form filler that fills all inputs on a page with fake/dummy data. This productivity-boosting extension is a must for developers and testers who work with forms.
2️⃣ Window Resizer

This extension re-sizes the browser's window to emulate various resolutions. It is particularly useful for web designers and developers by helping them test their layouts on different browser resolutions.
Read 10 tweets
29 Jun
YouTube Channels to master Data Structures and Algorithms.

A Thread πŸ‘‡
1- DS & ALGO -: Jenny's Lectures πŸ“Ž Image
2-Algorithms and Data Structures -: Freecodecamp πŸ“Ž Image
Read 8 tweets
28 Jun
7 Awesome GitHub Repositories based on CSS.

A Thread πŸ‘‡
1️⃣ animate.css

This repository is a cross-browser library of CSS animations. As easy to use as an easy thing.

πŸ“Ž… Image
2️⃣ normalize.css

This repository is a modern alternative to CSS resets. Normalizes styles for a wide range of elements.

πŸ“Ž… Image
Read 9 tweets
24 Jun
Learn JavaScript by playing games.

A Thread πŸ‘‡
1️⃣ CodinGame

CodinGame offers up fun free games to help learn more than 25 programming languages, including JavaScript, Ruby, and PHP.

2️⃣ CodeCombat

CodeCombat is aimed at helping students embrace learning as they play and write code from the very start of their adventure. πŸ“Ž
Read 9 tweets

Did Thread Reader help you today?

Support us! We are indie developers!

This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!