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

Firehose…

3/23/17

My classes are moving at a fast pace now. At Coursera.org I just finished a JavaScript project and at Thinkful.com I just finished up some CSS positioning lessons. It’s like drinking from a firehose! I’m having trouble keeping track of all the new things I am learning that I want to get logged here. Just over the past week I was introduced to Git and GitHub- GUI and command line. I learned the Git commands that I’ll be using the most as a developer. I’ve been practicing them in Git Bash. I’ve also checked out GitKraken to see what the GUI is like. I will be checking out SourceTree soon as well. The Git flow is taking me a little while to fully grasp but I’m getting there. I’ll have it down like an old habit soon. I’ve also been working out of three different code editors- Sublime, Atom, and VS Code – so I can get a feel for all of them. My goal is to pick one and move forward with that. Right now, I am leaning towards Code. I basically made a list of all the features I want my code editor to have and then figured out which editor I can get there with the least steps. Sublime wins; it comes with the most features out of the box. However, for some reason there is a draw to Code that I am having trouble resisting. I just like it a lot. So why fight it. I’ll most likely make that my go-to.

This is what my feature wishlist looked like. This is an out-of-the-box comparison.

  • dark theme (atom, sublime, visual studio code)
  • auto-indent \ beautify \ format (sub, code)
  • html boilerplate (sub, atom)
  • emmet (code)
  • vert guides (sub)
  • minimap (sub)
  • last line of code can be scrolled to the top of the screen (sub, code)
  • multi cursor edit (code, sub, atom)
  • insert lorem ipsum text (code, sub, atom)

As you can see, Sublime ticked almost all of the boxes. I should totally go with Sublime, but like I mentioned I am just drawn to Visual Studio Code more. From a fresh install of VS Code, all I need to do to get it up to speed, is install extensions for the boilerplate code and the vertical guides. The rest, such as the minimap, is enabled in settings. Pretty simple to get my coding environment to my liking. That’s exactly what I want too. I want the least amount of setup as possible.

Here’s a few things I learned lately:

  • The other day I had a realization about the CSS display declaration. I was having trouble fully understanding the difference between inline and inline-block. It finally clicked! I use inline-block if I need the element to fit inline AND if I need to adjust its dimensions. If it’s just inline, then I can’t adjust width and height.
  • I learned a couple methods for eliminating white space between inline divs. That’s something I have struggled with prior to these classes that I’m taking. If the divs are on separate lines then the browser renders the carriage return as a space, so by keeping the divs butted up against each other it will eliminate the space. Another method is to add “font-size: 0” to the parent.
  • I had another ah-ha moment when I was working on a JavaScript project. I was using a while loop but I couldn’t figure out why my variable wasn’t getting iterated. Well I realized I had the variable called within the loop so it was always getting reset every time the function was called. I placed it outside of the loop but it still wasn’t working properly. Well then I realized my while loop was looping until my variable was zero, so then it was reset back to the initial value each time the function was called, rather than iterating. That’s when I discovered the power of For Loops! I learned how to use an index to iterate, and then my project worked! It was such an awesome feeling to have one of those moments. I had been trying to get my code to work for at least two hours. As soon as I got the For loop dialed in everything worked! That’s the best feeling when I figure something out and learn something valuable at the same time.

 

There is probably a ton more to share but like I mentioned it’s all going so fast now! I’m learning a lot and I am really enjoying it too.

Github Newbie

3/13/17

Yesterday I joined Github. I have no idea how to use it yet but that will change soon. I will start uploading projects that I work on for my online classes. Speaking of that, I created a color guessing game, using standard JS, yesterday. It was a project for my Coursera.org Full-Stack class. It’s already up on Github. Hopefully I can buy a domain soon though. I’d like to link to my projects for people to see the functionality. I don’t know yet if that’s possible on Github. I tried to find a way to launch the webpage but all I can do is view the code.

Last week I learned a valuable coding lesson while I was practicing. I had a couple of textareas and I was practicing grabbing text from one and copying it to the other. I had a couple of variables setup which were assigned to the content of the textareas using getElementById. Well, I was troubleshooting the reason why it wouldn’t work when I clicked the button to copy the text. After a lot of head scratching and internet searches I figured out the problem. So, the textareas started out empty when the page loaded, and then I was entering in text and then clicking the button. All of my code syntax was correct, but the variables were outside of the click function so the variables were empty when the page loaded. When I included the variables inside of the function, then it would grab the text I entered and display it in the other textarea. I think that is a lesson I’ll take with me forever now. It made a lot of sense when I figured it out and I had one of those ah-ha moments.

