EPN Landscapes

HTML5

CSS3

JavaScript

Landscaping Website

This is a commercial website built for a landscaping company. It showcases the company's services and previous projects, along with the company's description and work standards.

live site

Methods Used

Reset

A personal CSS reset was created to set some default rules. This allows a more consistent starting point across all browsers.

Utility Classes

Utility classes were implemented for such things as: .container, .grid, .flex, .flow, .bg-color, .text-color, .font-sizes and font-families. Working with utilities massively increases the organization of your project and promotes predictability and consistency for both developers and end users.

Custom Properties

Custom properties allow a value to be stored in one place, then referenced in multiple other places. An additional benefit is semantic identifiers. For example, --main-text-color is easier to understand than #00ff00, especially if this same color is also used in other contexts.

Comments

As a programmer comments helps in making codes easy to understand, easy to debug and also stimulate code readability between the programmer and others. Comments are also used to document programs and remind programmers of what tricky things they just did with the code and also helps the later generation for understanding and maintenance of code.

Components

Component like styles were created for such things as button's, hr's and forms. This allowed general styling to these components, which could be used over and over again.

Media Queries (max-width)

Media queries were used throughout each page in order to make the website full responsive on all devices.

Lessons Learned

Responsive Images

This project was heavily image based, which gave me vast experience dealing with images and background images. Background images are easy to display properly even at constrained proportions. Attributes such as background-size: cover; allow the image to fill the space while still keeping its proportions. Overlaying content over the top of a background image is very easy as you can simply treat it as if there was no image there so you can just apply regular positioning to any elements over the background image.

Max-width Media Queries

Mobile first design has always been my approach. This time I wanted to use max-width media queries to experience the opposite way of doing things. I found max-width media queries allowed for easier production at first. Following this, you work backwards, from your initial layout. Min-width media queries require more planning into the future of the layout (which can be a good thing), it just may take longer at first to work out your approach. It was interesting to try out a different approach, which gave me a wider perspective on the topic.