Make a Portfolio Website with HTML, CSS, Jquery, Bootstrap 5

Explore popular code editors and learn why Visual Studio Code stands out for PHP with its extensive extensions and lightweight design, while Notepad++ is less used and PhpStorm isn’t free.

Learn to download and install Visual Studio Code and the base code on Windows, complete the setup with default options, and launch VS Code to open your project folder.

Open the base code editor, load a project folder, and explore opening single or multiple folders in Visual Studio Code.

Learn how to enable autosave in VS Code after a delay, so HTML and CSS edits for your portfolio site save automatically without pressing ctrl+s.

discover how to use Visual Studio Code extensions, browse the extensions panel, install and manage extensions for HTML and CSS, and customize color schemes.

Locate the settings.json file in the base code editor’s roaming folder, then back up and import it after reinstall to preserve extensions and settings.

Reset VS Code by deleting the settings.json file and the extensions folder within the user profile, then reopen for a fresh start. Confirm autosave after delay is reset.

Create and manage global snippets in Visual Studio Code to insert repeated HTML blocks across files, using prefix, body, and description.

Install the bootstrap 5 quick snippets extension in vscode, then use the prebuilt snippets to generate boilerplate bootstrap code, including containers, headings, accordions, and tables, enabling rapid bootstrap layouts.

Install and use the auto rename tag extension to automatically update opening and closing tags when you edit a tag, saving time while coding your portfolio site with HTML.

Install the material icon theme in your vsco editor to replace default icons with attractive folder and file icons, improving navigation in the sidebar and css visuals.

This lecture shows how to install the great icons extension for VSCode to apply a consistent icon set, including folders, CSS, and JavaScript icons, for better navigation.

Install the live server extension in your code editor, then right-click an HTML file and open with live server to preview pages instantly.

Learn to install and use the live server preview extension to see real-time changes on your login HTML page, with auto updates reflected in the right-side preview.

Learn how the HTML CSS support extension boosts HTML and CSS workflow by auto-completing CSS class names in index.html, linking a stylesheet, and applying names like red, green, and blue.

Learn to view, install, and switch Laravel color schemes to customize a portfolio website, including default dark themes and popular options like Dracula.

Enable settings sync in your code editor by signing in with Microsoft or GitHub; automatically save and restore extensions, keyboard shortcuts, and user snippets across devices.

Create a personal website project by making a desktop folder, renaming a file to index.html, enabling file name extensions, and organizing css, images, and js folders.

Open the index.html in Chrome, set up the personal website project in Visual Studio Code, and apply a Bootstrap 5.2 quick-start layout to structure the HTML.

Acquire Bootstrap 5 by linking the CSS and JS files (or bundle with Popper), include jQuery, add custom CSS and JS, and verify layout with a Bootstrap container and grid.

Build the header section of a portfolio site using bootstrap, placing a logo on the left and a right-aligned menu (home, about, services, portfolio, contact) with hover dropdown options.

Learn to apply Google fonts such as Poppins by linking the font in the head, setting font-family and font-weight in CSS, and adjusting nav item typography and spacing.

Insert a logo image into the header from the images folder and resize it with CSS; use the active class to highlight the current menu and adjust hover colors.

Set up the home banner under the header with a Bootstrap container and a two-column row, using a background color, 300-pixel height, left text, right image, and crop the image.

Build the left pane of a portfolio banner using bootstrap flexbox for vertical centering, then style headings, text, and a call-to-action button with hover effects.

Create a home about section for a portfolio site, featuring a left author image and a right side with who am I, about me, contact info, and social icons.

Learn to integrate font awesome icons into the home page about section using HTML, CSS, and Bootstrap 5, and to style contact and social icons for a polished portfolio.

Build a two-column Bootstrap 5 skill section on the home page, showing progress bars for skills like Photoshop and Illustrator, and search engine optimization, using classes instead of inline styles.

Learn to animate a portfolio's expertise progress bar with jQuery, using the animate function to grow widths from 0% to 55–80% over 2.5 seconds, triggered by user interaction.

Create a two-column qualification section in a portfolio site using HTML, CSS, and Bootstrap 5 to present education and experience with icons and timelines.

Configure the home page qualification section by setting up education and experience subsections, adding icons, updating text and company details, and resolving style conflicts with targeted css.

Explore building a reusable services section for a portfolio site, with service items including icons, titles, and descriptions, plus responsive spacing and a light background.

Design the home page service section by styling a remote button, adding service items with icons, hover effects, and links to website design, development, digital marketing, content writing, and SEO.