MAC Electrical

HTML5

CSS3

JavaScript

Electrician Website

This is a live commercial website for an electrician. It showcases the main services provided along with the company's history 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 code 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 (min-width)

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

Lessons Learned

Commenting

CSS comments let you organize or explain various segments of the stylesheet. When projects are beginning to grow bigger, comments are extremely valuable. Breaking up the stylesheet into different sections allows easier access and increases readability. Some comment headings I utilised were: custom properties, reset, utility classes, components, page specific, etc.

Custom Properties

Custom properties allow a value to be stored in one place, then referenced in multiple other places. Realizing the power of these 'variables' is key to working with bigger projects. I utilised these variables for such things as: colors, font-families, font-sizes, and spacing. This created easy manipulation of the project from one point of contact in the stylesheet.

Reusable Components

Designing reusable components is essential for the DRY (don't repeat yourself) principle. Styling certain components of the website allows them to be reused on multiple pages, and also allows for a base styling, which can manipulated with further specificity if required.