Beginning on your journey to web development?
Here's what to know:
First, for the magic to happen, you will need to work with an editor. Editors that are an IDE include and are not limited to; Atom, VSCode, Sublime Text, Vim etc .While writing out yourcode, you will need to save it with a HTML file extension for the code in HTML while CSS requires that you save it as ## .css file extension.
So, what is HTML?
Hyper Text Mark up Language commonly referred to as HTML, is a Markup means to structure it in a specific format. language used to build websites. Hypertext means machine readable text.
But, HTML files are just simple text files. You need nothing more
than a place to type your text, in short, a text editor.
The basic structure of an HTML document includes tags, which surround content and apply meaning to it. Tags are contain angle brackets and the command element an example is the <body> tag. Most tags must have two parts, an opening and closing part. is the opening tag and `` is the closing tag. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash (/) character.
For example:
Anatomy of a HTML element:
- Start with the open tag
- Each open tag element must have a closing tag
- The content is simply text, image, etc.
- The element is the set of tags and the content
Sample Code of HTML tags:
<html>
<head>
</head>
<body>
</body>
</html>
CSS in full means Cascading Style Sheet is a programming language that works with HTML to make the content of the web page look pretty. CSS helps you better organize information on your web page so it's more aesthetically pleasing to viewers.
Structure of CSS
- Selectors are the CSS version of HTML tags.
- Properties define the characteristics within the selectors in order to specify the design of the content which is identified in the curly brackets {}.
- Values are the stylistic choice to edit the web page content which are identified with colons : and must end with semicolons ;.
Sample CSS code:
p { ----Selector
color: orange; ----Value
font-size: 16px; ---Property
}
I hope this, provides you with a basic to kick start your coding journey
Top comments (0)