DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 968,547 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Progress Bar Tutorial with Blog Layout- HTML/CSS/ JavaScript Beginner Tutorial(Video)
Renaissance Engineer
Renaissance Engineer

Posted on

Progress Bar Tutorial with Blog Layout- HTML/CSS/ JavaScript Beginner Tutorial(Video)

In this video tutorial you will make a simple blog layout with a fixed header, body, and footer using CSS flexbox. You will then use some simple Javascript to create a progress bar that updates dynamically as you scroll down the page.

Customize for your portfolio

At the end of the video I'll leave you with some optional features to add so you can have something unique for your portfolio

Some example ideas:

  • Send API request when user has reached bottom of page
  • Slide out modal email form when user is 50% down page
  • Social sharing buttons in sidebar
  • Debouncing to make event handler more efficient

Top comments (0)

Need a better mental model for async/await?

Check out this classic DEV post on the subject.

β­οΈπŸŽ€ JavaScript Visualized: Promises & Async/Await

async await