Jessica | web developer ( @thecodercoder ) Instagram Profile

thecodercoder

Jessica | web developer #webdevelopment #programming Practical tips for the beginner web developer.

  • 251 posts
  • 18.1k followers
  • 232 following
  • 🔥CSS Questions -- This week I'll be answering the most frequently asked questions from last week!

Q: What's the difference between absolute and relative positioning?

Position: relative -- creating elements with this will display them much as you'd expect: sibling elements will be positioned one after the other on the page. And child elements will be nested nicely in their parents.

Position: absolute is where things can get rather kooky. Here are 2 common problems with this:
.
🚫 PROBLEM 1: When I set an element to position: absolute, why does its parent element just collapse??
.
➡️ If you set a child element to have position: absolute, it will take itself out of the normal flow of the web page elements. This will make the parent behave as if it's empty. You can "fix" this by adding a min-height or padding to the parent to make up for the lost space.
.
🚫 PROBLEM 2: I set an element to position: absolute and it disappeared!!
.
➡️ Because it's now out of the normal flow, an absolutely positioned element needs a parent or ancestor element to reference in order to position itself. If the direct parent has no position set, the child will continue moving up and out to the grandparent element and so on, until it finds an ancestor element with positioning set to either relative or absolute. So always check that the parent element has position set.

I made a Codepen with some toggles to illustrate how positioning works. Check it out and let me know what you think! I've linked it in my stories :)
.
.
.
.
#css3 #webdev #webdeveloper #js #webdesign #programmer #css #html #javascript #websitedesign #programmers #devlife #programmerlife #programmerslife #webdevelopers #fullstack #thedevlife  #code #vscode
#webprogramming #coding #coder #webdevelopment
  • 🔥CSS Questions -- This week I'll be answering the most frequently asked questions from last week!

    Q: What's the difference between absolute and relative positioning?

    Position: relative -- creating elements with this will display them much as you'd expect: sibling elements will be positioned one after the other on the page. And child elements will be nested nicely in their parents.

    Position: absolute is where things can get rather kooky. Here are 2 common problems with this:
    .
    🚫 PROBLEM 1: When I set an element to position: absolute, why does its parent element just collapse??
    .
    ➡️ If you set a child element to have position: absolute, it will take itself out of the normal flow of the web page elements. This will make the parent behave as if it's empty. You can "fix" this by adding a min-height or padding to the parent to make up for the lost space.
    .
    🚫 PROBLEM 2: I set an element to position: absolute and it disappeared!!
    .
    ➡️ Because it's now out of the normal flow, an absolutely positioned element needs a parent or ancestor element to reference in order to position itself. If the direct parent has no position set, the child will continue moving up and out to the grandparent element and so on, until it finds an ancestor element with positioning set to either relative or absolute. So always check that the parent element has position set.

    I made a Codepen with some toggles to illustrate how positioning works. Check it out and let me know what you think! I've linked it in my stories :)
    .
    .
    .
    .
    #css3 #webdev #webdeveloper #js #webdesign #programmer #css #html #javascript #websitedesign #programmers #devlife #programmerlife #programmerslife #webdevelopers #fullstack #thedevlife   #code #vscode
    #webprogramming #coding #coder #webdevelopment
  • 812 40 15 January, 2019
  • 🚫 Giveaway is closed, the winner will be announced tomorrow! Thanks for participating everyone! 🚫
.
Here's the 2019 giveaway you've been waiting for! Enter below for a chance to win 3 months of access to Team Treehouse, one of the best places to learn web development online! 😁
💻
THE RULES: ✔️ Like this photo!
✔️ Follow me @thecodercoder
✔️ Leave a comment and tag a friend that wants to learn coding! (You won't be able to leave a comment unless you are following me)
✔️ You can tag up to 10 total friends to get an extra entry per tag!
.
🏅Winner will be chosen at random and contacted via Instagram DM.
🕘 Giveaway ends Sunday 1/6 @ 9:00 AM CST (UTC-06:00). Winner will be contacted via DM and announced on my stories on Monday 1/7.
.
This giveaway is in no way sponsored, endorsed or administered by, or associated with, Instagram. Your participation releases Instagram from any responsibility or liability. Open to international participants 18+. #giveaway
  • 🚫 Giveaway is closed, the winner will be announced tomorrow! Thanks for participating everyone! 🚫
    .
    Here's the 2019 giveaway you've been waiting for! Enter below for a chance to win 3 months of access to Team Treehouse, one of the best places to learn web development online! 😁
    💻
    THE RULES: ✔️ Like this photo!
    ✔️ Follow me @thecodercoder
    ✔️ Leave a comment and tag a friend that wants to learn coding! (You won't be able to leave a comment unless you are following me)
    ✔️ You can tag up to 10 total friends to get an extra entry per tag!
    .
    🏅Winner will be chosen at random and contacted via Instagram DM.
    🕘 Giveaway ends Sunday 1/6 @ 9:00 AM CST (UTC-06:00). Winner will be contacted via DM and announced on my stories on Monday 1/7.
    .
    This giveaway is in no way sponsored, endorsed or administered by, or associated with, Instagram. Your participation releases Instagram from any responsibility or liability. Open to international participants 18+.  #giveaway
  • 760 430 1 January, 2019