Basics

To get started with your first website, you need an IDE and a browser to check your website. If you can’t get an IDE, notepad works too. Just make sure you’re fine with what you have. Now, start up your IDE, create a folder for your project. Then add a .html file, we will use that to make our website. Now type in, “<!DOCTYPE html>” in your first line, and start with a <html> tag on the next line. Don’t forget to close it (use </html>). Some IDEs auto close your tags, but you can always do it by yourself on practice. There are some self-closing tags like <img /> which do not require a closing tag. It is also necessary and a good practice that you include the title of the page, in the head element, and place all the other elements to be displayed in the body element.

            
<!DOCTYPE html>
<html>
  <head>
    <title>Title Here</title>
  </head>
  <body>
  </body>
</html>

Text

Text is definitely one of the most useful elements of html. You can choose between h1-h6 element types, which usually mean the size of each element. Also, you can manually change the font size anytime, using CSS techniques and styling. We'll learn that later. There is also the p element, which refers to a paragraph element in html. We will see their workings and see a demo on how to print hello world using h1 element.

            
<h1>Hello World</h1>
<p>This is my first website</p>

Media

So, we have launched our first website. Now, what if i told you can make your own Spotify? That's right. You can include Images, Videos and Music (Audio Files) in html. How do you do it? You use elements specific for img, video, audio. Refer to the example. As you may infer, img is self-closing, so don't worry about closing it manually. All the 3 elements have src in common, which refers to "source" of the file.

            
<img src="niyas.jpg">
<audio src="dad.mp3"></audio>
<video src="rad.mp4"></video>

Hyperlink

Now that we've made our own spotify, let's make our own link to another website. Doesn't make sense, right? It will in a few. So, did you know that you can inlcude hyperlinks in html? It is one of the fundamental topics in html. You can do it by using the a element. Yes, you heard it right. The "a" element. It refers to links. And you can give "href" attributes to the links for redirecting purposes. You can also make the browser open it in a new tab or open it as in the same page. That's by providing the "target" attribute.

            
<h1><a href="https://pewdiepie.com">Go to pewdiepie</a></h1>
<h1><a href="#">Go to home</a></h1>
<h1><a href="https://spotify.com">Go to spotify</a></h1>

Lists

Lists are very important when it comes to navigation in html. You can use lists such as, Unordered lists, Ordered lists. These lists define how your list elements are numbered. Ordered lists usually number the lists by order, in 1,2,3,....etc. But Unordered lists make sure that the elements are bullet points. Here's a code snippet to use.

            
<ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ol>

Tables

Tables in html are mostly used when things are plotted, billed, or analyzed. Especially when you are tallying values and designing a layout to spread the data around for several ordered years, tables are used. Here's a quick example of how it works. Btw, I'm planning on making a time-table project for my class in the university.

            
<table>
  <tr>
    <th>Big name</th>
    <th>Day of the man</th>
    <th>Month of the man</th>
  </tr>
  <tr>
    <th>Niyas</th>
    <th>10</th>
    <th>July</th>
  </tr>
</table>

Styling

Styling is basically making or adjusting our design in the website to greater bounds and improvements. But how do we do it? That's where CSS3 comes in. You can make internal, external and inline styles. Inline styles are generally used to mark the current element, for example, you declare an element and say it's properties with it. External is the most popular way of making CSS styling.

            
<h1 style="color:white;padding:30px;">Welcome mat.</h1>
<style>
  .xleftcol {
    float: left;
    width: 33%;
    background:#809900;
  }
</style>

Linking

When you are making way for external CSS file, you have to link it to the current html file so that the web browser can combine them together to give out standard website layout. This is a very important step. The syntax for the following linkage is given below.

            
<link rel="stylesheet" href="style.css" />

Selectors

Now that we have learnt how to link your css files, let's look at how you can use Selectors in CSS to bring out and manage properties of your elements in html. This can be done by using a set of parameters, . or # or [] or [attribute = value]

            
#thisisid {
  property;
}
.thisisclass {
  property;
}
.thisisclass, .anotherclass {
  property;
}

Properties

Every property ever that you can include for HTML can be entered in CSS as well. You can select the correct properties, for example color, border, padding, alignment, margin, etc. for enabling proper website design. You can also unset some of the properties, and the most important thing to consider in CSS is the inheritance of the properties. Please refer to actual documentation if you want to know more.

            
#thisisid {
  background-color: #eee;
  border: 1px solid #999;
  display: block;
  width:70%;
  overflow: auto;
  font-family: monospace;
  font-size: 20px;
  padding: 5px;
}

Transform

Transformations/Transitions enable smooth transitions of HTML elements. It is used primarily to mark down the fluid mechanism of the website. For example, this website is heavily transitioned to make it feel smoother. Further smoothness and development can be enabled through application of JavaScript, but that's a topic for another day.

            
transition: all 0.3s ease 0s;

HTML5

CSS3