Building my first responsive multi-page website from a design using HTML/CSS
Code on GitHub
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.
- Atomic Design
- Object Oriented CSS (OOCSS)
- Design Interpretation
- Responsive Design
Below I’ve broken this post into sections covering how I approached using the above skills and technologies to make this website.
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.
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.
- Typography (Headings, p, dates, links, nav)
- Icons (search, socials)
- Form labels/inputs
- Contact Form
- Sidebar widget
- Image Gallery
- Card List
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.
_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
I was able to use 2 modern techniques of CSS Layout to position difference pieces of the website.
- I find flexbox useful for layout in smaller components like the header and footer, when I only have a few elements.
- 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.
Following the small screen size design provided, 3 key areas to highlight for the responsive design are the Hero, Image Gallery, and Blog Cards.
- 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 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.
Contact the Author
nosvalds - Overview
Web Developer in training. Recent graduate of DevelopMe_ full stack coding fellowship. Here to do ^good. Looking for…
Nik Osvalds - Home
Home Projects Skills About Blogs Contact I'm passionate about doing good, giving back, and helping to tackle the…