Reconstructed the existing Donga news website layout. The major changes are as follows.

• Grid Layout : Grid layout clarifies the distinction between sections and enhances contents readability.
• Card News : Through the form of a card, the picture and title of the article are easily recognized.
• Slick Slider : A slick slider was implemented using vanilla js.

The overall content layout consists of grids. Section1 is divided into section1-1 and section1-2 in a 3:1 ratio. A user can easily make out those card news section(section1-1) and the side news section(section1-2) with a space between them.

Likewise, the card news section has grid layout with 3 columns. Each news card can occupy one or two columns. The important news cards are large by taking up two columns.

A card is composed of a big picture and a news title. Users can see and find news they want at a glance.

A slideToShow parameter decides the number of slides to be shown on the screen.

new Slick("#section2", 4); // The slideToShow value is 4

Also, the resize() function re-calculates the slide width as window width changes.

// slick.js constructor()
window.addEventListener('resize', this.resize.bind(this), false);

Pictures and Phrases used in the project are from donga.com.