How to Create a Website with HTML and CSS

May 8, 2024

Mindmap

Creating a Website Using HTML and CSS

This video tutorial guides beginners on creating a website using only HTML and CSS, which can serve various purposes like business, personal use, or college projects.

Getting Started

  • Create a folder for your website and include a background image.
  • Use Visual Studio Code (VS Code) to select the folder and create two files: index.html and style.css.

Basic Structure

  • Name the webpage and link the style.css for styling.
  • Inside the body, create a div with class .main which will contain another div with class .nav bar for the navigation bar, including an icon class for the logo named pra.

Styling with CSS

  • Start with resetting margin and padding to zero.
  • Set the main class background with a linear gradient and include the background image.
  • Style the navigation bar (nav bar), including width, height, and margin.
  • Adjust the icon and logo styles (size, color, font).

Adding a Menu

  • Create a div with the class .menu containing an unordered list of menu items (Home, About, Service, Design, Contact).
  • Style the menu with CSS for layout and visibility.

Enhancing the Navigation Bar

  • Further CSS adjustments on navigation bar elements including display flex, list style, margin, and font adjustments.
  • Add hover effect for menu items.

Incorporating a Search Bar

  • Add a search bar with input and button within a new div class.
  • Style the search function with specific dimensions, font, and colors.

Content Section

  • Create a div for website content with headers indicating web design, development, and courses.
  • Insert descriptive text and a 'Join Us' button link.
  • Style the content section for visual appeal and readability.

Adding a Login Section

  • Include a login box with inputs for email and password, and a login button.
  • Style the login box with gradients, positions, and font changes for clarity.

Footer with Social Media Icons

  • Add divs for social media icons linking to platforms like Facebook, Instagram, Twitter, Google, and Skype.
  • Style the icons for consistency and hover effects.

Conclusion

  • The tutorial concludes with a recap of making a website using HTML and CSS.
  • Encourages feedback, likes, and subscriptions for the channel.