Front-end Development

Development Project

the brief

The brief was to develop the CSS for a new online venue diagnostic. The online tool aimed to give a cost-effective way to allow users to control their business strategy. The back-end and basic front-end had been completed. My task was to style the tool to the design of the main designer.

BEM CSS

Before the project, I had only worked on smaller websites with one other developer therefore how I organised my styles was not usually a big concern; however, when it came to a larger, more complex project, how I organised my code was key to how long it would take me to code and reduce repetition. This was when using BEM CSS helped to make my coding more efficient.

I loved the challenge of using BEM CSS and I now understand that Blocks are standalone entities that are meaningful on their own for example a header, Elements cannot stand alone and must be attached to a Block for example a list-item in the header, and finally Modifiers are attached to a block or element and are used to change their appearance or behavior for example making a list-item yellow.

the development

After planning out my CSS with a senior developer, I started to develop the final outcome. Initially it took me time to adjust to the style of BEM CSS because it was a new challenge; however after developing the first page, I started to gain confidence using BEM CSS.

Originally the website’s style was only from Bootstrap. With Bootstrap the developer who worked on the project before me was able to produce a responsive website using the basic components for example a button or item-list. Some of the styling was suitable to keep for the styling of the website; however, some elements required me to override the styling for Bootstrap with my own CSS.

Final outcome and Evaluation

The project was a completely new challenge that pushed me out of my comfort zone when coding; however, because my ability was pushed, I have gained a clearer understanding of BEM CSS and how to implement it. I found asking questions and gaining feedback from other developers allowed me to complete my task in the short time provided.