DEV Community: SURESH KUMAR

CodePen Home Three Dots - CSS loading animations made with single element

SURESH KUMAR — Sun, 24 Dec 2023 12:42:40 +0000

COUNT DOWN | USING HTML & CSS

SURESH KUMAR — Sun, 24 Dec 2023 10:58:53 +0000

Christmas Whishes !!!

SURESH KUMAR — Sun, 24 Dec 2023 10:57:58 +0000

Check out this Pen I made!

Christmas Animated Card

SURESH KUMAR — Sun, 24 Dec 2023 10:55:36 +0000

Check out this Pen I made!

Flexing with CSS Flexbox

SURESH KUMAR — Sun, 24 Dec 2023 10:52:05 +0000

Flexbox also known as flexible box is a type of layout model in CSS that makes it super easy to design responsive layouts.

The whole idea behind the Flexbox layout model is to allow elements to be laid out in any direction, flex their size to either fill up unused space or shrink to avoid overflowing their parent element, either horizontally or vertically.

To truly be able to flex with Flexbox, we have to understand how it works.

Let’s break it down into its properties into two namely;

Flex Container
Flex Items
Flex Container
This is the parent html element that houses the items you want to lay out.

To use any of the flex properties, this container has to be created.

It’s what creates the context that allows every other flex properties to work.

align-items
This allows you to align the items in the flex container vertically, regardless of the height of the item with respect to their flex container or each other.

The values it accepts are: flex-start | flex-end | center | baseline | stretch

justify-content
This is the opposite of align-items, it aligns its item horizontally regardless of the width of the item with respect to their container or each other.

flex-wrap
The flex-wrap property specifies whether the flex items should break to the next line or not.

By default all flex items will try to fit in a single line, but this property tells the browser to break them into another line when they become way too many to fit in a single line.

This line we speak of is also known as a F lex line.

Values: nowrap | wrap | wrap-reverse

align-content
This property modifies the behavior of the flex-wrap property.

It essentially behaves like the align-items property, only that it aligns the flex lines instead of the flex items.

To make this property work, flex-wrap: wrap has to be set on the flex container and the flex lines have to be more than one.

flex-direction
This defines which direction the browser should stack the Flex items i.e vertically or horizontally.

Values: row | row-reverse | column | column-reverse

flex-flow
This is a shorthand for flex-direction and flex-wrap so instead of writing the below;

.container {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
}

you can just do this;

.container {
   display: flex;
   flex-flow: column wrap;
}

Getting Started with Angular Material

SURESH KUMAR — Sun, 24 Dec 2023 10:41:20 +0000

This tutorial will provide an overview of how to get started with Angular Material, a UI component library that implements Material Design in Angular. We will cover how to set up an Angular application to use Angular Material and create content to demonstrate the material components, as seen below.

The full code from this tutorial is on my GitHub. Each commit aligns to a step in this post.

Set up
Generate the app****

Use Angular CLI to generate a new Angular App

Run ng new my-app in the command line, replacing my-app with the name of the app.

Select Y for routing.

Select SCSS for styles.

Add Angular Material

Run the following commands

cd my-app
ng add @angular/material

Choose any of the prebuilt themes provided.

Select Y for global typography (font styles).

Select Y for animations.

The add command will install @angular/cdk and @angular/material libraries and set up the material fonts, icons and base styles.

Remove defaults

The current content is auto-generated by Angular in the first step, but we want to create our own.

Remove everything in app.component.html except for .

Create the material module
To use the material components in the app, we need to import them. Create a separate material.module.ts to import the individual components, and in the next step, we will import the material module into the app.

While not recommended, the material components can be imported directly into the app.module.ts file.

We will import all the available components for Angular Material to be ready for use in the app. You can simplify this file later to import only the required components.

Create a folder called material in src\app.

Create a file called material.module.ts and copy the below contents into that file. Or copy this material module file from my GitHub into the folder.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';

@NgModule({
  exports: [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule,
  ]
})
export class MaterialModule { }

This file imports all the available material components and adds them as exports in a MaterialModule which will expose them to the app.

