Showing posts with label HTML. Show all posts

BEM methodology in HTML and CSS

The Block, Element, Modifier (BEM) methodology is a popular naming convention for classes in HTML and CSS. Developed by the team at Yandex, its goal is to help developers better understand the relationship between HTML and CSS in a given project. Here’s how it works:

Block: A top-level abstraction of a new component (e.g., a button). It acts as a parent and is represented by a class like .btn.
Element: Child items placed inside the block. They are denoted by two underscores following the block’s name (e.g., .btn__price).
Modifier: Changes the style of the block without affecting unrelated modules. Modifiers are appended with two hyphens (e.g., .btn--orange).

By following BEM, developers can create reusable components, easily see existing modifiers and children, and maintain consistent naming for better communication within the team.

References:

https://css-tricks.com/building-a-scalable-css-architecture-with-bem-and-utility-classes/
https://css-tricks.com/bem-101/
https://en.wikipedia.org/wiki/CSS

responsive iframe

When we create an iframe in our site or page, the layout of iframe is always challenging for our site if our site is responsive and device friendly. I faced this issue many time when I try to embed any other site of doc in my blog post.

But then I found a solution for this, which is simple and easy. With the help of few line of simple css code we could make our iframe responsive. Without any delay lets see an example.

I have created an iframe here and embed my blog in this. This is fully responsive you may browse this page on different resolution and size of screen(like mobile, tablet, netbook, and PC).

Here is the CSS style code snippet which we need to include in head or body section of html code.

<style>
.iframe-container {

  /* this class will make the div container based on the size of the screen.

     we can adjust the padding-top to give a fixed height to div.

 */
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 100%; 
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

Below is the code to create iframe using html iframe tag. In this code you just have to update the src. src (source) attrubute will hold the source url which you want to show in this iframe.


</style>

<!--responsive iframe section -->
<div class="iframe-container"> 
  <iframe class="responsive-iframe" src="https://rashidjorvee.blogspot.com/"></iframe>
</div>

Hope this helps you! Thank You!

Responsive and rich accordion design

Responsive and rich accordion design using HTML and CSS:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: #A678CF;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  border-top: 1px dotted #0069b9;
  margin: 5px 0 0 5px;
}

.accordion:before {
  content: '>';
  color: white;
  font-weight: bold;
  float: left;
  margin-right:10px;
  margin-left: 0px;
}

.active:before {
  content: "^";
}
.active, .accordion:hover {
  background-color: green; 
}

.panel {
  padding: 0px 18px;
  margin-left: 25px;
  margin-right: -5px;
  display: none;
  background-color: green;
  overflow: hidden;
  color: white;
}
</style>
</head>
<body>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

</body>
</html>

Accordion component

Accordion using simple html and css

In this tutorial we are going to create an accordion just using the simple HTML, JavaScript and CSS, as shown below Accordion example picture.

Accordion example

Here is the complete code snippet which we could use to design the same accordion as shown above.

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.accordion {
  background-color: chartreuse;
  color: #444;
  cursor: pointer;
  padding: 18px;
  margin: 5px 0px 0 5px;
  width: 100%;
  border-top: 1px dotted #0069b9;
  text-align: left;
  
  outline: none;
  font-size: 15px;
  transition: 0.4s;
  transform: skew(-20deg);
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion:before {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: left;
  margin-right:10px;
  margin-left: 0px;
}

.active:before {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>

<h2>Accordion with symbols</h2>
<p>In this example we have added a "plus" sign to each button on the left side of the accordion section. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Accordion 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Accordion 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Accordion 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

</body>
</html>

You can browse this live example and try and play with this on W3School.com. Click here to open the example.

Student registration form in HTML

Create a simple student registration form using HTML. This form should have option to fill the following:

Student Name
Student Email
Program Type
Interested in doing which course
Day preference
Submit and Clear button

Below is the HTML code. You could copy and paste the complete content and run in your machine.

You HTML form will look like as below:

Hope this helps you to create and understand the different input fields of HTML and how to develop a HTML form using all kind of input fields.

rashid jorvee blog

Menu

BEM methodology in HTML and CSS

References:

responsive iframe

Responsive and rich accordion design

Accordion using simple html and css

Student registration form in HTML

Featured Post

Social Media and Its Effects on Human Brain Health

Author