Achieve the Minimalist Magic of Medium's Website

Medium is probably the most aesthetic website layout on the internet and many developers strive to copy its minimalist look. Using cheap theme layouts for Wordpress or Drupal is the typical way to go about it but it can easily be recreated with CSS Grid.

Starting From Scratch

The tutorial from Harald Borgen at Free Code Camp had created a basic tutorial to achieve Medium's basic layout. It was based on the information given from the Scrimba CSS Grid free tutorials.

CSS Grid has not been fully realized by the web developing community. In general, it is stereotyped as creating basic front pages and not really for advanced blogs or articles sites. As Harald demonstrated, it is very possible to do with very minimal code.

First of all, you must generate a basic HTML document that includes the basic article format and headers. Then in CSS, an article tag will be created to determine the placement of the article file within the grid layout. The margins may then be adjusted and other grids may be added to give your website richness.

About FreeCodeCampFee Code Camp is a California based startup that is dedicated to providing educational material on web development. Most of their articles are in relation to HTML, CSS, and JavaScript and are provided by independent authors without any incentive for a profit.

Since they had launched their Open Source for Good project, all of their work is published with open source code so that it may be used or modified by anybody. Mail for Good is another one of their projects that aims to make mass emailing services affordable.

About Medium

Medium is a blogging platform that had been released in 2012 and caters towards journalists rather than bloggers. The platform is open to anybody to contribute and it is grown to be one of the most visited websites on the internet.

Its website has a sleek, minimalist look that other website owners would die to have. Using the aforementioned tutorial may help you build a website that perfects Medium's model for your niche.