WEB Development
Jewel Hub
I.
Introduction
The Challenge
I was tasked with developing a website from a PDF document (ie. stylesheet + wireframe) and building the design using HTML and CSS. I set out to translate the visual design elements using responsive best practices to create a fully responsive website.
Without using Figma for this project, it was challenging trying to successfully convert the design from a static wireframe to a fully responsive website. It was good practice writing code without having exact spacing requirements provided. I refining my eye for pixel perfect production.
My Approach
The ambition for my work was to match the design as much as possible, while using a human-centred approach to organize and write my code, so that if another developer were to read through my work it would be easy to parse and derive meaning. Throughout every stage of this project, I ensured that my code was clean, organized and properly indented. Using comments throughout my code helped me keep it organized and easy to navigate.
II.
Visual Design & Interaction Design
Aesthetics based on a foundation of logical code.
I refined my design through multiple iterations to ensure overall spacing accuracy and proper grid alignment I used Sketch to identify pixel increments and then customized CSS measurements and CSS dimensions with viewport units and percentages.
My focus was to write DRY code and I based my work off of the three CSS foundational concepts: the cascade, specificity and inheritance rules. I applied an external stylesheet method to marry the HTML foundation with proper CSS syntax to bring the structure to life.
III.
Technology
Incorporating semantically meaningful code.
I set out to write informative code that would clearly convey human- and machine-readability. This required using HTML5 semantic elements (header, nav, main, section, footer etc.) and responsive best practices to create a fully fluid website, that accurately defined the layout and its different visual sections in an easily parsable way. I used Flexbox and 'calc' to complete the layout, semantic tags to describe stylized elements, and included accessibility minimums like 'alt' tags for <img> elements.
View my code here.
IV.
Strategy
Blending the lines between design and technology.
I used a methodological approach to break this project down into manageable phases. First, roughly marking up the PDF with my perceived box-model, then moving into detailing typographic components and containing elements using semantic tags. Finally, attaching HTML attributes and proper CSS selectors to target unique elements on the page, abiding by the cascade, specificity and inheritance rules. I refined my design through multiple iterations to ensure overall spacing accuracy, proper use of visual styles, and design responsiveness.
VI.
Conclusion
Key Takeaways
A design can be achieved in many ways.
Creating a fixed navigation and slide out menu was an exciting challenge.
Flexbox is king and extremely helpful in achieving responsiveness.
Next Steps
Apply a <div class="wrapper"> to ensure a consistent width constraint. </div>
Simplify the code for the underline effect under the "Latest Blog Posts".
Apply CSS order property to position the arrow icons in the blog section.
Implement fixed widths for '.galleryitem' images to maintain fluidity of size/shape between 941px and 1443px media queries.