Posts

Create your first website with Home, Contact us, Register, Login Pages

Image
Create a Folder Structure for Your Website 1. Create a folder named MyFirstWebsite . 2. Inside the MyFirstWebsite folder, create the following HTML files: index.html (Home page) contact.html (Contact Us page) register.html (Registration page) login.html (Login page) MyFirstWebsite/ │ ├── index.html ├── contact.html ├── register.html ├── login.html └── main.css Note: why the main HTML file is named index.html 1. Default Behavior: Most web servers automatically serve index.html when a directory is accessed (e.g., http://example.com/). 2. Organizational Convention: It clearly indicates the starting point of a website, making projects easier to navigate. 3. SEO and Usability: Enhances usability for users and search engines by providing a clear homepage. 4. Historical Context: This naming convention has been widely accepted since the early days of the web. Using index.html ensures compatibility with hosting services and improves site navigation. File Content index.html <!DOCTYPE html...
Post a Comment
Read more

2. NextJS: Create custom modal with TS and Tailwind CSS

Image
We'll need a button to launch our custom modal, so when we click the "Open Modal" button, our custom modal should appear. <button className="rounded-md border h-10 px-4 text-white bg-blue-600 hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2  focus-visible:outline-blue-600" type="button" onClick={() => setModalClose(!modalClose)} >Open Modal</button> We will create a state to manage the opening and closing of modal. By default the modal is closed. 'use client' import { useState } from 'react' ... const [modalClose, setModalClose] = useState(true); Ok, now let's create our custom modal Install a package clsx, it will help us dynamically add or remove className at run time based on state change. npm i clsx Following is modal <div></div>: {/* Modal */}       <div id="custom-modal" tab-index="-1" aria-hidden="true"         className=...
Post a Comment
Read more