vozsy-news
🖥️

Vozsy News

Built with

html5
css

Overview

I took Modern HTML & CSS From The Beginning (Including Sass) on Udemy from Brad Traversy. I wanted to refresh my front-end skills and evaluate my performance. As well as breaking the reliance on using CSS framework like Bootstrap to design the user interface. With react.js using framework is not as common.After completing the course I tested all of my knowledge with a final project Vozsy news.

Goals

I wanted to build a typical news website and test my knowledge of HTML, CSS and SASS. I primarily used the preprocessor SASS for this project as it was almost 1000 lines of styling. I wanted a rapid prototype for this project quickly to test my ability. I used fontawesome for social icons at the bottom of the page and applied an animation hover effect that shows the brands color. I built utility classes to speed up the design and reset the CSS. I wanted to start with the mobile design and work my way up to other devices. I relied heavily on column layout.

Lessons Learned

In this project I started to test my understanding of: Building with an HTML5 Semantic Layout, Using CSS Fundamentals and CSS Variables, Testing my Knowledge of Flexbox Layout, Building Responsive Design With Media Queries, and Using CSS Units - rem, em, vh, vw

vozsy-news-mobile
Fig.1 - Mobile View of App

Process

I followed the design made by Brad Traversy:

Then decided on the best layout of the content and made a design in figma. Finally I scaffolded the HTML and started to style it, then finished with adding SEO

vozsy-news-tablet
Fig.2 - Tablet View of App