How to review projects from codepen?

HTML-CSS
1

I’ve never used codepen and just begun today.

What if I want to look into someone’s project (let’s say it’s HTML and CSS, without JS for now). So, I wanna check, how page looks on different devices, and use Chrome dev tools to do it.

To my understanding, i need just:

  • export it

  • open index.html with my Chrome

But the thing is, when I did all of the above(I will use my own project for example), i have head section of html:

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by Andrei Dmitriev</title>
  <link rel="stylesheet" href="./style.css">

</head>

I get it, when you download something from codepen it’ll be some default head in html file.
So it appears to me, there is no way to get from codepen original content of head section. For example, i have no idea if author of project used

<meta name="viewport"...>

Does it even make sense to analyze page in terms of responsivity if you have no idea about existence of meta viewport tag in html file?(be aware! my understanding of this tag is pretty much rudimentary, i just know that it is very important to use it :grinning:)

And the question is: if I wanna give feedback to someone’s project in terms of responsivity, how to overcome issue described above. Is it an issue at all or I am just overthinking?

2

open the pen in full page view
or if it’s there you can go to editor view to see the code

or clone/fork the pen to edit it as you wish

the head content can be found in the settings of the pen

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.