Import the material module
In app.module.ts, an import statement to the material module created in the last step.

Add MaterialModule to the imports array of the AppModule to import it into the app.

Add content
Create a component
Generate a component using Angular CLI

Run ng generate component home

Set up the routes

Replace the empty routes in app.routing.module.ts with

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: '**', redirectTo: '/', pathMatch: 'full' }
];

These steps have created a component called Home and set this as the base page.

Run ng serve to compile the app and see the text home works!

Add basic styles

Add basic styles to create spacing on the page.
We will use CSS FlexBox.
Angular also provides a robust Flex-Layout API @angular/flex-layout which combines CSS FlexBox and mediaQuery.

Add the material background style. In index.html add class mat-app-background to the body tag.

Wrap the tag in a div with a class container

Add the following styles into app.component.scss

.container {
  max-width: 800px;
  margin: 4em auto;
  padding: 0 20px;
}

.container > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

Add the following styles into home.component.scss

.flex-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 16px;
}

button {
  margin: 8px;
}

.mat-radio-button~.mat-radio-button {
  margin-left: 16px;
}

Add Angular Material Components


<h1 class="mat-display-1">Easy, Breezy, Beautiful: Angular Material</h1>

<p>Here are some random angular material components</p>

<mat-card>
    <mat-card-header>
        <img mat-card-avatar src="https://cdn.pixabay.com/photo/2018/10/11/12/31/black-cat-3739702_1280.jpg"
            alt="My Photos">
        <mat-card-title>Easy, Breezy, Beautiful</mat-card-title>
        <mat-card-subtitle>Angular Material</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content>
        <p>
            This is an amazing blog on Angular Material. Here is some awesome text about Angular Material.
            Here is some awesome text about Angular Material. Here is some awesome text about Angular Material.
            Here is some awesome text about Angular Material. Here is some awesome text about Angular Material.
            Here is some awesome text about Angular Material. Here is some awesome text about Angular Material.
        </p>
    </mat-card-content>
    <mat-card-actions align="end">
        <button mat-raised-button color="primary">Read More</button>
    </mat-card-actions>
</mat-card>

<div class="flex-container">
    <div>
        <button mat-raised-button color="primary">Raised Primary</button>
        <button mat-raised-button color="accent">Raised Accent</button>
        <button mat-stroked-button>Basic Stroked</button>
        <button mat-stroked-button color="primary">Stroked Primary</button>
    </div>

    <button mat-fab>
        <mat-icon>thumb_up</mat-icon>
    </button>

    <mat-radio-group aria-label="Select an option">
        <mat-radio-button value="1">Option 1</mat-radio-button>
        <mat-radio-button value="2">Option 2</mat-radio-button>
    </mat-radio-group>

    <mat-checkbox>Check me!</mat-checkbox>

    <mat-form-field>
        <mat-label>Choose a date</mat-label>
        <input matInput [matDatepicker]="picker">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>

    <mat-slider></mat-slider>


    <button mat-flat-button color="primary" matTooltip="Info about the action" matTooltipPosition="after"
        aria-label="Button that displays a tooltip when focused or hovered over">
        Tooltip
    </button>
</div>

