مجتمع المصممين العرب retweeted
Jun 13
⚡إنشاء تخطيطات CSS Grid معقدة بالسحب والإفلات
أداة cssgrid أداة بصرية مجانية تُنشئ كود CSS Grid بالسحب والإفلات
حدّد عدد الأعمدة والصفوف، ضع العناصر في المواضع المطلوبة، واحصل على الكود جاهزاً. تنتهي إلى الأبد من كتابة grid-template-areas باليد والتخمين.
codingmonth.com/tools/QfYsSb…
1
2
376
Print elements in reverse
Sum of array elements
• Explored how RAG systems enhance LLMs by retrieving relevant information before generating respons
• Continued reading Atomic Habits aloud
Always learning, teaching, and growing.
#CSSGrid #Recursion #AI #RAG #LLM #BuildInPublic
13
• Continued reading Atomic Habits aloud 🧠
Learning, teaching, and improving every day.
#CSS #Flexbox #CSSGrid #Python #WebDevelopment #BuildInPublic
2
Jun 9
【今日のプログラミング豆知識 💡】
◆ CSSグリッドとフレックスの使い分け
レゴブロックを並べるとき、一列に並べるのと、縦横に組み立てるのでは作り方が違いますよね。CSSのレイアウトも同じ考え方です。
Flexboxは「1方向の整列」が得意で、ナビゲーションメニューやボタンの横並びに最適です。一方、CSS Gridは「2次元の配置制御」に強く、ページ全体の複雑なレイアウトやカード型のデザインで威力を発揮します。実際の開発現場では、この使い分けができるだけでCSS のコード量が30%以上削減されることも珍しくありません。Flexは1次元、Gridは2次元という特性を理解すれば、美しく保守しやすいコードが書けるようになります。
yuurakus.jp/
#プログラミング教育
#子どもとIT
#パソコンサロンゆうらく
#DX
#Flexbox
#CSSGrid
5
35
Jun 4
Native CSS grids took pain away from hacky layouts patterns Frontend developers used to follow. It opens up many possibilities for different layouts. I write about it sometime ago. Check the link in comments.
#css #cssgrid #grid #layout #csslayout
1
24
May 31
🚀 Day 4 of Cohort 3.0
Completed A4 - Deep Style Assignment from @sheryians_ (Cohort 3.0) @harshbhaiyaa @sarthacksharma .
Built layouts using CSS Grid.
Live Demo: deepstylee.vercel.app/
#CSS #CSSGrid #FrontendDevelopment #WebDevelopment #100DaysOfCode #Sheryians #Cohort3
11
5 weeks in. Still no shortcuts. Still building in public.
Africa → Remote → Full Stack. 🌍
Flexbox or Grid — which one made you feel like you finally understood layout? 👇🏻
#100DaysOfCode #BuildInPublic #CSS #CSSGrid #WebDev #TechAfrica
4
55
HTML → the content.
CSS → the style.
Flexbox → component control.
Grid → the full picture.
The puzzle is finally coming together.
#100DaysOfCode #BuildInPublic #CSS #CSSGrid #WebDev #TechAfrica
2
27
Today I didn't build a full layout.
I started with sizing, columns and rows.
Understanding how Grid divides space before placing anything inside it.
You can't place furniture before you build the walls of the house.
#100DaysOfCode #BuildInPublic #CSS #CSSGrid #WebDev #TechAfrica
3
65
Flexbox = one direction at a time.
Row OR column.
Grid = both directions at once.
Rows AND columns — simultaneously.
That's not a small difference.
That's a completely different level of control.
#100DaysOfCode #BuildInPublic #CSS #CSSGrid #WebDev #TechAfrica
3
66
For weeks something was missing.
Flexbox helped. But I still couldn't fully understand how a full webpage was actually built.
#100DaysOfCode #BuildInPublic #CSS #CSSGrid #WebDev #TechAfrica
3
8
81
May 22
🚀 Completed Assignment 4 — CSS Grid Layout Practice! 🎯💻
For more details check this post - linkedin.com/posts/deeppakha…
@sheryians_
@sarthacksharma
#HTML #CSS #CSSGrid #FrontendDevelopment #WebDevelopment #ResponsiveDesign #100DaysOfCode #SheriyansCodingSchool
1
58
May 19
🌱 Day 29: Completed all 28 levels of Grid Garden!
Fun challenging way to practice CSS Grid, and now it finally feels natural.
@CoderArmy @rohit_negi9
#Day29 #CSSGrid #CodingJourney #WebDevelopment #CoderArmy
1
1
4
82
フレックスボックスやCSSグリッドを活用すれば、
HTMLの順番を変えずに、
パソコンとスマホで
要素の表示順序を入れ替えることができます。
柔軟なレイアウト設計に役立ちます。 #CSSGrid
27
May 17
🚀 Day 11 - Restarting My Full-Stack Journey
Today was all about practice and implementation.
Instead of learning new concepts, I focused on strengthening my understanding of Flexbox, CSS Grid, and responsive layouts by building a real UI clone project.
🛠️ What I built today:
A clone of the Cursor website to practice modern CSS layout techniques and improve my frontend fundamentals.
🔗 Live Project:
tushar-arora-dev.github.io/c…
📚 Concepts I practiced:
✅ Flexbox layouts
✅ CSS Grid layouts
✅ Alignment and spacing
✅ Responsive structure
✅ Utility-first styling concepts
✅ Real-world UI implementation practice
💡 Biggest takeaway:
The best way to truly learn frontend development is by building projects. Small layout issues, spacing problems, and responsiveness challenges teach far more than just watching tutorials.
Every practice project is making me more confident with CSS and frontend structure 🚀
#100DaysOfCode #FullStackDevelopment #CSS #Flexbox #CSSGrid #FrontendDevelopment #WebDevelopment #LearningInPublic #ChaiCode
#day11 #day1 #DAY7 #Day71
@Hiteshdotcom @piyushgarg_dev @ChaiCodeHQ @nirudhuuu
May 16
🚀 Day 10 — Restarting My Full-Stack Journey
Today’s learning was all about CSS Grid and getting introduced to Tailwind CSS.
After practicing Flexbox for layouts, learning Grid made me understand how powerful modern CSS layout systems really are for building structured and responsive designs.
📚 What I learned today:
✅ Introduction to CSS Grid
✅ Difference between Flexbox (1D) and Grid (2D layouts)
✅ Creating layouts using rows and columns
✅ Understanding:
* grid-template-rows
* grid-template-columns
* gap
* grid-area
* grid-row
* grid-column
* span
* repeat()
* fr units
✅ Practical use cases of Grid:
* galleries
* Pinterest-like layouts
* Instagram-style grids
✅ Introduction to Tailwind CSS:
* Utility-first CSS framework
* Writing styles directly using classes
* Faster UI styling workflow
✅ Tailwind classes I practiced:
* flex
* justify-center
* items-center
* h-screen
* background and text utility classes
🛠️ Practice:
* Completed the CSS Grid Lab from ChaiCode
* Built layouts using Grid concepts
* Explored Tailwind basics and utility classes
💡 Biggest takeaway:
The more I learn CSS layouts, the more I realize that good frontend design is mostly about understanding spacing, structure, and alignment systems properly.
Slowly getting more comfortable with modern frontend development 🚀
#100DaysOfCode #FullStackDevelopment #CSS #CSSGrid #TailwindCSS #FrontendDevelopment #WebDevelopment #LearningInPublic #ChaiCode
#day1 #Day69 #day8 #day7 #day10 @_100DaysOfCode @Hiteshdotcom @piyushgarg_dev @ChaiCodeHQ @nirudhuuu
1
28