CTRL ALT News
Posts
How To Code a Website in 2023 For Beginners (HTML/CSS)

How To Code a Website in 2023 For Beginners (HTML/CSS)

Coding your first website can be daunting, but in this article I will show you how to create a simple login page of your own, using only HTML and CSS. You will be taught what HTML and CSS are, and how to set them up correctly.

CTRL ALT News
October 15th, 2023

How To Code a Website in 2023 For Beginners (HTML/CSS)

Coding your first website can be daunting, but in this article I will show you how to create a simple login page of your own, using only HTML and CSS.

You will be taught what HTML and CSS are, and how to set them up correctly.

What is HTML and CSS?

HTML, which stands for Hypertext Markup Language, allows web developers to structure and present content on websites. Using HTML, one can insert text, images, videos, and other multimedia elements into a web page. HTML uses tags to mark up different sections of content, like paragraphs, headings, lists, and links. This markup provides semantic meaning and structure to the information on a page.

CSS, which stands for Cascading Style Sheets, enables web developers to control the appearance and layout of web pages. Using CSS, one can format elements on a page like size, color, positioning, and more. CSS allows developers to style headings, links, and paragraphs, and position elements like images, videos, and navigation bars in a desired way. CSS helps separate document structure from presentation, making it easier to maintain and update website styles.

Setting things up

First, create a new folder to contain the files for your website. You can name it whatever you like, as long as you can locate it again easily.

Inside this folder, you'll need three files to build your site:

Background Image - This will be the background wallpaper for your login page. Find a suitable image on Google or other image sites. Remember what image type it is (png, jpeg, and so on), this will be relevant later.
index.html - This is the main HTML file that will contain the structure and content of your site.
styles.css - This CSS file will hold the styling rules that control colors, fonts, layout, and other design elements.

Be sure to give the HTML and CSS files those exact names - index.html and styles.css. This will make sure the files are referenced correctly.

With these three key files in place, you'll have the basic components needed to start building and designing your website. The HTML will provide the content, the CSS will handle styling, and the image will contribute visual flair.

Building the page

Let's start setting up the index.html file to build the foundation of the webpage.

First, you need the standard HTML boilerplate code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

This provides the basic HTML structure. The section contains metadata about the page - character encoding, viewport settings, and the page title. This data isn't visible but helps configure how the page is displayed.

The section will contain all the visible page content - text, images, links, etc. This is where we'll add the components that build up the login page.

Later, you can link our external CSS stylesheet in the to control styling and layout. We'll also configure custom fonts and add other metadata.

Metadata

Within the section of index.html, you need to add some metadata to configure styling and fonts:

<link rel="stylesheet" href="styles.css">

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">

I recommend that you copy and paste the above code into your project.

By including these tags in the head section, you connect the external stylesheet for styling rules and load the custom font to be applied to text on the page.

Make sure your total HTML code looks like the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Login Form</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

The HTML code

You have prepared the groundwork and are now ready to build the framework of the web page by writing the HTML code. This HTML code will form the backbone and structure of the page.

The complete HTML code that you need inside the section of the HTML document looks as follows:

<form class="formContainer">
      <h1>Sign In</h1>

      <div class="inputContainer">
        <label for="emailInput" class="inputLabel">Email</label>
        <input type="text" id="emailInput" placeholder="[email protected]" autocomplete="email" required/>
      </div>

      <div class="inputContainer">
        <label for="passwordInput" class="inputLabel">Password</label>
        <input type="password" id="passwordInput" placeholder="********" autocomplete="current-password" required/>
      </div>

      <div class="extrasContainer">
        <div class="checkBoxContainer">
          <input type="checkbox" class="checkbox" id="checkbox"/>
          <label for="checkbox">Remember Me</label>
        </div>
        <a href="#">Forgot Password</a>
      </div>

      <button>Sign In</button>

      <p>Don't have an account? <a href="#">Register Here!</a></p>
    </form>

The above code should be placed inside the tags of your HTML.

The HTML code may look complicated if you're new to web development, so let's break it down step-by-step:

The tags indicate that everything within is part of the body of the HTML document.
The tags create a form that users can submit data into, in this case, their email and password to log in.
The <h1>Sign In</h1> is a heading that labels the purpose of the form.
The <div class="inputContainer"> creates a division to hold each input field and its corresponding label.</div>
The tags provide labels for the input fields. The for attribute associates the label with the input id.
The tags create the actual input fields, one for email and one for password. The type attributes specify the input type. Other attributes like placeholder provide hints for the expected input.
The <div class="extrasContainer"> holds extra elements like the checkbox and forgot password link.</div>
The creates a checkbox that can be used to allow users to choose to remember their login.
The <a> tag provides a link for the forgot password text.</a>
The creates a submit button so users can submit the form.
The <p> paragraph at the end prompts users to register if they don't already have an account, with a link to do so.</p>

How do I view my HTML code?

Now that you have written your HTML code, you probably want to see what your HTML looks like on a real web page.

Viewing your HTML is easy. Just double-click on the index.html file. This will open the file in your default web browser (like Chrome or Firefox).

When you double-click index.html, your browser will display all the HTML code you wrote as a webpage. You'll be able to see the text, buttons, and any other elements in your HTML document rendered on the page.

To view any changes done in your code (such as index.html or styles.css), you will simply have to reload the website in your browser. This can be done by pressing CTRL+R, or the equivalent on something like a Macbook. You can also click the small reload button at the top of the browser.

The CSS code

Now that you have seen your HTML web page, you are probably thinking, “This looks awful”, this is because you have not styled the page yet.

To style the page you will need to write some code inside your styles.css file. The code you will need looks like this:

*,
body {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-family: "Open Sans", sans-serif;
  color: white;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url("./bg.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  object-fit: contain;
}

form {
  height: fit-content;
  width: 500px;
  padding: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.inputContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}
.inputLabel {
  font-weight: bold;
}

input {
  padding: 0.5rem;
  background-color: transparent;
  border: white 1px solid;
  border-radius: 16px;
}
input::placeholder {
  color: white;
  opacity: 0.5;
}
input:active,
input:focus {
  outline: 1.5px white solid;
}

button {
  cursor: pointer;
  padding: 0.5rem;
  background: white;
  border: none;
  font-weight: bold;
  color: black;
  border-radius: 16px;
  font-size: 0.9em;
  width: 100%;
  transition: all .2s ease-in-out;
}
button:hover {
  transform: scale(1.01);
  filter: drop-shadow(0px 5px 15px #ffffff3a);
}

.extrasContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.9em;
  width: 100%;
}

The CSS code above may look complicated if you're new to web development, so let's break it down step-by-step:

The * and body selectors reset default margins, padding, box-sizing, etc to create a clean slate. Font family and color are also set here.
The body styles size the page, center the content, add a background image, and configure the image to cover the body.
The form selector styles the login form itself - setting the size, layout, colors, etc. Things like flexbox, gap, and backdrop filter are used for layout and visual styling.
The .inputContainer class styles the divs that contain the inputs, setting them to display as a column.
The .inputLabel labels are styled to be bold weight.
The input styles apply to all input fields, styling the padding, borders, placeholder color, focus outline, etc.
The button is styled with padding, colors, border radius, transitions, etc. The hover state has effects added.
The .extrasContainer holds the extra checkbox and links, styled with flexbox.

If you don't see a background image on your webpage, it's likely because the filename in your CSS code doesn't match the actual name of the image file. The CSS currently sets the background-image to "./bg.jpg". This URL points to an image file named bg.jpg in the same folder as your HTML and CSS files. But your image might be named something else, like background.jpg or myphoto.jpg. Try changing the filename in the background-image URL to match the actual name of your image file. So if your file is called myphoto.jpg, the CSS should say:

background-image: url('./myphoto.jpg');

You are now done!

Great job - you've created an HTML and CSS login page! To see your new webpage, open the index.html file on your computer by double-clicking it. This will launch your default web browser and display the login page. You should now see the styled form fields, buttons, and any images or text content you added in the HTML and CSS files.

If you want to learn more

The best way to continue learning HTML and CSS is to experiment with the code you just wrote. Try tweaking different elements in the HTML and CSS files to see the effects. For example, you could change the text color, increase the font size of the headers, or swap out the background image. Playing around with the existing code is a great way to get a feel for how everything fits together. Don't be afraid to break things as you edit - you can always undo changes or start fresh. Hands-on practice and exploration will build your skills much faster than any tutorial.

Below are some links to different websites that can help you learn web development: