Ravi Kumar Profile picture
Aug 7, 2021 β€’ 8 tweets β€’ 3 min read β€’ Read on X
Do you know about HTML layout ??

πŸ§΅πŸ‘‡ Image
1⃣ Introduction of HTML layout

HTML layout is used to structure a web page in a proper manner so it looks better and gives a proper responsive web page.

It helps users easy to navigate the web page and it easily makes by using standard Html tags. Image
2⃣ Why it is used ??

1. It Simplifies navigation by clarifying the structure.

2. It Makes the design more visually appealing.

3. It helps to make the page in a more responsive form.

4. helps users to easily navigate the web page.
3⃣ Elements of Html layout

there are some tags to the layout web page below is an example of those tags.

πŸ‘‡πŸ‘‡ Image
4⃣ Example of HTML layout

you can see code snippets on codepen.

πŸ”—πŸ”—

codepen.io/ravikumar7210/…

πŸ‘‡πŸ‘‡ Image
5⃣ HTML Layout Techniques

01. CSS framework

02. CSS float property

03. CSS flexbox

04.CSS grid
6⃣ HTML Layout: Useful TipsπŸ’‘πŸ’‘

01. Don't use tables to create HTML layouts! it's not recommended now as it slows down the rendering in the browser and complicates redesigning later.

02. You can also create website layouts using CSS floats or flex containers.
Gives the first one retweet πŸ”

Image

β€’ β€’ β€’

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

Keep Current with Ravi Kumar

Ravi Kumar 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 @ravikmmr

Aug 9, 2023
Top 10 VS Code Extension to Increase 10x Productivity (Free):

⬇️ Image
(1/10) Path Intellisense

β€” This Extension autocompletes the file names. Like tags in HTML, it autocompletes the tags. Image
(2/10) Live Server

β€” This Extension allows you to launch your local projects with a live reload on the browser so you don't have to constantly refresh after changes. Image
Read 12 tweets
Aug 3, 2023
Free Public APIs for Developers:

🧡 Image
1⃣ OpenWeather

πŸ”— https://t.co/BMtII438OIopenweathermap.org/api
Image
2⃣ The NASA APIs

πŸ”— https://t.co/fseHAkgWssapi.nasa.gov
Image
Read 10 tweets
Jun 6, 2023
Best Responsive Web Design Practices you should follow (save or bookmark it): Image
1/ Set The Viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0"> Image
2/ Use media queries

This CSS property has a feature to enable your webpage content to adapt to different screen sizes. Image
Read 9 tweets
Jun 5, 2023
Want to Improve CSS try these Resources (Free): Source:  https://res.cloudi...
1/ CSS Tricks

πŸ”—css-tricks.com Image
2/ CSS Author.

πŸ”—cssauthor.com Image
Read 12 tweets
May 29, 2023
Top GitHub Repository you should definitely check out as a web developer (thread): Image
1/ Developer-roadmap

If you want to start your career in web development but don't know where to start then check out this repository you get all the details about web development.

πŸ”—github.com/kamranahmedse/… Image
2/ FreeCodeCamp

It is a friendly community where you can learn to code for free. It has also a huge resource of video lectures or courses for a web developer.

πŸ”—github.com/freeCodeCamp/f… Image
Read 12 tweets
May 28, 2023
Top 10 VS Code Extension to Increase 10x Productivity (Free):

⬇️ Image
1/ Path Intellisense

β€” This Extension autocompletes the file names. Like tags in HTML, it autocompletes the tags Image
2/ Live Server

β€” This Extension allows you to launch your local projects with a live reload on the browser so you don't have to constantly refresh after changes. 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!

:(