Web Front End Task for open position @ Economedia

PSD to HTML => PSD & .png Design files are in dist > img folder

CodePen | Live Preview

Desktop preview:

Tablet preview:

Mobile preview:

The Sections of the page in CodePens:

• Hero Section
• Cards Section
• Blog Posts Section

Built with:

• HTML5, CSS3/SASS [Animations & Flex Layout], Vanilla Javascript
• SVG Icons [Font Awesome v5.9.0]

Browser support:

(Last updated and tested: 31/05/2020)

• Chrome 83.0.4103.61 (Official Build) (64-bit)
• Firefox 76.0.1 (64-bit)
• Opera 68.0.3618.125
• IE - no support for the moment

Tools used:

• Photoshop CS6
• TinyPng for compressing images
• CSS filter generator to convert from black to target hex color [SVGs]
• W3C HTML Validator
• W3C CSS Validator
• LightHouse Audit
• PageSpeed Insights Audit

W3C HTML Validator

W3C CSS Validator

Chrome LightHouse Audit

• Desktop:

• Mobile:

PageSpeed Insights Results

• Desktop:

• Mobile:

Resources used:

"Online Tutorials" series:

• Fadein and Fadeout Back To Top Button on Page Scroll using CSS and Vanilla JS [YT]

Traversy Media:

• Build An HTML5 Website With A Responsive Layout [YT]
• Build An HTML5 Website With A Responsive Layout [Code Download]

Other:

• The Net Ninja: PSD to Responsive Website Tutorial Series
• W3Schools: Hero Image Section