https://github.com/ralitsavoronevska/web-front-end-task

Web Front End Task for open position @ Economedia
https://github.com/ralitsavoronevska/web-front-end-task

codepen css3-animations css3-flexbox font-awesome-5 html5 mobile-first node-sass pagespeed-insights responsive-web-design svg-icons vanilla-js w3c-validator

Last synced: 3 days ago
JSON representation

Web Front End Task for open position @ Economedia

• Host: GitHub
• URL: https://github.com/ralitsavoronevska/web-front-end-task
• Owner: ralitsavoronevska
• License: mit
• Created: 2019-08-24T19:31:19.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T23:53:46.000Z (almost 2 years ago)
• Last Synced: 2023-03-06T03:47:28.913Z (over 1 year ago)
• Topics: codepen, css3-animations, css3-flexbox, font-awesome-5, html5, mobile-first, node-sass, pagespeed-insights, responsive-web-design, svg-icons, vanilla-js, w3c-validator
• Language: CSS
• Homepage: https://ralitsavoronevska.github.io/web-front-end-task/
• Size: 8.15 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.markdown
  • License: LICENSE

Awesome Lists containing this project

README

        
# Web Front End Task for open position @ Economedia

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

[CodePen](https://codepen.io/ralitsavoronevska/pen/eqeojw)

| [Live Preview](http://ralitsavoronevska.github.io/web_front_end_task/)

# Desktop preview:



# Tablet preview:



# Mobile preview:



# The Sections of the page in CodePens:

* [Hero Section](https://codepen.io/ralitsavoronevska/pen/EqLYEY)

* [Cards Section](https://codepen.io/ralitsavoronevska/pen/xvXomN)

* [Blog Posts Section](https://codepen.io/ralitsavoronevska/pen/jgeWWQ)

# Built with:

* HTML5, CSS3/SASS [Animations & Flex Layout], Vanilla Javascript

* [SVG Icons [Font Awesome v5.9.0]](https://fontawesome.com/)

# 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](https://tinypng.com/)

* [CSS filter generator to convert from black to target hex color [SVGs]](https://codepen.io/sosuke/pen/Pjoqqp)

* [W3C HTML Validator](https://validator.w3.org/)

* [W3C CSS Validator](https://jigsaw.w3.org/css-validator/)

* [LightHouse Audit](https://developers.google.com/web/tools/lighthouse/)

* [PageSpeed Insights Audit](https://developers.google.com/speed/pagespeed/insights/)

# 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]](https://youtu.be/Pd71ZZeIhaI)

# Traversy Media:

* [Build An HTML5 Website With A Responsive Layout [YT]](https://www.youtube.com/watch?v=Wm6CUkswsNw)

* [Build An HTML5 Website With A Responsive Layout [Code Download]](https://www.youtube.com/redirect?redir_token=_jzgTXSQHzNUQWaEG0lm2bnoeV58MTU2NDg1ODE1NUAxNTY0NzcxNzU1&q=http%3A%2F%2Fwww.traversymedia.com%2Fdownloads%2Facme_website.zip&v=Wm6CUkswsNw&event=video_description)

# Other:

* [The Net Ninja: PSD to Responsive Website Tutorial Series](https://www.youtube.com/playlist?list=PL4cUxeGkcC9j-0YIv3EDq58-B1yZWvw8_)

* [W3Schools: Hero Image Section](https://www.w3schools.com/howto/howto_css_hero_image.asp)