Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T23:53:46.000Z (about 2 years ago)
- Last Synced: 2023-03-06T03:47:28.913Z (almost 2 years 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)