A minimalist portfolio website for photographer Steffen Østli.

• Overview
  • The purpose
  • Screenshot
  • Links
• My process
  • Built with
  • What I learnt
  • Useful resources
• Status
• Author

The purpose of this project was to create a minimalist CSS grid portfolio site for a photographer I follow and who's work I admire. This was a passion project and my first experience working with a CSS grid gallery. I learnt how to create multiple pages with site navigation menus using the nav element. I discovered how to link between pages using a simple anchor tag with href attrribute so when clicked it would display the About or Contact page.

Above is what you should see when you click on the link below.

• Solution URL: Solution
• Live Site URL: Live Site

• HTML5 markup
• CSS custom properties
• CSS Grid
• Vanilla JavaScript

• How to use HTML and CSS to create a portfolio website.
• Create multiple pages with a navigation menu using anchor elements.
• I learn't how to make a hamburger menu to make the site responsive.
• Add absolute and relative links.
• Add images and unordered lists.
• How to structure and format the page.
• Use link elements to reference an external style sheet.

Here are some code snippets I am proud of:

/* Grid with align-items value of stretch */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
	grid-gap: 30px;
	align-items: stretch;
	padding-top: 85px;
	margin: 0px 30px 30px 30px;
}

• Creating Multiple Pages - This was useful in understanding how to create and structure multi-page HTML sites.
• Responsive Menu - This tutorial taught me how to take a normal navigation and make it responsive with breakpoints using media queries.

Project is: in progress

• Website - Max Lockwood