Image for post
Image for post
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.

Image for post
Image for post
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.

Image for post
Image for post
Overall CSS Structure
Image for post
Image for post
_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.
Image for post
Image for post
Header and Footer CSS Layout
Image for post
Image for post
Image for post
Image for post
Header and Footer HTML
Image for post
Image for post
FlexBox space-between used to move the logo and nav sections to the left and right of the page
Image for post
Image for post
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.
Image for post
Image for post
Image for post
Image for post
Gallery HTML and CSS
Image for post
Image for post
Gallery using Grid
Image for post
Image for post
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.
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Hero HTML and CSS for Responsive Design
Image for post
Image for post
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.
Image for post
Image for post
Image for post
Image for post
Blog Card HTML and CSS Responsive Design
Image for post
Image for post
Image for post
Image for post
Image Gallery HTML and CSS Responsive Design
Image for post
Image for post
Image for post
Image for post
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.

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