254 reads

HTML & CSS: A Basics Guide and Introduction

by Ignatius SaniDecember 2nd, 2020

Too Long; Didn't Read

This post will help beginners who are just starting up with programming to solve problem with understanding HTML & CSS. By the end of this article you should be able to understand some key concepts of both HTML & CSS.

Companies Mentioned

featured image - HTML & CSS: A Basics Guide and Introduction

Firstly, I will like to share with you my experience with these two technologies. Building a website with HTML & CSS at the beginning to me felt really overwhelming. You first think you are better at it, then realise you still suck at applying simple basic concepts.

The way out of situations like this is revisiting the basics and also code by yourself and not having to read too much of resources without practicalizing them.

To me, my mistakes have really built me in an amazing manner. In addition to this, don't be scared of making mistakes. As much as you need to know HTML & CSS, you don't need to master everything or be an expert at this at all. So with that in mind, Let's get started.

Here are some basic commonly used HTML/CSS Tags.

Tags and elements

An HTML tag is a special word or letter surrounded by angle brackets, < and >. You use tags to create HTML elements, such as paragraphs or links.

here is a few tags that are commonly use.

The <!DOCTYPE html> declaration describes this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document .
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph.

We also have <div>,<header>,<nav>,<article>,<section>,<footer> etc.. to find out more visit the following website using the links below.

Frameworks and libraries

First thing, what are the key differences between Frameworks and Libraries?

Frameworks are pieces of codes that define the architecture of your projects and helps in programming. They are codes written by someone to make building of web pages and websites as fast as possible where we don't necessarily need to bother about what's happening behind the hood. A good example of this would be bootstrap, materialize, etc..

Libraries on the other hand are sets of reusable codes. they also aim at the same goal as frameworks. But the difference is that in libraries you have control over your code, and not having to follow a strict architecture or map. An example of libraries is Destyle.css used for restyling your stylesheet, immutable styles etc.

As part of learning HTML & CSS it's required to learn css grid and flex box, if you ever want to take your programming game to the next level. I will leave some resources for finding them.

My favorites are https://css-tricks.com/ and https://gridbyexample.com/.

Learning sometimes can be intimidating, but I have some tips that can change your learning game.

The best learning is found in repetition and constant practice. By cloning a website, you are open to learning new things and how things actually work, so start off by cloning any simple site.

Lastly and somewhat important, is finding a coding partner. One of the best places to find a coding partner is on Microverse. There are lots of them out there, but my recommendation will be Microverse. I will share a link to joining them. https://www.microverse.org/

A quick reminder, of what we just learnt. We learnt about HTML & CSS Tags. Best learning is in repetition, making more mistakes. Libraries are reusable code. Frameworks are codes that define your project architecture.