The other online Full-Stack class that I am taking is over at Thinkful.com and so far it’s been really great! I am off to a slow start, but that will change as of today. I am going to shoot for 20 hours of coding practice every week. I’ll continue to do my Coursera.org class as well but that is completely self-pace. The Thinkful course is much more official, like an actual college class, but it’s 100% online. They assigned me a mentor, who I’ll meet with 2-3 times every week. Also, there are weekly “reflections,” where they want me to talk about what I learned in the prior week. So with those two things- the mentor and the reflection sessions- I’ll be motivated to stay on task. I don’t want to fall behind and not have relevant topics to discuss at those meetings. It’s going to be a really tough six months, but I’m looking forward to it and I’m excited!

Bootcamp: Day 1

3/8/17

Today was the start of my Web Developer Bootcamp at Thinkful.com. I’m really happy with my decision so far! I think this is going to be a great experience!

As expected, it starts out with the basics. Here are some of the things I did today:

  • Learned how to use CodePen.com
  • Installed Sublime text editor and learned how to: access the command palette, use the tab completion feature, setup a folder structure in the side panel, install Sublime packages, use the multi-edit feature, and some other handy keyboard shortcuts.
  • Review of basic HTML and CSS.
  • On my own, and unrelated to the class, I took a break and learned how to create a triangle using CSS. At first I couldn’t wrap my head around it. I couldn’t figure out how the triangle was formed by making the adjacent sides transparent. Then I found an animated gif that showed how the borders meet an angle. Then it all made sense. Pretty cool stuff!
  • Then I went back to my class and learned more about the Sublime editor, which lead me to these helpful pages:
  • I’ve been including some links with each entry, so on-top of the two above here is an interesting article I read today about creating standards within the coding bootcamp communities.

JavaScript and Bootcamp

3/6/17

I’ve made a lot of progress in the last 37 days! This could easily turn into a novel, but I’ll attempt to keep things concise. In a nutshell though, I continued to review and refresh topics I was already familiar with, going into February, and then eventually getting into JavaScript around the end of February. I am now deep into uncharted territory, as far as my skillset goes. I’m now learning something new each time I work on a new lesson. This is my first time taking a structured JavaScript course. The only exposure to JS that I’ve had in the past has been completely self taught by means of copying existing code found online and tweaking it to meet my needs. And doing that takes a very long time because I have to research every little baby step along the way. So what ends up happening is I get the code to work, however, I don’t know exactly why it works nor do I understand each element of JS. Now though, I’m starting to understand it; and it’s fun! I’m really enjoying learning JavaScript so far.

I’ve got some other exciting things to mention as well. I’ll list them out now, in semi-chronological order.

  • At the beginning of February the course that I was working on at Codecademy was touching on the CSS selectors Display and Visibility. I learned about inline, inline-block, and none, and how they work in relation to the elements around them. I also learned about the difference between display: none and visibility: hidden. The former removes it from the page and hidden still leaves space reserved for the element on the webpage, although the content is not visible without checking the source code.
  • Around mid-February is when I started getting beyond my current knowledge of CSS. The selectors and properties that I was learning about were a little familiar to me but I didn’t fully understand them. Like, I had used them in my code before but I didn’t have a solid understanding about how exactly they worked. Such as pseudo-classes and how to target nested elements. I learned how I could target an element that was several Divs deep and I learned how to use the first-child and nth-child pseudo-classes. An all new topic for me was the CSS selector Box-Sizing. I learned how it could be changed so that a container’s dimensions aren’t changed when padding and margin values are added. Around that time I also did a deep dive into CSS positioning. Relative and Absolute had always confused me, but I have a good understanding of both now! This video (and part 2) helped me a lot!
  • Mid-February was a time when I was deeply contemplating my future. Getting a new job that pays well is really important to me. The pressure is weighing on me, so I was thinking about how I could step up my coding practice and what else I could do to improve my chances of getting a job. I thought of a couple things which I’ll be doing very soon: starting a YouTube channel as another avenue to track my progress and I’m going to buy a domain to use for my portfolio and resume.
  • I also made a decision to sign up for an online coding bootcamp. The free courses and cheaper self-pace courses weren’t going to cut it in the end. I looked at all the major ones and landed on Thinkful.com. I signed up about two weeks ago and I just had my first orientation video conference tonight. It went very well and so far I feel like I made an excellent decision. It’s a six month Full-Stack course. When I initially decided to go for a web developer job I was aiming for a Front-End position, but that has changed now. I am going to set my sights on learning the full stack*. It’s going to be a long difficult path but I am in high spirits right now and feeling very determined! *blog tagline updated from front-end to full-stack ; ).
  • When deciding which bootcamp to go with I had sent an email to Thinkful and the response I got was quite helpful. I wanted to know why they were teaching React when most of the other bootcamps were teaching Angular. They told me that in their research React had overcome Angular and they foresee it being more widely used in 2017. That was the first time I had heard anybody say that, and that was after reading several articles on the topic, and even watching a lot of YouTube videos about it too. I didn’t agree, to be honest. So I went to all the major online job boards and took a poll. Sure enough, he was right! Although Angular is still pretty hot in the Seattle area, React got more hits on almost all of the job sites. During my video call today I asked about using React with Node because I was under the impression most developers were using Node in the MEAN stack. That’s when I learned about MERN!
  • Around the same time I signed up for Thinkful, I also signed up at Slack and Codepen. Immersing myself in the coding community will be important moving forward. This needs to be my life for the next six months in order to be successful. I found another free website called FreeCodeCamp. It looks like a really great site. Not sure if I’ll use it though, because a majority of my time will be taken by Thinkful.
  • Back to some of the coding topics I’ve been learning. I dipped my feet into the JavaScript pool. I started with posting “Hello, World.” to the screen and now I’m learning about generating random numbers. In between, I learned about conditional if-else statements, switch cases, functions, loops, and global variables. I learned something about variables that I found interesting. Depending on how they are declared within a function can make a big difference. E.g. if I use “var”to declare a variable inside of a function then the variable remains local, but if I don’t use var, and the variable has not yet been introduced, then the variable becomes global. I think I got that right. I hope.
  • I added a new tool to my kit. I started using the built-in browser dev tools to troubleshoot my code. I don’t know how I’ve went this long without even checking it out. I guess maybe I assumed it would be too advanced for me to understand, but it’s been very helpful. I also downloaded Atom and Sublime. I’ll be checking those out very soon. I’ve been solely using Visual Studio Code so far.
  • In my past few entries I’ve shared some videos and articles. Let’s keep the tradition going! When I learned that I will be studying React instead of Angular, I decided to do some research. So here is one of the videos I watched; it’s Dan Abramov giving a presentation about Redux. Here’s an interesting article about vertical alignment using CSS. And last, here is a video that I found helpful. It’s about finding a web developer job if you don’t have experience.

