[Challenge] Recreate a magazine layout using Semantic HTML and CSS Flexbox

:trophy: Code Challenge – Week of November 23, 2020

Recreate the below magazine layout using Semantic HTML and CSS Flexbox

Screen Shot 2020-11-23 at 4.44.31 PM

:pushpin: Challenge Rules:

  • You must use Semantic HTML and CSS Flexbox
  • You may choose your own font and background image
  • Originality and readability of your code (make it your own and use style conventions and comments to keep things legible).

:calendar: Deadline for prize submission:

  • December 7th at 11:59 pm

Prize: A forum badge that recognizes you as a code challenge winner & 1 month of Pro for free.

  • The winner will be who presents the most similar outcome (magazine layout) compared to the original layout. If there’s a draw on similarity, the contestant who used the fewest characters in their code will be the winner. We don’t count spaces and end-lines as characters.

:books: Resources:

:partying_face: Once you’re done…

  • Share it in a post below. Take a screenshot of your finished project in a browser and include a link to your GitHub gist or Repl.it link so we can see your code.

Hello! Here’s my solution to the code challenge – Week of November 23, 2020.

And here’s the link to the github repository which contains the code to it.

Consider this repository as my official submission for this challenge.
All the best to everyone else who’s participating in this challenge.


Hello there, here’s my take.

and my github repo:


Here there is the code


Link to the github repo is here below.


Below is my finished work for the Codecademy code challenge-week of November 23, 2020. I request you to consider this as my final official submission. GitHub link to the project has also been provided.

GitHub link: GitHub link to challenge submission by Prateek Mitra

1 Like


Please find here the code https://github.com/bertmarina/codecademy-23Nov

And a preview of the work:

1 Like

Here’s my attempt:


Thank you to everyone who participated in this challenge! I’ve noticed that you’ve all taken different slightly different paths to recreate the magazine layout. This shows us that there’s not only one way of doing things!

:trophy: The winner of this challenge goes to @mrlagesh for recreating a layout most closely resembling the original one!


Wow awesome!! thank you!

Can we know at least what did you consider he did better than someone else so we can improve for next time? I mean, what are the code lines that resemble better than someone else in particular?