Welcome

Hello! This website is here to teach you the basics of HTML and CSS. There are many programming languages out there, but these are the two most suitable for creating web pages. HTML stands for Hypertext Markup Language, and it can do many things. You can use HTML to make headings, paragraphs, tables, buttons, pictures, and many more. Basically, if you were to look at a web page and take away all the decorations like alignment, spacing, font, color, et cetera, you would be left with the HTML. CSS stands for Cascading Style Sheets, and this is what creates the decorations, it's what makes a website look good. Like I said earlier, it's the alignment, spacing, font, colors, size, borders, and more.

Getting started

When wanting to program a website, you might find yourself asking, where do I go to write my code? When using any programming language, you must type it in a text editor. A text editor is exactly what it sounds like, it's a place where you can edit text and save it as a file on your computer. Some common examples are Microsoft Word or your computer's Notepad. These editors are preliminary, they don't really do anything to help you, that's why I recommend using an editor like Sublime Text Editor, Visual Studio Code, or Notepad++. What makes these editors so good is that they are free, and they color code. By this, I mean that instead of all your code being in black and white, once the editor knows what language you are writing in, it will automatically color code everything so that it is easy to distinguish. Also, when typing a command, it will show you options that you can click to have it finish for you, it works just like the suggestions bar on your phone keyboard. In order to activate these features when coding a website, save the document as a (insert name here).html file. Saving the document this way is also how you save it in order to see what you have been working on. Once you save it as a .html file you open it usually with Chrome but you can with pretty much any browser.

Starting the HTML page

Once you have opened up the page and saved it as a .html file the first theing that you will put is <!DOCTYPE html>

After that you should put the html tag

The first thing inside the html tag is <head>

One piece of info will be the title(goes inside the head)

Another piece of information that goes in the head is the meta tag

The last part of the set up is the body

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Insert title here </title>
` </head>
<body>

</body>
</html>

Inside the body

Headings

Paragraphs

Styling text

Images

List

Links

Comments

Footer

Styling With CSS

IDs and Classes

Ids are used to give a specefic element that name, and only that one element can have that name and it can be used to identify the element later. Classes are the same but they can be used with multiple elements. Class and ID names cant have spaces in them.

<h1 id="code"> I like to code </h1>
<p class="cool"> I like to code </p>
<h1 class="cool"> I like to code </h1>
<p id="milk"> I like to code </p>

Selectors

When you wan't to select an amount of code to change there are 4 ways to do it, by element, by class, by ID and by decendant

p{
This selects all paragraph elements }
#milk{
This selects the element with ID milk }
.cool{
This selects all elements with class cool }

Colors

Once you have selected what you want to change, inside the curly brackets is where you will put how you change it. When using color you will use a system called rgb(Red, Green, Blue). There are three values that are inside rgb parentheses that go from 0 ot 255, the lower the number the darker the color and the higher the number the brighter the color

Font-Styling

When looking at fonts there are 3 different kind serif, sans-serif, and monospace. Sans fonts have an extra stroke or decorative design on the end of letters on famous example is Times New Roman, another is the Georgia font. Sans-serif has no extra stroke or design, one famous example of this one is Arial and Helvetica. Monospace means that each letter, number and symbol take up the same amount of space the default font looks like a typewriter.

Alignment/Positioning

box model