Photography Site Homepage

Summary

Skills/Technologies Used

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

Case Study

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

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Solving trust issues for Omio — a UX Case Study

How to get started in UX — Part Two

The Growth of In-House Amenities in Downtown Condos

UX Case Study- University Website Redesign

Why we need more Medium-user’s profile in Architecture

Introducing Our Projects for 2018–19

What if you could PLAN your DREAM HOME online?

Get the Medium app

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.

More from Medium

Tailwind CSS

How to Style a WP Admin Table with WP CSS Classes — Codnostic Solutions

Centering a div made easy with Tailwind CSS

Centering a div made easy with Tailwind CSS

CSS (Cascading Style Sheets)