DEV Community: Mohammad Mojahidul Islam

How I Created My First Website Using Hostinger in 10 Minutes – No Coding Needed

Mohammad Mojahidul Islam — Fri, 18 Apr 2025 17:57:58 +0000

I always thought building a website required knowing how to code or hiring expensive developers. But I was wrong.
Last week, I built my first website without writing a single line of code, in under 10 minutes - thanks to a simple tool called Hostinger Website Builder.
Whether you're a freelancer, student, or just want to start a blog, you can do this too.
Let me show you exactly how I did it 👇

⚙️ Step-by-Step Guide to Create a Website (No Code)
✅ Step 1: Go to Hostinger
I used this link to get up to 80% OFF on hosting + free domain.
Once you're on the page:
Choose a plan (I started with the cheapest one)
Claim your free domain (like yourname.com)
Complete the purchase - it takes 2 minutes

🟢 Tip: You don't need to be a techie. It's beginner-friendly.

✅ Step 2: Choose a Website Template
After purchase, Hostinger takes you to its AI Website Builder. I selected a beautiful template that looked perfect for my personal brand.
You can customize:
Fonts, colors, layout
Add your own text/images
Even drag & drop sections

✅ Step 3: Hit "Publish" - And That's It!
Literally after clicking publish, my site was live on the internet.
I shared it with friends, and they were shocked that I made it myself!

🎁 Why I Recommend Hostinger
✅ No coding needed
✅ Free domain + email
✅ Very fast + mobile-friendly
✅ Great for beginners and professionals alike

I highly recommend it if you want to:
Start a blog
Launch a portfolio
Open an online store

👉 Here's the link I used to get the discount:
link

❤️ Final Thoughts
I wasted months thinking about starting a website. You don't have to.
Just follow the same steps I did and get your site live in 10 minutes.
It's easy, affordable, and… kind of fun 😄
If you found this helpful, feel free to share it or leave a comment!

JavaScript Execution Context!

Mohammad Mojahidul Islam — Wed, 21 Aug 2024 04:52:20 +0000

In JavaScript, when a function is defined and later invoked, it creates an abstract container known as an execution context. This execution context holds several key components: the variables declared within the function, any nested functions, and the lexical environment. Together, these elements define the operational environment for the function's execution.

Browser Context

Mohammad Mojahidul Islam — Sat, 17 Aug 2024 12:18:28 +0000

The browser context refers to the overall environment and capabilities provided by the web browser to web applications. It contains many things inside itself, like the window object, DOM, and Browser APIs.
Window Object: In JavaScript, the window object is the main entry point to the browser context. We can access the window object and its properties and methods to interact with the browser. For example:- window.alert("Hello world!").

Document Object Model (DOM): The DOM is the way the browser represents the structure of the web page. JavaScript can use the DOM to access and manipulate the elements on the page.

Browser APIs: Browsers provide various APIs that JavaScript can use to extend the functionality of web applications.

What is Hoisting?

Mohammad Mojahidul Islam — Mon, 12 Aug 2024 04:45:36 +0000

In JavaScript, variables and functions are moved, or "hoisted," to the top of their containing scope. This process is known as hoisting. When a variable or a function is declared, the declaration is hoisted to the top of its containing scope. This means we can access them before they are explicitly declared in the code. However, their values are not hoisted, so we can only access the value of a variable after the line where it is initialized.

What are props in ReactJs?

Mohammad Mojahidul Islam — Fri, 14 Jun 2024 17:36:08 +0000

In React.js, props (short for properties) are the way to pass data from a parent component to a child component. This allows for a unidirectional data flow, where the data flows from the parent to the child, and not the other way around.

Suppose we have a parent component named Dad and a child component named MySelf. Inside the MySelf component, we have another child component called SpecialPerson. The goal is for the Dad component to send a gift to the SpecialPerson component.

Dad Component:
The Dad component wants to send a gift to the SpecialPerson component. To do this, it will pass a prop called gift to the MySelf component.
<MySelf gift="Gold Ring" />

MySelf Component:
The MySelf component receives the gift prop as an object in its function parameter.
const MySelf = ({ gift }) => { // Now, theMySelfcomponent can access thegift` prop
return (

I received a {gift} from my dad!

);
};

SpecialPerson Component:
The MySelf component then passes the gift prop to the SpecialPerson component.

const SpecialPerson = ({ gift }) => { // TheSpecialPerson component can now access the giftprop return ( <div> <p>Wow, I received a {gift} from my dad through my myself!</p> </div> ); };

What is the ReactJs Component Lifecycle?

Mohammad Mojahidul Islam — Wed, 12 Jun 2024 09:15:58 +0000

The React component lifecycle is the sequence of events that happens from the creation of a component to its deletion, including updates in between. This lifecycle consists of different phases: Initialization, Mounting, Updating, Unmounting, and Error Handling, each associated with specific lifecycle methods.

Mounting Phase:

The mounting phase occurs when a component is instantiated and inserted into the DOM for the first time. This phase includes the following lifecycle methods:
constructor(): Initializes the state and binds event handlers.
static getDerivedStateFromProps(): Syncs state with props.
render(): Returns the JSX to render.
componentDidMount(): Invoked once the component is mounted and ready.

Updating Phase:

The updating phase is triggered whenever there are changes to the state or props. During this phase, the initial virtual DOM and the updated virtual DOM are compared (diffing), and only the changed parts are merged into the actual DOM. Lifecycle methods involved in this phase include:
static getDerivedStateFromProps(): Called when state or props change.
shouldComponentUpdate(): Determines if the component should re-render.
render(): Re-renders the component.
getSnapshotBeforeUpdate(): Captures some information before the DOM is updated.
componentDidUpdate(): Invoked after the component updates.

Unmounting Phase:

The unmounting phase occurs when a component is removed from the DOM. This phase has a single lifecycle method:
componentWillUnmount(): Called immediately before the component is destroyed and unmounted.

Error Handling Phase:

Error boundaries in React handle errors that occur during the rendering process, in lifecycle methods, and constructors of the whole tree. This phase includes:
componentDidCatch(): Catches errors in rendering and lifecycle methods.

Why Javascript is used in web applications

Mohammad Mojahidul Islam — Thu, 14 Dec 2023 17:30:05 +0000

Javascript is used in web applications to make applications more interactive. Here interactive means that when we click somewhere on a web page it shows a message alert, date, or something else for example when we search for something on YouTube it shows us the result that we have searched for. So, this is called user interactivity in a web application

React Js change the title of the page when navigating to different routes

Mohammad Mojahidul Islam — Thu, 14 Dec 2023 15:47:40 +0000

We have seen in many web applications that when we try to move forward to another page or when we click on a route the application title automatically gets changed. Now, to implement this feature to your web application, what you ha to do is go to your chroome browser and search for react-helmet after that install it by using this command *npm install react-helmet *. After installing the package you have to add healmet to each component where you want to change your title. Example:-

 <div>
   <Helmet>
     <title>Your Page Title</title>
  </Helmet>
 </div>`