[Learn] HTML / CSS

Today marks another new beginning for me as I strive to become a developer. For a while, there have been many ups and downs throughout my developer jo

A website is simply just made up of a bunch of text files.HTML describes the content, CSS shows how the content looks like, and JavaScript interacts w

When writing with HTML, we need to start with some important tags: html, head, and body.The head tag is used for configuring some functionality for th

2 ways of styling HTML:Using a style tag.Linking a CSS external link within the head tag.By linking HTML to an external CSS file, we can easily style

A website is made up of many different kinds of boxes which surrounds each element that is created by HTML.The most common type of box is a div.When a

Unlike margin, padding is a space that exist the border of a box to the inside.With margins, we can set spaces for elements inside the border. This wi

By setting the position property to fixed, the box element stays at the current position. Even if we try to scroll, the box will follow us in a fixed

A transition is a way that an element can be animated from one phase to another.This property will only work with an element without a state.Transitio

Flexbox is a set of CSS properties for building 1-dimensional layouts in webpages. The main purpose of flexbox is that empty spaces inside a container

If you are trying to build a website using HTML and CSS, it is very crucial to know how to build layouts in webpages. Layout is the format in which te

CSS Grid is a CSS property for building 2-dimensional layouts in webpages. The main purpose of CSS grid is that a container element can be divided int

Back in the day, designing and developing were distinct tasks. In order to build a website, there was a 2-step process. Designers would initially crea

According to the standard definition, typography is the art and technique of arranging type to make written language legible, readable and appealing w

Just like text, color is one of the most important parts of what makes an excellent web design. Its role is to get attention, convey meaning, tell a s

Images on website give more diversity to its overall atmosphere. As such, it is important to choose the right image for the website's personality.If y

Although icons are one of the supporting features of a website, they are one of the first things the users look at when they look through any website.

Over the years, many developers implemented the effects of flat design and shadows into their products by choosing one after the other. In the recent

Though creating border-radius in various contents may look insignificant, this process is actually very important for the website to look unique. By g

Whitespace is simply space given between elements to spread out from each other. Giving just the right amount of whitespace makes designs look clean,

As the name states, visual hierarchy is about establishing which elements of a design are the most important ones. We can set important elements on a

UI and UX are familiar terms that people have heard often in various settings. But, what exactly do they mean? User Interface (UI) is the visual prese

Today, I attempted to clone-code a type of layout known as an accordion. An accordion is a vertically stacked list of headers that can be clicked to

A carousel in UI Design allow multiple pieces of content to occupy a single component. Today, almost everyone uses handheld devices such as a smartpho

Although the table component is not used as commonly as other components, it is still important to know how to make one. There may be times when you m

A hero section is the area that is immediately shown when the user visits a website. This section of the website should be able to introduce the overa

When we want to build a good looking website, it is VERY VERY important to structurally build the entire web application layout. This is an important

Define WHO the website is for. Is it for yourself? For a client of your agency or your freelancing business?Define WHAT the website is for. In other w

I began by first building the hero section of the website. A hero section is very important because it is the first thing that users will see when the

After building the hero section, I moved on to create a header and a navigation component using the contents given prior to this exercise.In order to

The how-it-works section is a component that is built in order to guide users step-by-step on how to use the service provided on the website.