In many modern websites, you must have seen this effect of Navigation bar/ Header sticking to the top of the page even if you scroll down the page for your better navigation so you don’t have to go up always to choose between links for moving between the pages. Haven’t you?

If you have and are curious about how does that work, then this post is your go-to guide to create that very simple yet beautiful effect/feature for you next project which adds better UX to the page.

What are you waiting for? Let’s get started 🚀

Navigation bar

Initial Setup

First, we are…

Hello geeks,

Once again in this article we’ll create a very simple web-page with minimal Html ,Css and more JavaScript this time. (No library, only pure Js).

What is Hex clock?

For any color in RGB format,there is a specific code of length 6. Means that code consists of 6 letters/alphabets or combination of both. We’ll be only dealing with combination of digits as clock format doesn’t support any alphabets.So, in actual clock with 24Hr format in hh:mm:ss ,we can see total of 6 digits(hh+mm+ss). …

Hello geeks,

Today, in this “story” I’m going to demonstrate how to create a full screen responsive landing page for a website using pure HTML, CSS and bit jQuery.

What is landing page for a website?

~It is a part of a website which serves as the entry point for your website. Your device’ full screen is taken by that page as soon as you load the website and afterwards you see the rest of the site.


So,let’s hit the keys!

I’ll be dividing this tutorial in 3 parts:

1.Setting up HTML

2.Adding CSS

3.Little bit of jQuery(for click to scroll part)

Section 1:Setting up HTML

Rohit Dalal

Full-stack JavaScript developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store