CSS Layout Toolkit for 2019

we head into the final quarter of 2018, let’s take a look at where we are with CSS Grid Layout, and CSS layout in general. In this talk you will learn the key elements of layout. The things you need to know as you plan your projects now and into the next year.

As we head into the final quarter of 2018, let’s take a look at where we are with CSS Grid Layout, and CSS layout in general. In this talk you will learn the key elements of layout. The things you need to know as you plan your projects now and into the next year.

Introduction To Responsive Web Design - HTML & CSS Tutorial

Introduction To Responsive Web Design - HTML & CSS Tutorial

This tutorial teaches you to build responsive websites from scratch using HTML & CSS

Introduction To Responsive Web Design - HTML & CSS Tutorial

It’s a part of The Responsive Web Design Bootcamp at Scrimba: https://scrimba.com/g/gresponsive

However, this 4-hour tutorial stands fully on its own legs. It starts with explaining the core concepts needed to start thinking responsively, and then it takes you through every single step in building a professional-level responsive website.

Course content

⌨️ (00:00:00) Intro

⌨️ (00:02:59) 1. Starting to think responsively

⌨️ (00:06:01) 2. CSS Units

⌨️ (00:09:16) 3. CSS Units - Percentage

⌨️ (00:15:14) 4. Controlling the width of images

⌨️ (00:20:05) 5. min-width and max-width

⌨️ (00:22:54) 6. CSS Units - The em unit

⌨️ (00:28:25) 7. The problem with ems

⌨️ (00:30:58) 8. The Solution: Rems

⌨️ (00:35:46) 9. Picking which unit to use

⌨️ (00:39:18) 10. ems and rems - an example

⌨️ (00:47:10) 11. Flexbox refresher and setting up some HTML

⌨️ (00:55:02) 12. Basic Styles and setting up the columns

⌨️ (01:02:09) 13. Adding the background color

⌨️ (01:06:21) 14. Setting the column widths

⌨️ (01:10:00) 15. Spacing out the columns

⌨️ (01:14:27) 16. Controlling the vertical position of flex items

⌨️ (01:19:42) 17. Media Query basics

⌨️ (01:29:50) 18. Making out layout responsive with flex-direction

⌨️ (01:36:45) 19. flex-direction explained

⌨️ (01:39:54) 20. Creating a navigation

⌨️ (01:44:40) 21. Using flexbox to start styling our navigation

⌨️ (01:52:19) 22. Making out navigation look good

⌨️ (01:59:38) 23. Adding the underline

⌨️ (02:03:40) 24. A more complicated navigation

⌨️ (02:10:25) 25. Making the navigation responsive

⌨️ (02:17:20) 26. Taking a look at the rest of the project

⌨️ (02:21:34) 27. Setting up the structure

⌨️ (02:29:59) 28. Featured article structure

⌨️ (02:35:07) 29. The home page - HTML for the recent articles

⌨️ (02:37:39) 30. Home Page - HTML for the aside

⌨️ (02:43:45) 31. Starting the CSS for our page

⌨️ (02:59:15) 32. Starting the layout - looking at the big picture

⌨️ (03:07:48) 33. Starting to think mobile first

⌨️ (03:10:37) 34. Styling the featured article

⌨️ (03:17:03) 35. Changing the visual order with flex box

⌨️ (03:22:19) 36. Playing with the title’s position, and the downsides of negative margins

⌨️ (03:27:05) 37. Changing the visual order with flex box

⌨️ (03:31:00) 38. Styling recent articles for large screens

⌨️ (03:38:50) 39. Setting up the widgets and talking breakpoints

⌨️ (03:45:41) 40. Using a new pseudo-class to wrap-up the homepage

⌨️ (03:53:12) 41. Creating the recent posts page

⌨️ (03:56:39) 42. Setting up the About Me page

⌨️ (04:00:54) 43. Fixing up some loose ends

⌨️ (04:05:27) 44. Important Note. The viewport meta tag

⌨️ (04:09:10) 45. Module wrap up

⌨️ (04:12:24) Outro

HTML 5 Tutorial: How to create a table using HTML tags and Stylesheet (CSS)

HTML 5 Tutorial: How to create a table using HTML tags and Stylesheet (CSS)

In this article, we want to show you how to create a table using HTML tags and Stylesheet (CSS). HTML table may vary depends on data and style requirements. Sometimes, in the real application, we use an HTML table as a layout of the Email template in HTML format.

In this article, we want to show you how to create a table using HTML tags and Stylesheet (CSS). HTML table may vary depends on data and style requirements. Sometimes, in the real application, we use an HTML table as a layout of the Email template in HTML format.

HTML Table uses to represent tabular data like in the Excel Application and arrange the layout of the Web View.

There are some common HTML tags that use by HTML table:

Before start practicing HTML 5 table, make sure all

tag put inside complete and tag.

<!DOCTYPE html>
<html>
 <head>
  <title>Basic HTML Table</title>
 </head>
 <body>
  <table></table>
 </body>
</html>

Basic HTML Table

Here is an example of a basic HTML table or common use of the above HTML tags to define or create a table.

<table>
 <tr>
  <th>No.</th>
  <th>Full Name</th>
  <th>Position</th>
  <th>Salary</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Bill Gates</td>
  <td>Founder Microsoft</td>
  <td><table>
 <tr>
  <th>No.</th>
  <th>Full Name</th>
  <th>Position</th>
  <th>Salary</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Bill Gates</td>
  <td>Founder Microsoft</td>
  <td>$1000</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Steve Jobs</td>
  <td>Founder Apple</td>
  <td>$1200</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Larry Page</td>
  <td>Founder Google</td>
  <td>$1100</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Mark Zuckeberg</td>
  <td>Founder Facebook</td>
  <td>$1300</td>
 </tr>
</table>
000</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Steve Jobs</td>
  <td>Founder Apple</td>
  <td><table>
 <tr>
  <th>No.</th>
  <th>Full Name</th>
  <th>Position</th>
  <th>Salary</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Bill Gates</td>
  <td>Founder Microsoft</td>
  <td>$1000</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Steve Jobs</td>
  <td>Founder Apple</td>
  <td>$1200</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Larry Page</td>
  <td>Founder Google</td>
  <td>$1100</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Mark Zuckeberg</td>
  <td>Founder Facebook</td>
  <td>$1300</td>
 </tr>
</table>
200</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Larry Page</td>
  <td>Founder Google</td>
  <td><table>
 <tr>
  <th>No.</th>
  <th>Full Name</th>
  <th>Position</th>
  <th>Salary</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Bill Gates</td>
  <td>Founder Microsoft</td>
  <td>$1000</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Steve Jobs</td>
  <td>Founder Apple</td>
  <td>$1200</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Larry Page</td>
  <td>Founder Google</td>
  <td>$1100</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Mark Zuckeberg</td>
  <td>Founder Facebook</td>
  <td>$1300</td>
 </tr>
</table>
100</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Mark Zuckeberg</td>
  <td>Founder Facebook</td>
  <td><table>
 <tr>
  <th>No.</th>
  <th>Full Name</th>
  <th>Position</th>
  <th>Salary</th>
 </tr>
 <tr>
  <td>1</td>
  <td>Bill Gates</td>
  <td>Founder Microsoft</td>
  <td>$1000</td>
 </tr>
 <tr>
  <td>2</td>
  <td>Steve Jobs</td>
  <td>Founder Apple</td>
  <td>$1200</td>
 </tr>
 <tr>
  <td>3</td>
  <td>Larry Page</td>
  <td>Founder Google</td>
  <td>$1100</td>
 </tr>
 <tr>
  <td>4</td>
  <td>Mark Zuckeberg</td>
  <td>Founder Facebook</td>
  <td>$1300</td>
 </tr>
</table>
300</td>
 </tr>
</table>

Output:

As a default, HTML 5 table not defined with border, you should add the border manually in each table cells.

HTML Table with Border

To add a basic border to HTML 5 table, simply add this style attribute in

tag.

<table style="border: solid 1px #aaa999;">

Output:

As you can see, Table Border only draw lines to the table only and cells left borderless. To make border for all cells, add style attribute to all and all .

<table style="border: solid 1px #aaa999;">
 <tr>
  <th style="border: solid 1px #aaa999;">No.</th>
  <th style="border: solid 1px #aaa999;">Full Name</th>
  <th style="border: solid 1px #aaa999;">Position</th>
  <th style="border: solid 1px #aaa999;">Salary</th>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">1</td>
  <td style="border: solid 1px #aaa999;">Bill Gates</td>
  <td style="border: solid 1px #aaa999;">Founder Microsoft</td>
  <td style="border: solid 1px #aaa999;"><table style="border: solid 1px #aaa999;">
 <tr>
  <th style="border: solid 1px #aaa999;">No.</th>
  <th style="border: solid 1px #aaa999;">Full Name</th>
  <th style="border: solid 1px #aaa999;">Position</th>
  <th style="border: solid 1px #aaa999;">Salary</th>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">1</td>
  <td style="border: solid 1px #aaa999;">Bill Gates</td>
  <td style="border: solid 1px #aaa999;">Founder Microsoft</td>
  <td style="border: solid 1px #aaa999;">$1000</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">2</td>
  <td style="border: solid 1px #aaa999;">Steve Jobs</td>
  <td style="border: solid 1px #aaa999;">Founder Apple</td>
  <td style="border: solid 1px #aaa999;">$1200</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">3</td>
  <td style="border: solid 1px #aaa999;">Larry Page</td>
  <td style="border: solid 1px #aaa999;">Founder Google</td>
  <td style="border: solid 1px #aaa999;">$1100</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">4</td>
  <td style="border: solid 1px #aaa999;">Mark Zuckeberg</td>
  <td style="border: solid 1px #aaa999;">Founder Facebook</td>
  <td style="border: solid 1px #aaa999;">$1300</td>
 </tr>
</table>
000</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">2</td>
  <td style="border: solid 1px #aaa999;">Steve Jobs</td>
  <td style="border: solid 1px #aaa999;">Founder Apple</td>
  <td style="border: solid 1px #aaa999;"><table style="border: solid 1px #aaa999;">
 <tr>
  <th style="border: solid 1px #aaa999;">No.</th>
  <th style="border: solid 1px #aaa999;">Full Name</th>
  <th style="border: solid 1px #aaa999;">Position</th>
  <th style="border: solid 1px #aaa999;">Salary</th>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">1</td>
  <td style="border: solid 1px #aaa999;">Bill Gates</td>
  <td style="border: solid 1px #aaa999;">Founder Microsoft</td>
  <td style="border: solid 1px #aaa999;">$1000</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">2</td>
  <td style="border: solid 1px #aaa999;">Steve Jobs</td>
  <td style="border: solid 1px #aaa999;">Founder Apple</td>
  <td style="border: solid 1px #aaa999;">$1200</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">3</td>
  <td style="border: solid 1px #aaa999;">Larry Page</td>
  <td style="border: solid 1px #aaa999;">Founder Google</td>
  <td style="border: solid 1px #aaa999;">$1100</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">4</td>
  <td style="border: solid 1px #aaa999;">Mark Zuckeberg</td>
  <td style="border: solid 1px #aaa999;">Founder Facebook</td>
  <td style="border: solid 1px #aaa999;">$1300</td>
 </tr>
</table>
200</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">3</td>
  <td style="border: solid 1px #aaa999;">Larry Page</td>
  <td style="border: solid 1px #aaa999;">Founder Google</td>
  <td style="border: solid 1px #aaa999;"><table style="border: solid 1px #aaa999;">
 <tr>
  <th style="border: solid 1px #aaa999;">No.</th>
  <th style="border: solid 1px #aaa999;">Full Name</th>
  <th style="border: solid 1px #aaa999;">Position</th>
  <th style="border: solid 1px #aaa999;">Salary</th>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">1</td>
  <td style="border: solid 1px #aaa999;">Bill Gates</td>
  <td style="border: solid 1px #aaa999;">Founder Microsoft</td>
  <td style="border: solid 1px #aaa999;">$1000</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">2</td>
  <td style="border: solid 1px #aaa999;">Steve Jobs</td>
  <td style="border: solid 1px #aaa999;">Founder Apple</td>
  <td style="border: solid 1px #aaa999;">$1200</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">3</td>
  <td style="border: solid 1px #aaa999;">Larry Page</td>
  <td style="border: solid 1px #aaa999;">Founder Google</td>
  <td style="border: solid 1px #aaa999;">$1100</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">4</td>
  <td style="border: solid 1px #aaa999;">Mark Zuckeberg</td>
  <td style="border: solid 1px #aaa999;">Founder Facebook</td>
  <td style="border: solid 1px #aaa999;">$1300</td>
 </tr>
</table>
100</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">4</td>
  <td style="border: solid 1px #aaa999;">Mark Zuckeberg</td>
  <td style="border: solid 1px #aaa999;">Founder Facebook</td>
  <td style="border: solid 1px #aaa999;"><table style="border: solid 1px #aaa999;">
 <tr>
  <th style="border: solid 1px #aaa999;">No.</th>
  <th style="border: solid 1px #aaa999;">Full Name</th>
  <th style="border: solid 1px #aaa999;">Position</th>
  <th style="border: solid 1px #aaa999;">Salary</th>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">1</td>
  <td style="border: solid 1px #aaa999;">Bill Gates</td>
  <td style="border: solid 1px #aaa999;">Founder Microsoft</td>
  <td style="border: solid 1px #aaa999;">$1000</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">2</td>
  <td style="border: solid 1px #aaa999;">Steve Jobs</td>
  <td style="border: solid 1px #aaa999;">Founder Apple</td>
  <td style="border: solid 1px #aaa999;">$1200</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">3</td>
  <td style="border: solid 1px #aaa999;">Larry Page</td>
  <td style="border: solid 1px #aaa999;">Founder Google</td>
  <td style="border: solid 1px #aaa999;">$1100</td>
 </tr>
 <tr>
  <td style="border: solid 1px #aaa999;">4</td>
  <td style="border: solid 1px #aaa999;">Mark Zuckeberg</td>
  <td style="border: solid 1px #aaa999;">Founder Facebook</td>
  <td style="border: solid 1px #aaa999;">$1300</td>
 </tr>
</table>
300</td>
 </tr>
</table>

If you want a simple coding without writing a style for each cells, use

Animated Text Reveal In Pure CSS

Animated Text Reveal In Pure CSS

Today I am sharing an Animated Text Reveal Program In Pure CSS. I created this program with only HTML and CSS, No javascript or jquery used. This a very basic and simple program but by looks it pretty enough. Let’s take a look at this program.

Animated Text Reveal In Pure CSS, Get Example With Source Code. You must have seen text reveal effect in many videos, even some website use these types of effect on their intro banner. Basically, this concept is: First add text, and add a shape over the text. then animate the shape left to right or right to left. When this animation will run with 2 or 3 seconds then the text reveal effect will create.

Where you can use animated text reveal? You can use it on your banner, about and footer section. This effect will be pretty good for any website. I had also previously shared dynamic website intro with HTML CSS & JavaScript, If you want an advance program then go for this. Otherwise, this program is also good.

So, Today I am sharing an Animated Text Reveal Program In Pure CSS. I created this program with only HTML and CSS, No javascript or jquery used. This a very basic and simple program but by looks it pretty enough. Let’s take a look at this program.

Preview and Example Of This Program

First, See how this program looks like, In this video.


Now you can see this program visually. If you like it, then go for source code.

Animated Text Reveal In Pure CSS Program Source Code

Before sharing source code, I want to say about this program a little bit. I just put one h1 tag for text, Left other work had done in CSS. Also, I put a rectangle over the text. Then animate the rectangles width 0 to 100 to 0 with the help of CSS keyframe and animation property. In other words, this program is fully based on CSS animation property, like animation-delay or animation-duration etc (know more about CSS animation ).

I have to create just 2 files for this program. One for HTML, & one for CSS, that’s all.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

<!DOCTYPE html>
<!-- code by webdevtrick ( https://webdevtrick.com) -->
<html>
 
<head>
  <meta charset="UTF-8">
  <title>Text Reveal In Pure CSS  | Webdevtrick.com</title>
      <link rel="stylesheet" href="style.css">
</head>
 
<body>
 
  <h1 class="reveal">
	Webdevtrick.com
</h1>
</body>
 
</html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

:root {
	--animation-delay: 0;
	--duration: 800ms;
	--iterations: 1;
}
/* code by webdevtrick ( https://webdevtrick.com) */
body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background-color: #72BDED;
	flex-direction: column;
}
 
.reveal,
.reveal::after {
	        animation-delay: 0;
	        animation-delay: var(--animation-delay, 2s);
	        animation-iteration-count: 1;
	        animation-iteration-count: var(--iterations, 1);
	        animation-duration: 800ms;
	        animation-duration: var(--duration, 800ms);
	        animation-fill-mode: both;
	        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
 
.reveal {
	position: relative;
	font-size: 6vw;
	animation-name: text;
	color: #FFF;
	white-space: nowrap;
	cursor: default;
	text-transform: uppercase;

}
 
.reveal::after {
content: "";
position: absolute;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f2f98b;
        transform: scaleX(0);
        transform-origin: 0 50%;
pointer-events: none;
        animation-name: revealer;
}
 
 
 
@keyframes text {
from {
        clip-path: inset(0 100% 0 0);
}
to {
        clip-path: inset(0 0 0 0);
}
}
 
 
 
 
@keyframes revealer {

0%, 50% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin: 0 50%;
}

60%, 100% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform-origin: 100% 50%;		
}

 

60% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scaleX(1);
}

100% {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transform: scaleX(0);
}

}

That’s It. Now you have successfully create this program which is animated text reveal in pure CSS. If you have any doubt or question comment down below.

Thanks for reading. If you liked this post, share it with all of your programming buddies!

Originally published on webdevtrick.com