More HTML and CSS Progress

2/1/17

Still working through the free lessons over at Codecademy. Most of it is still review as well. Although new topics are starting to become more common. Tonight, some of the topics that were new to me were:

  • linking to Google Fonts- it was my first time learning that Google has a repository of free fonts that developers can link to. I think that’s pretty cool! It allows devs to use a font that would still be displayed even when it’s not installed on the end-user’s device. I’ll link to it at the bottom.
  • the word “leading” in reference to adjusting line height. I have long known how to adjust line height but the lesson taught me exactly where the adjustment takes place. That was my first exposure to the terminology.
  • kerning in ref to letter spacing. Same kind of thing as leading. Although I had hear of the term kerning I didn’t know the meaning of it until I went through the lesson tonight.
  • using a number for font weight. This was new to me. I know it’s very basic but I had always used “normal” and “bold.” So this is cool. It opens up a new door for me.
  • text-transform. This was totally new to me. I didn’t know that it was possible to transform text between upper and lower via CSS.
  • min and max width and height. Another new one for me. I think the lesson I went through tonight it preparing for a future Responsive Web Design course. I learned about establishing minimum and maximum width and height. Cool stuff!

Also, I dived a little deeper into the “em” measurement. The lesson did an ok job at explaining it but I was still confused. With a search I found a page that explained it quite well. I’ll link it at the bottom.

In my last entry I closed with two links to coding videos that I liked. This time I have one article and one very helpful webpage to link to:

  • This article helped me understand the “em” measurement.
  • If you haven’t heard of Google Fonts you should check it out!

HTML and CSS Progress

1/26/17

Since my last entry I’ve been perusing CodeSchool.com and Codecademy.com. I’ve been taking advantage of the free lessons they offer. I’m still brushing up on HTML and CSS basics. I am already familiar with a majority of the material in the lessons. As far as HTML goes, I feel comfortable coding on my own. I still have to look up specific syntax or an exact element name sometimes though. The only new material that stands out in my mind is a CSS3 value to control opacity, called rgba(). The “A” stands for Alpha. I learned that it’s only available for CSS v3 and it can only be used with RGB colors values. Other than that I don’t recall learning anything new yet.

Soon, I will run out of free lessons available from those two site, so I’ll need to pick one to pay for. I’m also paying a monthly subscription for CourseRA.com. I’ve gone through all of the HTML and CSS lessons there. The next lesson dives into JavaScript. I was holding off on starting that because I want to get more HTML and CSS practice under my belt. I’ll probably get started on that this week though.

My focus is improving. When I started this journey it was difficult to get in the mood to code when I got home from work. I had to make myself do it. Now, I find myself thinking about coding when I am away from a computer and I also put in a little practice while at work when I get some spare time. It’s getting much easier to practice coding when I get home from work as well.

I’ve been starting to watch coding videos too. I think I’ll start picking a couple that I liked to share in my posts.