If you're new to CSS - DO THIS!

So I’ve been learning CSS for a while now and something that has really helped me practice and experiment with other languages, is doing the Daily CSS Images :smiley: Basically you get an email every weekday with your new challenge to complete on codepen, like “Beaver” or “Tiger”. I figure a lot of you may already know about this, so this is more of a shout out to the newbies :two_hearts: especially if you’re having trouble with understanding how positioning works e.t.c. This guide by Michael Mangialardi is really easy to follow and understand for your first challenge :smiley: Well I hope this little tip helps someone out! Have a lovely Sunday you wonderful coders xx

EDIT : More daily challenges to build those coding muscles! JS and CSS!

63 Likes

Thanks for sharing @fattie, I’ll definitely look into this!

1 Like

Thank you for sharing!!! =)

1 Like

Ohhh this is fantastic! Thanks so much for sharing this!

1 Like

Here’s something I do that I find to be extremely helpful:

* {
  border: 1px solid black;
 }

Everything on the page gets a black border around it. It’s an easy way to see the size of all the elements and how their size changes when the browser window size changes.

Once you have everything laid out correctly, just remove it.

10 Likes

I signed up for this and just did the first one. It was fun. I’m not much of a css artist, but it did help me get a feel for moving things around on the page. bear cub

2 Likes

@RaneWrites
I fork your bear and made a silly bear. :slight_smile:

8 Likes

LOL. That’s awesome.

1 Like

lol love/hate with css but this looks fun. okay i’ll bite

1 Like

Thanks for sharing. I’m also new to CSS and this means to me a lot!

1 Like

Thanks for sharing! I will definitely try this out over the weekend.:slight_smile:

1 Like

I think I’m actually getting good at this. CSS Daily Image #4: Tiger

2 Likes

Thank you for sharing this tip. It will definitely help.

1 Like

Oh, so that’s what this is. I’ve been seeing this in CodePen but never really looked into it.

I’ve been using SVG for more complex shapes since they provide more freedom when animating, but I like CSS art as well.

I actually have a little hack for positioning absolute elements. It requires jQuery but I’m sure a pure JS copy isn’t hard to make. Check it out here.

Basically, it allows you to drag an object into place (in this case, the pepperonis), then it outputs its top and left position in percentage to a div of your choice. You can then paste the code into CSS, refresh, and voila. The element’s new default position is where you last placed it… Unless there’s weird interference with the box-model or the element is being transformed, but that’s what wrappers are for. The best part is it’s completely responsive so long as the sizing unit stays consistent between parent and child.

Great for placing something by eye or if you need to figure out a general pattern.

2 Likes

Bumping this thread because I’m on day 3 now, it’s been pretty fun, and I think it’s helped me a ton already. Thank you very much! I feel like I’ve got a much better handle on CSS. Also it gives me something a bit more self-directed to do while I work my way through the javascript lessons to the next set of FCC projects. :relaxed: Here’s my day 3 beaver: http://codepen.io/caravdv/full/RVgbKy/

1 Like

:smiley: I’m glad I helped some of you out !

1 Like

I do the same thing except I usually only target one thing at a time. It helps a lot just to see exactly what you’re working with

Has anyone been able to sign up for this? I tried from my phone and laptop and got an error signing up.

There was an error submitting your subscription. Please try again

Hmmm I just tried another email address and it worked for me :confused:

Thank you! This is awesome, my laptop has almost flew through the window several times when trying to possition images in CSS. With this it’ll definitely make it trough :wink: