Button Animation

Sabeer Junaid — Wed, 12 Jun 2024 00:20:00 +0000

A button design with a hover effect, perfect for calls-to-action or navigation elements. The button features a smooth animation and a subtle gradient effect, making it a great addition to any web project.

Semantic HTML cheat sheet

Sabeer Junaid — Sun, 24 Mar 2024 02:09:04 +0000

There are hundreds of semantic tags available to help describe the meaning of your HTML documents. Below is a cheat sheet with some of the most common ones you’ll use in this course and in your development career.

Sectioning tags

Use the following tags to organize your HTML document into structured sections.

< header >
The header of a content section or the web page. The web page header often contains the website branding or logo.

< nav >
The navigation links of a section or the web page.

< footer >
The footer of a content section or the web page. On a web page, it often contains secondary links, the copyright notice, privacy policy and cookie policy links.

< main >
Specifies the main content of a section or the web page.

< aside >
A secondary set of content that is not required to understand the main content.

< article >
An independent, self-contained block of content such as a blog post or product.

< section >
A standalone section of the document that is often used within the body and article elements.

< details >
A collapsed section of content that can be expanded if the user wishes to view it.

< summary >
Specifies the summary or caption of a element.

h1-h6
Headings on the web page.

indicates the most important heading whereas

indicates the least important.

Content tags

< blockquote >
Used to describe a quotation.

< dd >
Used to define a description for the preceding

element.

< dl >
Used to define a description list.

< dt >
Used to describe terms inside < dl > elements.

< figcaption >
Defines a caption for a photo image.

< figure >
Applies markup to a photo image.

< hr >
Adds a horizontal line to the parent element.

< li >
Used to define an item within a list.

< menu >
A semantic alternative to < ul > tag.

< ol >
Defines an ordered list.

< p >
Defines a paragraph.

< pre >
Used to represent preformatted text. Typically rendered in the web browser using a monospace font.

< ul >
Unordered list

Inline tags

< a >
An anchor link to another HTML document.

< abbr >
Specifies that the containing text is an abbreviation or acronym.

< b >
Bolds the containing text. When used to indicate importance use instead.

< br >
A line break. Moves the subsequent text to a new line.

< cite >
Defines the title of creative work (for example a book, poem, song, movie, painting or sculpture). The text in the element is usually rendered in italics.

< code >
Indicates that the containing text is a block of computer code.

< data >
Indicates machine-readable data.

< em >
Emphasizes the containing text.

< i >
The containing text is displayed in italics. Used to indicate idiomatic text or technical terms.

< mark >
The containing text should be marked or highlighted.

< q >
The containing text is a short quotation.

< s >
Displays the containing text with a strikethrough or line through it.

< samp >
The containing text represents a sample.

< small >
Used to represent small text, such as copyright and legal text.

< span >
A generic element for grouping content for CSS styling.

< strong >
Displays the containing text in bold. Used to indicate importance.

< sub >
The containing text is subscript text, displayed with a lowered baseline.

< sup >
The containing text is superscript text, displayed with a raised baseline.

< time >
A semantic tag used to display both dates and times.

< u >
Displays the containing text with a solid underline.

< var >
The containing text is a variable in a mathematical expression.

Embedded content and media tags

< audio >
Used to embed audio in web pages.

< canvas >
Used to render 2D and 3D graphics on web pages.

< embed >
Used as a containing element for external content provided by an external application such as a media player or plug-in application.

< iframe >
Used to embed a nested web page.

< img >
Embeds an image on a web page.

< object >
Similar to but the content is provided by a web browser plug-in.

< picture >
An element that contains one element and one or more elements to offer alternative images for different displays/devices.

< video >
Embeds a video on a web page.

< source >
Specifies media resources for picture, audio and video elements.

< svg >
Used to define Scalable Vector Graphics within a web page.

Table tags

< table >
Defines a table element to display table data within a web page.

< thead >
Represents the header content of a table. Typically contains one < tr > element.

< tbody >
Represents the main content of a table. Contains one or more < tr >elements.

< tfoot >
Represents the footer content of a table. Typically contains one < tr > element.

< tr >
Represents a row in a table. Contains one or more < td > elements when used within < tbody > or < tfoot >. When used within < thead >, contains one or more < th > elements.

< td >
Represents a cell in a table. Contains the text content of the cell.

< th >
Defines a header cell of a table. Contains the text content of the header.

< caption >
Defines the caption of a table element.

< colgroup >
Defines a semantic group of one or more columns in a table for formatting.

< col >
Defines a semantic column in a table.

Set Slick Fade Animation Using CSS

Sabeer Junaid — Mon, 18 Mar 2024 20:03:27 +0000

To play any animation for example the fade-up animation on your main page content when it loads, you can use the following approach:

First, define the CSS animation for the fade-up effect:

HTML:

<div id="main-content">This is the main page content that will fade up.</div>

CSS:

#main-content {
  opacity: 0;
  animation: fadeUp 2s ease-in forwards;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

In the CSS, we first set the initial opacity of the .fade-up element to 0, making it invisible. Then, we define the fadeUp animation, which starts with an opacity of 0 and a vertical translation of 20 pixels (transform: translateY(20px)), and ends with an opacity of 1 and no translation (transform: translateY(0)). The animation duration is set to 2 seconds with an ease-in timing function (animation: fadeUp 2s ease-in forwards).

The forwards value at the end of the animation property ensures that the animation will stay at its final state (i.e., with an opacity of 1) after it has completed.

You can adjust the duration, timing function, and other properties of the animation to suit your needs.

Forem: Sabeer Junaid