In this article, I guide you on how to manipulate or alter the style of an HTML element via the style method inside JS.

According to the CSS when we write inside an HTML file we use the style tag to write in as well in JS we use the style method to alter the style of an HTML element.

For example, we have h1 tag with some text inside it. I want to alter or change its color,font-size,font-family…

In this article, I’ll teach you more HTML DOM element properties and attributes.

When you add an anchor link 🔗 to your website it has many attributes for example: href …ect as well img tag,p,h1…h6…

Today I want to access these attributes via DOM.

In this article, I teach you how to write HTML markup inside JS.


This method returns HTML element content like innerText and textContent if any HTML element is available inside that element text then innerHTML returns that element along with its content as a normal text.

HTML element and JS innerHTML

It seems like innerText but it’s not accurate. As I mentioned yesterday we can alter the content of an HTML element in JS via DOM methods.

For example, if you want to write Hello friend and the friend word must be in the bold format you can achieve this via innerHTML inside JS.

In this article, I intended to teach you how to alter the HTML element innerText and text content.

If you target an HTML element and write console.dir(elementName) you’ll soo many attributes. if you scroll down and in I section you’ll see innerHTML, innerText and in T section you’ll see textContent. In this session, I teach you innerText and textContent and in the next lesson,k I’ll teach innerHTML which is very important.

If you write the above code and open your browser console by pressing ALT+SHIGT+I.

In this article, I’m going to teach the DOM methods.

Accessing HTML elements via class

If you want to access your HTML element and add changes to it the one approach is accessing by its class name.

For example, you have a paragraph(p) tag and want to access it by its class name.

HTML paragraph tag

we have p tag with para class name now I want to add changes to it or access it in my JS file.

In this article, I’m going to guide you on what’s DOM and how to work with DOM?

DOM(Document Object Model) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

A web page is a document. This document can be either displayed in the browser window or as the HTML source. But it’s the same document in both cases. The Document Object Model(DOM) represents that same document so…

In this article, I guide you through free resources to learn front-end development without spending much more money.


If you are a beginner and wanna scratch the surface of HTML,CSS and JS then your choice is CodeCademy course. this course has free and paid courses if you wanna learn deeply and practice your programming knowledge you’ve to pay money.


If you’re a beginner in field of Frond-end development and wanna overview what you’re gonna learn and as well learn some basic stuff of HTML,CSS and JS then I recommend you to review TheOdinProject.

In this tutorial, you’ll learn how to create a scroll-to-top button.


Creating a scroll-to-top button with smooth scrolling.


  1. Detect user scroll
  2. Display scroll-to-top button after a certain amount of time
  3. Go to the top when the user clicks on it

Detect user scroll

How to detect user scroll?

First, we create a function called handleScroll() in this function we detect the user scroll.

we need to access the document elements for this case we use document.documentElement(). this returns all the elements used in the page.

In this article, I guide you on the paths to how to reach your goal in a self-taught development career.

The main three languages that are required to reach your dream in self-taught development career path are:

HTML(HyperText Markup Language)

It is one of the main languages which constructs the skeleton and base of web development.

For example, if a person doesn’t have bone, can he/she walk, run… no he/she can’t because he/she doesn’t have any pillar or power to run or walk…

In web development, HTML is the core language that every web developer needs to comprehend.

The current version of HTML…

In this article, I’ve intended to teach you how to create accordion in vanilla JS.

An accordion is everywhere if you explore the web you may know what’s accordion if don’t know I elucidate it for you.

An accordion is simply used for FAQ which is a frequently asked question. it is used at the end of a web page for clarifying users' thoughts.

Creating Accordion HTML Part

In the HTML part, I used a button tag for triggering accordion detail and I put the content or the answer part in panel class.

Now I want to add some design to my accordion.

CSS Designing Part


I am a web developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store