0
0
0
dark
0
0
0
Hand-Picked Top-Read Stories
Trending Tags
3 minute read
No comments

How to create a Website Using HTML and CSS Only

Daniel Waas
February 25, 2023
how-to-create-a-website-using-html-and-css-only
Total
0
Shares
0
0
0

How to create a Website Using HTML and CSS Only

Creating a website from scratch can be an exciting project for anyone with an interest in web development. One of the most basic and fundamental ways to start building a website is by using HTML and CSS. HTML (HyperText Markup Language) is used to structure and define content on a webpage, while CSS (Cascading Style Sheets) is used to add style and design to that content.

Building a website using only HTML and CSS may seem daunting at first, but it’s a great way to learn the basics of web development. By using these two languages, you can create a website that is fully functional and visually appealing without the need for any other programming languages or frameworks.

Photo by [Pankaj Patel](https://unsplash.com/@pankajpatel?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)

To get started, you’ll need a text editor and a web browser. There are many text editors available, but some popular choices include Notepad++, Sublime Text, and Visual Studio Code. Once you have your text editor set up, you can begin writing your HTML and CSS code.

 

Points to be discussed

  • Preview

  • YouTube Tutorial

  • Folder Structure

  • HTML Code

  • CSS Code

  • References

 

Preview :

Click Here

Screenshot :-

Screenshot of Created Website in this article

Live Demo : — COMING SOON

 

YouTube Tutorial :

 

Folder Structure

We are creating beginner-friendly websites, so for that, we use conventional file structure. We have one main folder with the name “Photo Arena,” and inside of that folder are an index.html and style.css for styling purposes. In addition to that, we also have one image, namely “bg1.jpg,” in the images folder for use as a background image. The background image is given below in the references.

Folder Structure — VS Code Explorer

 

HTML CODE :

index.html





  
  
  
  Photo Arena
  
  
  
  
  



  

    
    
    

      

        
 World of Images 

        
   Photography 

        
 Come 🏃 Capture 📸 Learn 🎓

         Learn More 
         Login

 

CSS CODE :

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Baloo 2', cursive;
}

.container {
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url(images/bg1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

nav {
  width: 100%;
  height: 12vh;
  background-color: #00000052;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-transform: uppercase;
}

nav .logo {
  width: 25%;
  text-align: center;
  font-size: 18px;
  text-shadow: 3px 4px 2px black;
}

nav .menu {
  width: 40%;
  display: flex;
  justify-content: space-around;
}

nav .menu a {
  text-decoration: none;
  color: #fff;
  font-weight: bold;
  margin-bottom: 2px;
  position: relative;
}

nav .menu a:hover {
  color: #00fc13;
}

nav .menu a::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #b200fc;
  transition: all 0.3s linear;
}

nav .menu a:hover::before {
  width: 100%;
}

nav .menu a:first-child {
  color: #00fc13;
}

main {
  width: 100%;
  height: 85vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff;
}

section h3 {
  font-size: 33px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 1px 1px 1px #000;
}

section h1 {
  margin: 14px 0px 18px 0;
  font-size: 45px;
  font-weight: 500;
  text-transform: uppercase;
  text-shadow: 1px 1px 2px #000;
}

section p {
  font-size: 20px;
  text-shadow: 1px 1px 1px #000;
  margin-bottom: 45px;
}

section a {
  padding: 9px 30px;
  border-radius: 4px;
  outline: none;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  margin-right: 14px;
}

section .btn1 {
  background-color: #fff;
  color: black;
}

section .btn1:hover {
  background-color: #000;
  color: #fff;
  transition: all 0.3s linear;
}

section .btn2 {
  background-color: #00fc13;
  color: black;
}

section .btn2:hover {
  background-color: #b200fc;
  color: #fff;
  transition: all 0.3s linear;
}

.nameslideshow:after {
  color: #00fc13;
  animation: changename 7s infinite linear;
  content: '';
}

@keyframes changename{
  0% { content: "Portrait"}
  25% { content: "Landscape"}
  50% { content: "Editorial"}
  75% { content: "Event"}
  100% { content: "Nature"}
}

 

References :

Google Fonts : https://fonts.google.com/specimen/Baloo+2

Background Image :

Eiffel Tower-Paris Reference Image from — [Pinterest](https://in.pinterest.com/)

Total
0
Shares
Share 0
Tweet 0
Pin it 0
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
understanding-the-differences-between-http-and-https

Understanding the Differences Between HTTP and HTTPS

February 25, 2023
Next Post
unions-and-narrowing-in-typescript

Unions and Narrowing in TypeScript

February 26, 2023
Related Posts