Grow your CSS skills. Land your dream job.

A Guide To Using CodePen – Help Us Help You.

  • # January 4, 2013 at 10:38 pm

    Super exciting!

    # January 5, 2013 at 6:22 am

    @chriscoyier great stuff. Looking forward to hearing more about the profile changes.

    # January 5, 2013 at 7:14 am

    Awesome guide Andy. Nice of you to take the time to whip it out.

    On a side note — and please don’t take me the wrong way — I mean this with all respect to those involved with Codepen, but I sincerely think the site design would benefit from major refinements — it feels bloated and chincy. Codepen could be an absolute winner, but I feel the design is holding it back.

    Otherwise, keep up the great work everyone. Should be interesting to see the progression of this project.

    # January 5, 2013 at 7:20 am

    Can you be more specific regarding bloat/design issues? I personally think it’s super straight forward to use.

    If you can express exactly which parts you find hard to use they may be able to address them as @chriscoyier is involved with the project.

    # January 5, 2013 at 7:58 am

    Good suggestion @andy_unleash

    A few things that could use some fine tuning include:

    **Search results page** Perhaps the results can display the pen previews as seen in the picks, etc.

    **Toggle Code View** Provided an option for window arrangement in code view. https://tinker.io has a nice example

    **Refine aesthetics** Typography, Gradients, Color Scheme, Unnecessary decoration…the site splash and login pages especially come to mind, but other small details could use some love too. Have a look at http://cssdeck.com

    More to come…feel free to join in

    # January 5, 2013 at 9:56 am

    Great ideas! Of course things will evolve over time. 2013 is wide open in front of us =)

    # January 23, 2013 at 11:03 am

    I am still trying to figure out how I can use codepen.io and this is a stepping stone of knowledge for me. I think it is really good, but I don’t know yet … :)

    # January 30, 2013 at 8:42 am

    codepen (awesome) will be my first stop in the morning to learn (and hopefully share) cool tricks. btw, is there anyway to just clone a codepen so I can muck on it locally?

    # January 30, 2013 at 8:47 am

    Yep. Hit the Fork button and it’s yours… Not locally but on Codepen.

    # February 12, 2013 at 4:25 am

    Is there any way to use local imags? maybe uploading them or something?

    # February 12, 2013 at 4:29 am

    You could still upload them to http://imgur.com/. However I’d rather use http://lorempixel.com/ for image placeholders. You can specify dimensions and even a theme.

    So if you want a 250*380 image, you just have to do:

    # February 12, 2013 at 4:48 am

    Thanx for the advise!!

    # February 12, 2013 at 5:02 am

    HugoGiraudel, I could’nt manage to find it there.
    On imgur.com, do You happen to know how much space do I have to upload images?

    # February 12, 2013 at 3:44 pm

    @eran1 Well, I got this from their website’s help page (http://imgur.com/help/uploading):

    > The maximum non-animated file size you can upload is 10MB. If the image is over 1MB, however, it will be automatically compressed to 1MB for better viewing on the web. The maximum animated file size (GIF and PNG) is 2MB.

    # June 18, 2013 at 10:20 pm

    awesome tutorial! I am trying to just copy and paste some of the pens in my text editor and the animations are not working. Is this because of the csspreprocessors?

Viewing 15 posts - 16 through 30 (of 38 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".