
Preview an 8-bit website built with bootstrap and javascript, featuring a video background front page, a portfolio with image layouts, and a skip button plus contact options.
Get your text editors ready, we will be setting up our file structure to build our site.
We will be building our navigation bar or, nav-bar.
Create a portfolio page in a bootstrap-based 8-bit site by building a responsive grid of images, navigation, and buttons, with proper doctype, spacing, and a footer.
Learn to craft a CV section within a Bootstrap-based layout, building nav bars, containers, and two-column sections, and present skills with progress bars, languages, and social icons.
Build a Bootstrap contact page featuring a container, header, and centered form with name, email, and message inputs, a legend, form groups, placeholders, a button, and social icons.
Learn to add interactive filtering to a portfolio page by wiring filter buttons to data-filter attributes, applying show/hide logic with JavaScript and multiple category classes.
Create a preload overlay that loads a YouTube video in an iframe, randomizes the start time, and uses JavaScript to animate a progress bar with a skip button.
Consolidate your learning by building a portfolio and exploring free Udemy courses, with q and a on the Quadrilogy YouTube channel and future WordPress conversion tutorials.
In this course, you’ll learn how to build a personal portfolio website using Bootstrap and JavaScript. It’s designed specifically for beginners who are new to web development, but it also serves as a helpful refresher for those with some experience looking to sharpen their skills or explore new tools. We’ll start with the fundamentals and progress step by step, making the learning process smooth and approachable.
Before getting started, you should have a basic understanding of HTML and CSS—things like how to structure a webpage and apply basic styling. A little familiarity with JavaScript is helpful but not required. If you’ve read through any part of the Bootstrap documentation or played around with it briefly, that will also be an advantage, though not necessary.
I’ll walk through every line of code we write together, explaining how and why each part works. You’ll learn how to use Bootstrap’s powerful grid system, components, and utility classes to create a responsive, professional-looking website. We’ll also incorporate simple JavaScript to add interactivity, making your site more dynamic and engaging.
By the end of this course, you’ll have a polished, functional portfolio website that you can customize and expand on your own—and the confidence to keep building from there.