Photography Site Homepage

Summary

For this page I was provided a design in Figma and created the page in HTML and CSS from the ground up during Week 2 of the DevelopeMe_ coding bootcamp. I started with creating a set of re-usable components using atomic design, then built up the full pages to the design specification. After the pages were complete we hosted the site on a webserver provided by DevelopMe_ and did cross browser and accessibility testing.

Skills/Technologies Used

  • HTML
  • CSS
  • Atomic Design
  • Object Oriented CSS (OOCSS)
  • Design Interpretation
  • Responsive Design

Case Study

Below I’ve broken this post into sections covering how I approached using the above skills and technologies to make this website.

components.html page demonstrating Atomic Design
  • Typography (Headings, p, dates, links, nav)
  • Icons (search, socials)
  • Buttons
  • Form labels/inputs
  • Images
  • Navigation
  • Contact Form
  • Sidebar widget
  • Hero
  • Card
  • Article
  • Header
  • Footer
  • Image Gallery
  • Card List
  • Sidebar
  • index.html
  • article.html
  • blog.html
  • contact.html
Overall CSS Structure
_card.css containing higher level structure and layout
  • I find flexbox useful for layout in smaller components like the header and footer, when I only have a few elements.
Header and Footer CSS Layout
Header and Footer HTML
FlexBox space-between used to move the logo and nav sections to the left and right of the page
FlexBox centered footer of social icons
  • Grid was useful for the “gallery” of images on the homepage to have the different sized images display in the tiled pattern from the design. I also used it for the Blog page for the cards display.
Gallery HTML and CSS
Gallery using Grid
Blog Cards using Grid
  • The Hero image needed to re-size as the page did as well as change the font size of the Hero tagline. This was accomplished using object-fit: cover property on the background image of the hero and media queries for the font size.
Hero HTML and CSS for Responsive Design
Hero on a small screen (375px)
  • These 2 layouts needed to move to a 1 column view at a certain screen width. This was accomplished with media queries to modify the grid columns from 2 to 1. The nice thing is that grid automatically wraps and puts them on new rows without that having to be defined.
Blog Card HTML and CSS Responsive Design
Image Gallery HTML and CSS Responsive Design
Blog Card and Image Gallery layouts on iPhone X

Contact the Author

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nikolas Osvalds

Nikolas Osvalds

I’m passionate about doing good, giving back, and helping to tackle the climate crisis with my working life, ideally with code.