Build a Simple Portfolio Website Using HTML & CSS

Set up your workspace for building a portfolio site with HTML and CSS, install Visual Studio Code, use extensions like Prettier, and organize code into portfolio template and portfolio site.

Build the basic page structure using HTML5 doctype and the main elements, including header, nav, main, sections, and footer, with IDs and a reference to style.css as an external stylesheet.

Update the about section by adding an h2 header and a div with class about-content containing an image and a paragraph, using a unique id and alt text.

Add a simple footer section that includes a paragraph with the copyright symbol. Use the ascii code 169 (ampersand copy) to render the © symbol in the footer.

Extend a basic portfolio by adding optional skills and contact sections, resume links, and back-to-top anchors, while using ul and ol lists, mailto, and LinkedIn/GitHub links, then move to css.

Learn to style the about section with padding, background color, and centered text using flexbox with wrap, and apply image and paragraph rules through the #About id and .about-content class.

Learn to style the portfolio project section with CSS, using id and class, hover effects, and flex wrap for responsive layout showing two projects and About Me on small screens.

Explains the remaining css for the portfolio template, detailing padding, line height, section and h2 typography, and a flex skills list with wrapping.

Set up a public GitHub Pages site by creating a repository named your username.github.io, initializing with a readme, and uploading index.html along with reset.css and style.css.

Deploy a second GitHub Pages site by configuring settings, deploying from branch main root, and saving to publish both the template and your personal portfolio live.