<mat-paginator [length]="100" [pageSize]="10" [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

How to create a web page with HTML

SURESH KUMAR — Sun, 24 Dec 2023 10:04:12 +0000

In this tutorial we’ll build a simple web page using HTML. This is aimed at people who are starting out with HTML but have a basic understanding of the syntax. If you’re completely new to HTML you can still follow along and learn a few things. Make sure to check out the W3C introduction to HTML if you’re interested in a deep dive about HTML.

You can find the completed code for this tutorial here.

Table Of Contents

How to create an HTML file
How to create a basic HTML document
Sections, headings & paragraph text
How to preview the web page
Creating a list
Formatting text
Hyperlinks
Basic styling
Adding images
Create a new HTML file First we’ll need to do is create a new document. There are a few ways we can create a document but I’ll be using the text editor VS Code to do this. You can use any text editor you prefer.

Here are the steps for creating a new file in VS Code.

Open VS Code
Select “New File” in the File menu or press Ctrl + N on Windows or Cmd + N on macOS.
Select “Save” in the File menu or press Ctrl + S on Windows or Cmd + S on macOS. You will then be prompted to enter a name of the file.
creating an HTML file

HTML documents should have .html file extensions.
Generally the homepage of a site is named “index.html”. “index” indicates that this is the default file that the browser will load.

You should only use alphanumerics, dashes, underscores, or tildes in the page name.
Don’t use spaces in the file name
Use lower case letters when naming HTML files. The name of an HTML resource is typically used in a URL. URLs are generally case-sensitive.

Create a basic HTML document Now that we have an HTML file we can start writing some HTML to create our web page. We’ll start by adding a few elements that are typically found in most HTML files.

<!DOCTYPE html>
<html lang="en">
  <head> </head>
</html>
<body> - The body element represents the contents of the document. There can only be one body element in a document.
Add the body element inside the html element right after the head:
<!DOCTYPE html>
<html lang="en">
  <head> </head>
  <body></body>
</html>

- The title element will represent the name of the document, this is what will appear in the browser tab. The title element is metadata content and so it is used inside the head element. There should only be one title element per document.
Add the title element inside the head element and name it however you’d like:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Introduction to winter camping</title>
  </head>
  <body></body>
</html>

You’ll noticed how some of the elements are now indented, this is done to make the code easier to read. Indenting is an opinionated area of coding. Everyone has there own preferences but as long as it’s consistent and serves to increase readability then use any style you prefer. For this tutorial I’m using a code formatter called Prettier which is set to automatically format the HTML document when I save.

There is one more element that we’ll add to this basic layout, which you’ll frequently see.

- The meta element represents different types of metadata. There are many different uses for the meta tag, but there are two which you’ll regularly see (especially if you’re using HTML snippets) and these are the ones we’ll discuss.
Let’s add the two meta elements inside the head element:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Introduction to winter camping</title>
  </head>
  <body></body>
</html>

The first meta element with the attribute charset="UTF-8" is called a character encoding declaration., this indicates which character encoding is used to store or transmit the document. If you’re just starting out, don’t worry too much about the technical aspects of this element, but it’s a good idea to understand what it does if you see it.

The second second meta element is called a viewport meta tag and it was introduced by Apple so that developers could modify the viewport size and scale. While this meta tag is very common due to the need to support mobile devices, it is not necessary for all web pages.

Sections, headings & paragraph text If we were to view this page in a browser you wouldn’t actually see anything rendered in the viewport. That’s because we haven’t added any content to the body element. So let’s add some content to this web page.

A section element can represent a certain section of the document. In this example the web page is going to have an introduction section, a camping gear section, a photo section. h1, h2, h3, h4, h5 & h6 elements - These represent headings in the document are an important part of a web page. Headlines have an SEO value and are also important for accessibility. We’ll learn more about semantics and structuring web pages in future tutorials, for now note that headings are important parts of a web page.
- The p element represent paragraph text. Let’s go ahead and add the first section and it’s elements, feel free to follow along with this example or put your own spin on the web page.



  </p>


    Introduction to winter camping


    <h1>Winter Camping for Beginners</h1>

      <h2>Introduction</h2>
      <p>
        With careful planning and preparation, winter camping can be an amazing
        experience. If you're thinking about going camping in the winter, this
        page is a great place to start.
      </p>


<p><br>
</p>
<pre class="highlight plaintext"><code>




</code></pre>
<p>&lt;!DOCTYPE html&gt;<br>
<br>
  </p><br>
    <br>
    <br>
    Introduction to winter camping<br>
  <br>
  <br>
    <h1>Winter Camping for Beginners</h1><br>
    <br>
      <h2>Introduction</h2><br>
      <p><br>
        With careful planning and preparation, winter camping can be an amazing<br>
        experience. If you're thinking about going camping in the winter, this<br>
        page is a great place to start.<br>
      </p><br>
    <br>
    <br>
      <h2>Winter Camping Gear</h2><br>
      <p><br>
        <mark>Winter camping</mark> requires a bit more gear than a summer<br>
        camping trip would. It's <strong>important to be prepared</strong> for<br>
        the cold temperatures which <em>can become dangerous.</em> Here is a<br>
        list of gear that would be helpful when <mark>winter camping.</mark><br>
      </p><br>
      <ul>
<br>
        <li>Snowshoes</li>
<br>
        <li>Winter tent</li>
<br>
        <li>Cold-weather sleeping bag</li>
<br>
        <li>Insulated sleeping pad</li>
<br>
        <li>Handwarmers &amp; footwarmers</li>
<br>
        <li>Winter boots</li>
<br>
      </ul><br>
    <br>
  <br>

<pre class="highlight plaintext"><code>

6. Formatting the text
Now that we have a bit more content let’s add some formatting to the text. Formatting will change the appearance of the text and help make the page more readable. There are several different elements we can use to accomplish this:

&lt;b&gt; - This element represents bold text. It’s used to draw attention to or convey extra importance to specific text.
&lt;strong&gt; - This will render the same as the &lt;b&gt; element, however &lt;strong&gt; is semantic and helps describe the text it surrounds.
&lt;i&gt; - This element represents italic text and is used for an alternate mood from the regular text.
&lt;em&gt; - This marks the text to have emphasis
&lt;mark&gt; - This represents text that is highlighted or marked for reference.
&lt;small&gt; - This represents side-comments and the text it surrounds will render smaller.
&lt;del&gt; - This represents deleted text.
&lt;ins&gt; - This is used to represent inserted text. ins and del are both used to help track changes of a document.
&lt;sub&gt; - This element represents subscript text. Subscripts are rendered with a lowered baseline &amp; smaller text.
&lt;sup&gt; - This element represents superscript text. The text is rendered with a raised baseline &amp; smaller text.
Let’s go ahead and add a few of these elements to the previous paragraph section that we added.

7. Create a hyperlink
Start of the World Wide Web is the ability to define links from one page to another, and to follow links at the click of a button. This is Hyperlink.

— World Wide Web Consortium (W3C)

Hyperlinks are what make the web an actual web and are an important part of any web page. Almost any type of content can be converted to a hyperlink so that when a user clicks on that link they are brought to another URL.

We can create a hyperlink using the following element:

&lt;a&gt; - The a elemet or anchor element, has an attribute called href , that when used creates a hyperlink.
Let’s have a look at an example below:
&lt;a href="https://www.w3.org/"&gt;the World Wide Web Consortium homepage&lt;/a&gt;.
Which would result in:

the World Wide Web Consortium homepage.

Okay so know that we know the basics, let’s add a couple of hyperlinks to the list of winter camping gear. When a user activates them they will be brought to another address.



</code></pre>
<p>&lt;!DOCTYPE html&gt;<br>
<br>
  </p><br>
    <br>
    <br>
    Introduction to winter camping<br>
  <br>
  <br>
    <h1>Winter Camping for Beginners</h1><br>
    <br>
      <h2>Introduction</h2><br>
      <p><br>
        With careful planning and preparation, winter camping can be an amazing<br>
        experience. If you're thinking about going camping in the winter, this<br>
        page is a great place to start.<br>
      </p><br>
    <br>
    <br>
      <h2>Winter Camping Gear</h2><br>
      <p><br>
        <mark>Winter camping</mark> requires a bit more gear than a summer<br>
        camping trip would. It's <strong>important to be prepared</strong> for<br>
        the cold temperatures which <em>can become dangerous.</em> Here is a<br>
        list of gear that would be helpful when <mark>winter camping.</mark><br>
      </p><br>
      <ul>
<br>
        <li>Snowshoes</li>
<br>
        <li>
<br>
          <a href="https://www.rei.com/c/backpacking-tents/f/se-4-season">
            &gt;Winter tent</a>
          &gt;<br>
        </li>
<br>
        <li>
<br>
          <a href="https://www.rei.com/c/sleeping-bags-and-accessories">
            &gt;Cold-weather sleeping bag</a>
          &gt;<br>
        </li>
<br>
        <li>Insulated sleeping pad</li>
<br>
        <li>Handwarmers &amp; footwarmers</li>
<br>
        <li>Winter boots</li>
<br>
      </ul><br>
    <br>
  <br>

<pre class="highlight plaintext"><code>


8. Style the web page
If we have preview the web page right now we’ll see that it’s not the most exciting to look at. We can change that by adding some basic styles to the HTML document. To do this we’ll add a &lt;style&gt; element which allow us to embed CSS in the HTML document.

We’ll add the style element in the head element of the HTML document. I won’t go into detial about the CSS that I’ve included, if you’re curious about anything specific check out the MDN CSS reference docs.




</code></pre>
<p>&lt;!DOCTYPE html&gt;<br>
<br>
  </p><br>
    <br>
    <br>
    Introduction to winter camping<br>
    &lt;br&gt;
      html {&lt;br&gt;
        max-width: 800px;&lt;br&gt;
      }&lt;br&gt;
      body {&lt;br&gt;
        background-color: white;&lt;br&gt;
        margin: 0 4rem;&lt;br&gt;
        font-family: Arial, Helvetica, sans-serif;&lt;br&gt;
        font-size: 1.15rem;&lt;br&gt;
      }&lt;br&gt;
      section {&lt;br&gt;
        border-bottom: lightblue solid 2px;&lt;br&gt;
      }&lt;br&gt;
      h1 {&lt;br&gt;
        font-size: 3em;&lt;br&gt;
      }&lt;br&gt;
      ul,&lt;br&gt;
      li {&lt;br&gt;
        list-style: square;&lt;br&gt;
      }&lt;br&gt;
      em {&lt;br&gt;
        color: red;&lt;br&gt;
      }&lt;br&gt;
    <br>
  <br>
  <br>
    <h1>Winter Camping for Beginners</h1><br>
    <br>
      <h2>Introduction</h2><br>
      <p><br>
        With careful planning and preparation, winter camping can be an amazing<br>
        experience. If you're thinking about going camping in the winter, this<br>
        page is a great place to start.<br>
      </p><br>
    <br>
    <br>
      <h2>Winter Camping Gear</h2><br>
      <p><br>
        <mark>Winter camping</mark> requires a bit more gear than a summer<br>
        camping trip would. It's <strong>important to be prepared</strong> for<br>
        the cold temperatures which <em>can become dangerous.</em> Here is a<br>
        list of gear that would be helpful when <mark>winter camping.</mark><br>
      </p><br>
      <ul>
<br>
        <li>Snowshoes</li>
<br>
        <li>
<br>
          <a href="https://www.rei.com/c/backpacking-tents/f/se-4-season">
            &gt;Winter tent</a>
          &gt;<br>
        </li>
<br>
        <li>
<br>
          <a href="https://www.rei.com/c/sleeping-bags-and-accessories">
            &gt;Cold-weather sleeping bag</a>
          &gt;<br>
        </li>
<br>
        <li>Insulated sleeping pad</li>
<br>
        <li>Handwarmers &amp; footwarmers</li>
<br>
        <li>Winter boots</li>
<br>
      </ul><br>
    <br>
  <br>

<pre class="highlight plaintext"><code>



Let’s have a look at what the web page looks like now.

web page with image inserted

As the The Net Ninja would say, it’s not going to win any design awards but for our first web page it’s starting to take shape.

Wrap up
In this tutorial we learned how to create an HTML document, we learned about some commonly used elements such as lists, images, hyperlinks, headings and paragraphs. We applied some basic styles and formatting to the text to make the design a bit more appealing.

From here I’d suggest to roll up your sleeves and start coding your own HTML page from scratch. Once you’re a bit more confident, build something more complex using just HTML. There are a ton of trendy frameworks, libraries and other tooling out there to help you build web pages but you can build some incredible things just with HTML and sharpening your HTML skills will make you a better developer and the web a better place.


</code></pre>