Responsive Design and the DOM

3/27/17

Last week I had my first exposure to the Document Object Model (DOM) in my Coursera.org JavaScript course. Today I get my first exposure to responsive design in my Thinkful.com coding bootcamp.

For my first time working with the DOM, I created a game that manipulates the DOM by cloning and deleting nodes. On a side note, I have been putting in a lot of practice with Git and Git hub, so I have pushed that game to my profile. Here’s the link: https://preston206.github.io/Smiley-Face-Game/.

I want to share a few things I learned yesterday. I was creating a mock signup page and I learned some good lessons about CSS layout. I had some code that looked like this:

<div>
  <a class="forgot-pw" title="forgot password" href="/forgot-password/new">Forgot Password?</a></div>

…which was wrapped inside of a form. I was trying to center the text. I succeeded, however, my mentor from Thinkful.com pointed out that I could get rid of the div tags, set the anchor as a block, and then use text-align to center it. That worked perfectly and I learned that I shouldn’t get div-happy. I think in most cases, less elements is better. In a similar instance within the same project, I had a paragraph tag wrapped by a div, which I was also trying to center. I applied the same steps to it and got the text to align properly. It makes a lot of sense.

I also learned another thing yesterday while reviewing a previous project. In a fake Craig’s List page I was creating, I had a static header at the top of the page with a couple of navigation links in it. I treated the entire header as the nav, so I targeted the nav element when I setup all the style declarations. My mentor from Thinkful was discussing the project with me and he showed me how I should be targeting the header and making that static, instead of the nav. It made a lot of sense. So I should be setting the header as static and treating everything within the header separately and positioning them accordingly. Such as a logo and nav links.

It was a good day of coding yesterday. I learned some valuable lessons that I’ll take with me through this journey.

I forgot to add some links in my previous post. Here’s a few things I’ve been reading and watching:

  • I took a little side trip into Jekyll. I had heard about it but had no idea what it was or what it did. Now I have a brief understanding of it. Seems like a pretty cool tool! Plus, I love that guy’s tutorial videos. I’ve watched lots of them. He does a great job at teaching!
  • I found this simple interactive Git tutorial.
  • I found an interesting, concise article about how we should be naming our classes. I’m guilty of the “bluetext” or “marginbottom” names.
Advertisements