HTML-CSS Posts

Thumbnail of a tutorial on:

Understanding the Basics of HTML Login Forms

In today's article I am going to explain the anatomy of a simple HTML login form. I am going to show you the basic elements that make's up a login form, and how to catch the submitted data first with PHP, and then with JavaScript.

Read the article
Thumbnail of a tutorial on:

Basic html and css page grid layout example

In this article we will see how to use the CSS Grid system and its properties to structure a basic website layout. We are going to start with a basic two columns layout example, and we are going to build from there a whole website that includes a navigation, a header, a sidebar, a main content section, and a footer.

Read the article
Thumbnail of a tutorial on:

How to make a sidebar sticky on scroll

A sticky sidebar is a popular web design element that stays fixed on the page while the user scrolls, providing easy access to navigation or important content.

Read the article
Thumbnail of a tutorial on:

CSS position two elements left and right

Hey guys. In this tutorial we are going to position two elements, one on the left, and the other on the right in the same row using the CSS flexbox layout. You will see how easy it is by using just a few lines of css code.

Read the article
Thumbnail of a tutorial on:

How to create a simple animated and responsive navigation menu

In this article we are going to see how can we create a responsive navigation menu with HTML, CSS, and a little bit of JavaScript.

Read the article Watch Video 🎬
Thumbnail of a tutorial on:

How to highlight visited menu links with CSS and JavaScript

Most of the websites that we are going to design and create, will have a navigation menu. It is a common practice that we highlight the link that indicates the page we are on.

Read the article Watch Video 🎬
Thumbnail of a tutorial on:

Creating a sticky navigation bar

In this tutorial we are going to do something easy. We are going to create a sticky navbar. A navigation menu bar is called sticky when it sticks at the top of the page, but the rest of the content is scrollable.

Read the article