Create a simple website from scratch for free using HTML/CSS or PHP

Posted by

Admin

May 03, 2024 Blogs, Technical Blogs 1014 Views

learn how Create a simple website from scratch for free using HTML/CSS or PHP for freshers and learn about sample website using html , css and js

Creating a simple website from scratch using HTML and CSS is a great way to learn the basics of web development and create a functional website without any costs. This guide will walk you through the process of creating a simple website from scratch, including writing the HTML and CSS code, hosting the website, and previewing it in a web browser.

Here is a step-by-step guide to creating a simple website from scratch using HTML/CSS:

Choose a text editor: You`ll need a text editor, such as Notepad++, Sublime Text, or Visual Studio Code, to write your HTML, CSS, and PHP code.
Write the HTML structure: Write the basic HTML structure for your website, including the <html>, <head>, and <body> elements. Add headings, paragraphs, images, and any other content that you want to include on your website.
Style the website with CSS: Add CSS styles to your HTML file to control the layout and appearance of your website. You can use an external stylesheet or include the CSS styles within the <head> element of your HTML file.
Preview the website: Open the HTML file in a web browser to preview the website and check for any issues.
Add dynamic functionality with PHP: If you want to add dynamic functionality to your website, such as contact forms or database-driven content, you can use PHP. You can add PHP code within the HTML file or create a separate PHP file and include it in the HTML file using the <?php include("file.php"); ?> statement.

This is a simple guide to get you started with creating a website from scratch. As you become more experienced, you can expand your skills and add more complex functionality to your website.

Here is a sample code for a simple website with HTML and CSS:

<!DOCTYPE html>
<html>
  <head>
    <title>My Simple Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <header>
      <h1>My Simple Website</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </nav>
    <main>
      <section id="home">
        <h2>Welcome to My Simple Website</h2>
        <p>This is a simple website created using HTML and CSS.</p>
      </section>
      <section id="about">
        <h2>About Us</h2>
        <p>Learn more about us and what we do.</p>
      </section>
      <section id="services">
        <h2>Our Services</h2>
        <p>Find out more about the services we offer.</p>
      </section>
      <section id="contact">
        <h2>Contact Us</h2>
        <p>Get in touch with us and let us know how we can help.</p>
      </section>
    </main>
    <footer>
      <p>Copyright &copy; 2023 My Simple Website</p>
<




code>    </footer>
  </body>
</html>

CSS Code :

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: lightgray;
  padding: 20px;
  text-align: center;
}

nav {
  background-color: gray;
  padding: 10px;
  text-align: center;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  color: white;
  text-decoration: none;
}

main {
  padding: 20px;
}

section {
  margin-bottom: 20px;
}

footer {
  background-color: lightgray;
  padding: 10px;
  text-align: center;
}

`tag contains all the elements of your website, and within it is the<head>tag, which includes the title of your website and a link to the CSS file,style.css`.

The <body> tag contains all the visible content of your website, including the header, navigation, main content, and footer. The header is defined by the <header> tag, which contains an <h1> tag with the title of your website. The navigation is defined by the <nav> tag, which contains an unordered list (<ul>) with a list of links to different sections of your website. The main content is defined by the <main> tag, which contains four sections, each with a unique ID and an <h2> tag for a title, and a <p> tag for content. Finally, the footer is defined by the <footer> tag, which contains a <p> tag with a copyright notice.
CSS Style: The CSS code defines the appearance of your website. It starts with a body rule, which sets the default font-family and margins/padding. The header rule sets the background color, padding, and text alignment of the header. The nav rule sets the background color, padding, and text alignment of the navigation. The nav ul rule sets the list style and margins/padding for the unordered list. The nav li rule sets the display and margin for each list item. The nav a rule sets the color and text decoration of the links. The main rule sets the padding for the main content. The section rule sets the margin-bottom for each section. The footer rule sets the background color, padding, and text alignment of the footer.
Hosting: To host your website for free, you can use a free hosting service, such as 000webhost or InfinityFree. To use these services, you`ll need to create an account, upload your HTML and CSS files, and link to your website using the provided URL.
Previewing: To preview your website in a web browser, simply open the URL in a web browser of your choice, such as Google Chrome, Firefox, or Safari. You should see your website with the content and style defined in your HTML and CSS code.

In conclusion, creating a simple website from scratch using HTML and CSS is a great way to learn the basics of web development and create a functional website for free. With a little bit of code, you can create a website with a header, navigation, main content, and footer, and add your own style using CSS.

Note: To host your website for free, you can use a free hosting service such as 000webhost, InfinityFree, or Byethost. These services will give you a domain name and provide the necessary server space to host your website.