search

benmiller314 / cdm2020fall

Source files for a course in Composing Digital Media at the University of Pittsburgh
https://benmiller314.github.io/cdm2020fall
0 stars 0 forks source link

Issue with Tutorial 8 (Flexbox) #12

Closed shreyababu closed 4 years ago

shreyababu commented 4 years ago

Hi Professor Miller! I was trying to work on tutorial 8 (flexbox) of Interneting is Hard, and got stuck very early on. I got up until the subsection "Grouping Flex Items". The next thing the tutorial had us do was add a header container element after the menu container element, but whatever I tried was not working and the header container kept going right in the menu container on the rendered website, instead of below it. I tried reworking the html many times, by switching the order of where the element went (tried where it is currently, directly below the menu-container line, etc). I am using chrome to render my website. Please let me know how to fix my code in order to move on with the tutorial.

Here is what the website looks like with my current code. issue with tutorial8

Here is what is supposed to look like at this point in the tutorial. supposed to look like

Here is what my code looks like. html and css of tutorial 8

benmiller314 commented 4 years ago

Hi, @shreyababu! I can't test without access to the files themselves, but from the screenshot, I think maybe the menu-container div never closes. See what happens if you add another </div> in line 17.

If that does turn out to be the problem, here are some strategies I've found helpful in combating that "div soup" effect:

  1. Add a comment alongside each </div> saying what it's closing, like this: </div> <!-- end of div.links --> (I've also seen people use a slash instead of writing out "end of," like this: </div> <!-- /.links -->)
  2. When possible, use semantic html elements like <section> and <nav> instead of <div>s: though some <div>s are usually unavoidable, at least this way you'll have some closing tags that have more clearly designated matches.
  3. Use indentation consistently to align the close tags with the open tags, with a possible exception in cases where they can be on the same line, as in lines 11, 13, 14, 20, etc. In fact, you're already doing this! It's one way to see that the opening indentation in line 9 never has a corresponding closing indentation before a new opening happens at that level in line 18.

Hope that helps, Ben

shreyababu commented 4 years ago

That worked! Thank you!!

benmiller314 commented 4 years ago

Okay, great! I'll mark the issue as closed, but it'll still be here if anyone needs it.