Posts

Showing posts with the label begineer

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

1. NextJS: Create project with TS and Tailwind CSS

Image
Follow the 2 step to Create Next JS app on current location and host it locally at port 3000. Steps 1. npx create-next-app@latest ./ As seen in the image below, make sure you choose Yes for required option. Run your NextJS app 2. npm run dev In console: Output: (Go to http://localhost:3000 in your browser)
Post a Comment
Read more

CSS: Types of Selectors

Image
  what is selectors? CSS selectors allow you to target specific HTML elements. You can select elements by tag name (e.g., h1, p), class (e.g., .container, .button), ID (e.g., #header, #footer), or other attributes. There are several important types of selectors in CSS: 1. Element Selector 2.  ID Selector 3. Class Selector 4. Pseudo-Class Selector 5. Pseudo-Elements Selector 6. Descendant Selector 7. Child Selector 8. Adjacent Selector 9. General Sibling Selector 10. Attribute Selector 1. Element Selector The simplest kind of selection targets HTML components based on their tag name. EX.  index.html <!DOCTYPE html>  <html lang="en">  <head>  <title>My First WebPage</title> <link href="./main.css" rel="stylesheet"></link> </head> <body>     <p>PARA 1</p>     <span>SPAN</span>      <p>PARA 2</p> </body> </html> main.css p {     color: red } Output: Oh no! Fan
Post a Comment
Read more