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.

Design Interpretation

I started the page by studying the designs (small, medium, and large screens) and taking some notes of important dimensions, sizes, and layout so that I had an easy reference while beginning the components. I still did refer back to the Figma design fairly frequently to ensure I was following the design closely and not straying too far.

Atomic Design

Next I broke the page down into components using atomic design principles and created the HTML and CSS for each moving from Atoms -> Molecules -> Organisms. I did this work based on the large screen design since it was what I was most familiar with from the content I learned during the week. I later would make the pages responsive using media queries.

components.html page demonstrating Atomic Design

Atoms

  • Typography (Headings, p, dates, links, nav)
  • Icons (search, socials)
  • Buttons
  • Form labels/inputs
  • Images

Molecules

  • Navigation
  • Contact Form
  • Sidebar widget
  • Hero
  • Card
  • Article

Organisms

  • Header
  • Footer
  • Image Gallery
  • Card List
  • Sidebar

Templates/Pages

  • index.html
  • article.html
  • blog.html
  • contact.html

Since the site design provided was only 4 pages, the final pages I constructed would also likely serve as templates for future similar pages.

Object Oriented CSS (OOCSS)

The concept of OOCSS is to separate the style (color, font, etc.) from the structure (layout) within your CSS. I worked to accomplish this by defining the style at a “lower” level in the CSS. _settings.css and _typography.css are good examples of this. In settings I import fonts and set my CSS variable colors. Typography is where the different html elements have their font and size set.

A good example of defining the structure or layout is in_card.css where I define things like the position of links inside the card .card a, and the layout of the card list .cardlist.

Overall CSS Structure
_card.css containing higher level structure and layout

CSS Layout

I was able to use 2 modern techniques of CSS Layout to position difference pieces of the website.

FlexBox

  • 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

  • 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

Responsive Design

Following the small screen size design provided, 3 key areas to highlight for the responsive design are the Hero, Image Gallery, and Blog Cards.

Hero

  • 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)

Image Gallery/Blog Cards

  • 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

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