codemarch Profile picture
Jan 21, 2023 โ€ข 6 tweets โ€ข 2 min read โ€ข Read on X
In today's Thread ๐Ÿงต we will learn about

"CSS Multiple Columns"
๐Ÿ”ถ CSSย Multiple Columns

The CSS multi-column layout allows easy definition of multiple columns of text - just like in newspapers:
๐Ÿ”ถ CSS Create Multiple Columns

Theย `column-count`ย property specifies the number of columns an element should be divided into.
๐Ÿ”ถ CSS Specify the Gap Between Columns

Theย `column-gap`ย property specifies the gap between the columns.
๐Ÿ”ถCSS Column Rules

Theย `column-rule-style`ย property specifies the style of the rule between columns:
if you enjoyed this thread, please like, comment, and retweet the opening tweet.
๐Ÿ”นFollow @codemarch
๐Ÿ”นYou can also check our HTML & CSS Visual Treat!๐Ÿ˜for more!!!
codemarch.gumroad.com/l/hxazr

โ€ข โ€ข โ€ข

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

Keep Current with codemarch

codemarch 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!

PDF

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

Jul 30, 2024
๐—๐—ฎ๐˜ƒ๐—ฎ๐—ฆ๐—ฐ๐—ฟ๐—ถ๐—ฝ๐˜ ๐—”๐—ฟ๐—ฟ๐—ฎ๐˜†๐˜€(๐—ฃ๐—ฎ๐—ฟ๐˜-๐Ÿฎ) Image
๐—”๐—ฐ๐—ฐ๐—ฒ๐˜€๐˜€๐—ถ๐—ป๐—ด ๐—”๐—ฟ๐—ฟ๐—ฎ๐˜† ๐—˜๐—น๐—ฒ๐—บ๐—ฒ๐—ป๐˜๐˜€.
The index number is used to access an array element:

๐™ฝอŸ๐š˜อŸ๐šอŸ๐šŽอŸ:อŸโ€‚อŸ๐™ฐอŸ๐š›อŸ๐š›อŸ๐šŠอŸ๐šขอŸโ€‚อŸ๐š’อŸ๐š—อŸ๐šอŸ๐šŽอŸ๐šกอŸ๐šŽอŸ๐šœอŸโ€‚อŸ๐šœอŸ๐šอŸ๐šŠอŸ๐š›อŸ๐šอŸโ€‚อŸ๐š อŸ๐š’อŸ๐šอŸ๐š‘อŸโ€‚อŸ๐ŸถอŸ.อŸ

[0] is the first element.
[1] is the second element.
[2] is the third element. Image
๐—–๐—ต๐—ฎ๐—ป๐—ด๐—ถ๐—ป๐—ด ๐—ฎ๐—ป ๐—”๐—ฟ๐—ฟ๐—ฎ๐˜† ๐—˜๐—น๐—ฒ๐—บ๐—ฒ๐—ป๐˜.
we can change the value of the elements in an array.
๐—˜๐˜…๐—ฎ๐—บ๐—ฝ๐—น๐—ฒ: Image
Read 12 tweets
Jul 10, 2024
CSS Colors

Visually explained: Image
Image
Image
Read 17 tweets
Jul 8, 2024
Free HTML/CSS Templates: Image
Image
Image
Read 9 tweets
Jul 7, 2024
Learn HTML & CSS in 50 Days:
Days 1-5: HTML Basics

โž” Introduction to HTML
โ€ข What is HTML?
โ€ข HTML Syntax
โ€ข Elements and Tags

โž” Basic HTML Structure
โ€ข Head, Body, Title
โ€ข Paragraphs, Headings

โž” Project:
โ€ข Simple Personal Bio Page
Days 6-10: HTML Intermediate

โž” Links and Images
โ€ข Internal, External, Anchor Links
โ€ข Adding Images, Alt Text

โž” Lists and Tables
โ€ข Ordered, Unordered, Nested Lists
โ€ข Basic Table Structure

โž” Project:
โ€ข Simple Blog Page
Read 13 tweets
Jan 31, 2024
Learn React in 30 Days.

Complete Structure:
Pre-Requisite:

Javascript Before React - Content Added. Image
Week 1: Introduction and Basics Image
Read 9 tweets
Jan 4, 2024
Components in React.

Explained: Image
Real-Life Example:

Imagine building a house ๐Ÿ .

Each room (kitchen, bedroom, bathroom) represents a component.

React components contain particular UI and behaviour, just as rooms have particular purposes and looks.

Let's explore these "rooms" in the world of React!
๐Ÿ”น Functional Components:

โ€ข Simpler and more concise.
โ€ข Stateless (initially).
โ€ข Use functions to return JSX.
โ€ข With Hooks, they've become even more powerful!

Example: Image
Read 12 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

Don't want to be a Premium member but still want to support us?

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

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us!

:(