Working With Chrome DevTools

After working with web dev technologies for the past two years, I am finally beginning to understand the virtues of developer tools, specifically Chrome DevTools 1.

Intimidated by the ‘Tools

For a while now I had been intimidated by all the tabs and functions of the Chrome DevTools 2. But as I became a better developer 3 I began to use DevTools to debug my apps. The more I worked with them, the more fearless I became.

Some Interesting, Basic Things You Can Do with the ‘Tools

Playing with the HTML

The nice thing about DevTools is that whatever you play with inside of them, it really doesn’t affect the site you’re playing with.

Here I can add a class on an element 4 and hit return. It adds the class.

View post on imgur.com

Changing Styles

Here you can just play around with the styles on the site. Here, I change the color of the text on Packt Pub to a color called Disco.

View post on imgur.com

 

Maybe Some More DevTools Content?

I think I will make a series out of this. What do you think?


  1. I can definitely argue they are the best around. Safari, on the Mac is probably the worst, but then, Apple has no incentive to give web developers tools because it won’t help their bottom line, i.e. App Store. 
  2. Hackers hack: I spent my late teens and early twenties just playing around with Windows, not being scared of breaking things. Not sure why I didn’t just play around with the tools. 
  3. And watched countless tutorials… 
  4. It’s really a ridiculous class: page-id? I was stumped while making the gif. Ha. 

The Web Developer Bootcamp

So I am still working on Check Yo Self, but, like I do, I jumped into another tutorial where you build stuff. I am so stuck on and afraid of the logic of Check Yo Self that I decided that I needed to shore up some knowledge of basic JavaScript 1 so I bought, and have started working on The Web Developer Bootcamp by Colt Steele.

Colt is a Bootcamp instructor in San Francisco 2 and has taught students how to be professional full-stack web developers for mountains of money. His Udemy course is usually $1000 but I got it for $10 on one of their deal weeks.

It is one of the highest rated courses on Udemy and especially recommended by web devs across the internet.

Relearning Basics

I started from the beginning. I did skip some HTML and CSS stuff but as I said on my Facebook page:

I guess starting out coding in HTML and CSS…It felt really easy and so I skipped over A LOT. Free Code Camp taught Bootstrap so I felt there was no need to learn deeper.

Taking the Web Developer Bootcamp course has opened my eyes to so much about semantic markup, what attributes, block level elements, inline elements, selectors, and properties are and their differences. Can’t believe I aced my intro to web dev class without knowing that much about basic web dev.

It is never a good idea to skip things, no matter how “easy” they seem. I am learning that.

Granted, as you get better there are things you can skip but if the language is new or the concepts are new, it behooves anyone to learn it. Do not skip it.

Course Curriculum

This is a full stack course where we will basically learn the MEN stack. He excludes Angular. Not sure why but we will end up building several front and back end projects ending in YelpCamp, a Yelp clone for camps using Mongo, Express, and Node.

Exercises.

Here is a form I built in HTML that I had an issue with 3.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Register</title>
</head>

<body>
  <h1>Register</h1>

  <form class="register">
    <label for="firstName">First Name: </label>
    <input id="first" type="text" name="firstName" placeholder="John" required />
    <label for="lastName">Last Name: </label>
    <input id="last" type="text" name="lastName" placeholder="Doe" required />

    <div class="sex">
      <label for="male">Male </label>
      <input id="male" type="radio" name="gender" value="male">
      <label for="female">Female </label>
      <input id="female" type="radio" name="gender" value="female">
    </div>

    <div>
      <label>Email:
        <input type="email" name="email" placeholder="Your email" required />
      </label>

      <label>Password:
        <input type="password" name="password" pattern=".{5,10}" required title="Password must be 5 to 10 characters" />
      </label>
    </div>

    <div class="birthday">
      <label for="birthday">Birthday: </label>
      <select name="month">
        <option value="Month">Month</option>
        <option value="Jan">Jan</option>
        <option value="Feb">Feb</option>
        <option value="Mar">Mar</option>
      </select>
      <select class="day">
        <option value="Day">Day</option>
        <option value="first">1</option>
        <option value="second">2</option>
        <option value="third">3</option>
      </select>
      <select class="year">
        <option value="Year">Year</option>
        <option value="1978">1978</option>
        <option value="1979">1979</option>
        <option value="1980">1980</option>
      </select>
    </div>

    <div class="terms">
      <label for="terms">I agree to the terms and conditions </label>
      <input type="checkbox" name="check" value="terms" required />
    </div>
    <input type="submit">
  </form>
</body>

</html>

Here is some CSS from the basic CSS section that I just finished. There is something like 42 hours of video and assignments.

/* Style the HTML elements according to the following instructions.
DO NOT ALTER THE EXISTING HTML TO DO THIS.  WRITE ONLY CSS!

/* Give the <body> element a background of #bdc3c7*/

body {
  background: #bdc3c7;
}


/* Make the <h1> element #9b59b6*/

h1 {
  color: #9b59b6;
}

/* Make all <h2> elements orange */

h2 {
  color: orange;
}

/* Make all <li> elements blue(pick your own hexadecimal blue)*/

li {
  color: #459BE6;
}

/*Change the background on every paragraph to be yellow*/

p {
  background: yellow;
}

/*Make all inputs have a 3px red border*/

input {
  border: 3px solid red;
}

/* Give everything with the class 'hello' a white background*/

.hello {
  background: white;
}

/* Give the element with id 'special' a 2px solid blue border(pick your own rgb blue)*/

#special {
  border: 2px solid #459BE6;
}

/*Make all the <p>'s that are nested inside of divs 25px font(font-size: 25px)*/

div p {
  font-size: 25px;
}

/*Make only inputs with type 'text' have a gray background*/

input[type="text"] {
  background: gray;
}

/* Give both <p>'s inside the 3rd <div> a pink background*/

 div:nth-of-type(3) p {
  background: pink;
}

/* Give the 2nd <p> inside the 3rd <div> a 5px white border*/

div:nth-of-type(3) p:nth-of-type(2) {
  border: 5px solid white;
}

/* Make the <em> in the 3rd <div> element white and 20px font(font-size:20px)*/

div:nth-of-type(3) em {
  color: white;
  font-size: 20px;
}


/*BONUS CHALLENGES*/
/*You may need to research some other selectors and properties*/

/*Make all "checked" checkboxes have a left margin of 50px(margin-left: 50px)*/

input:checked {
  margin-left: 50px;
}

/* Make the <label> elements all UPPERCASE without changing the HTML(definitely look this one up*/

label {
  text-transform: uppercase;
}

/*Make the first letter of the element with id 'special' green and 100px font size(font-size: 100)*/

#special::first-letter {
  color: green;
  font-size: 100px;
}
/*Make the <h1> element's color change to blue when hovered over */

h1:hover {
  color: blue;
}
/*Make the <a> element's that have been visited gray */

a:visited {
  color: gray;
}

Other Courses

Eventually, I’d like to be an iOS dev at some point. So I bought a Swift course from Steven 4 and award winning iOS dev from the Hacking With Swift series, Paul Hudson.

I won’t be starting that course until after I start the other course I bought Modern React with Redux and Webpack.

Got all of these courses for $10 a piece. Not too bad.


  1. Not just jQuery. 
  2. His apartment has me starry-eyed and wishing for a dev job and I am totally California dreamin’. 
  3. A form. Of all things. 
  4. Guy’s last name is always escaping me. 

CSS and Stack Overflow

\"wpid-6a0120a85dcdae970b012877705432970c-pi.jpg\"

 

My friend Piper put me on the correct path for my footer with the following code:

footer div {

width: 32%;

background: rgba(113,15,154,0.73);

border: 1px solid rgba(255,255,255,0.00);

display: inline-block;

vertical-align: top;

overflow-x: none;

}

footer div p {

max-width: 100%;

margin-left: 0;

padding: 0;

}

But that left me with some janky (my new favorite word, apparently) formatting that I could not get rid of by myself. Stack Overflow to the rescue!

So. I got four answers and tried three before I tried this:

footer {

background: rgba(113,15,154,0.73);

}

footer div {

width: 32%;

border: 1px solid rgba(255,255,255,0.00);

display: inline-block;

vertical-align: top;

text-align: center;

}

footer div section {

max-width: 100%;

margin: auto;

padding: 20px;

text-align: center;

}

And boom. Fixed…but not quite.

There was an issue with the Font Awesome icons that I still can’t get right– the dribble icon was floating right of the footer. I decided to put the icons in a div id container and style it. That has worked– the icons are all at the bottom but no matter what I do, I can’t get them to float left.

Here is the HTML:

 <div id="container"> 
 <a href="https://www.behance.net/twhite412photo"><i class="fa fa-behance-square fa-2x"></i></a>
 <a href="https://www.linkedin.com/in/tiffanyrwhite/"><i class="fa fa-linkedin-square fa-2x"></i></a>
 <a href="https://twitter.com/TiffanyW_412"><i class="fa fa-twitter-square fa-2x"></i></a>
 <a href="https://github.com/twhite96"><i class="fa fa-github fa-2x"></i></a> 
 <a href="https://plus.google.com/+TiffanyWhiteWriter"><i class="fa fa-google-plus-square fa-2x"></i></a>
 </div>

And the CSS:

footer div container{
 float: left;
}

Sigh. It is almost 2 am in Pittsburgh and I have been messing with this for the past two days. It isn’t where I want it, regardless of the hinky CSS. I need JavaScript and JQuery to make it not just a static page. Maybe some CSS animations. Don’t know. Yesterday I thought, “this will be up in running in three months, tops, regardless of if I’m ready to freelance”. Today I’m back down to earth.

Responsive Grid System

<div class="section group">
 <div class="col span_1_of_3">This is column 1</div>
 <div class="col span_1_of_3">This is column 2</div>
 <div class="col span_1_of_3">This is column 3</div>
</div>

This whole mess broke the very thing I was trying to do with the footer of my site. Why does responsive code have to be so verbose? The main complaint, it seems from devs who are tons more experienced than me, is that it is slower loading. I mean, I guess if you traverse around the interwebs, you will see complaints about slow responsive sites.

I copied the code, just as expected. Tweaked the margins of the columns but yet the footer background color I wanted just didn\’t span the width of the body. I edited all the css and I still couldn\’t get it right, Googled like a fiend, copied this, tweaked that and until I deleted the responsive code my footer was a mess.

My friend Piper helped me out but somewhere in my HTML there is a problem. We decided that using this:

<footer>
 <div></div>
   <div></div>
     <div></div>
</footer

for the HTML and

footer div { width: 30%, margin: 4.5% } display: inline-block 

for the CSS would get the desired effect, which is a footer that looks like this:

\"Minimal

But it didn’t turn out like that. I am packing up a zip file and sending my horrendously indented code off to her. I have been at this the entire day, from 11 am to 6 PM. This is when being a developer tests all your mettle…

Code Newbie SMACKDOWN– IDEs

While-Loops-While-Loops-231x300We’re all code newbies, well, most of us. I think we can, as well as the esoteric old timers, get caught up in the tools we use.

For me, I like a nice GUI in my IDE. I like auto-completion. If it is web development I am doing, I like to have tools built-in to see my site live, right in the IDE. Having a mobile counterpart isn’t necessary but if it has one great!

I would really like an All-in-One editor but I know having different editors has its strengths and weaknesses, weaknesses being too many cooks. But I have settled on five editors. I’ll break it down here.

Coda 2.5
This is my web IDE of choice. The fact that the extra bells and whistles in it are actually useful and I use them regularly, makes it worth the $75 price tag. There is a built-in web inspector, validator, auto-completion (every good editor should have this), debugger, and speedy Transmit FTP built right in. I made the mistake of buying Transmit, from the people who make Coda, without realizing I had it built into Coda but it has its uses. The UI is great. You can even assign clips or snippets to make your web development easier, and it comes with books!

JetBrains PyCharm, PHPStorm, and RubyMine
These IDEs are pricey enough, even though you can get the Community version of PyCharm for free. They are top of the line IDEs though, so you’re good in using them. Most blogs I came across and friends of mine on Facebook, recommend JetBrains.

I am still playing with them, as I just downloaded them last night. If you are a student, like me, you can, with your academic email address, receive the whole JetBrains IDE bundle for free for a year, with yearly renewing required. That’s how I got them.

I won’t be delving too much into them just yet– learning the foundations of programming currently and then once that course is completed I will be working with Python and Ruby, so I’ll let you know how they work.

Text Editors

Sublime Text 2
You could use this as your IDE all by itself, no problem. Many people do. I wanted more features that what Sublime could give, even with its plugins so I bought/downloaded separate IDEs for different use cases. I use Sublime Text as a text editor when I am learning code with Lynda.com. The auto-completion is better in this than in Coda for whatever reason but Coda offers so much and has its own plugins that I am going to continue using it (also, it’s $75).

What are you guys using for your IDEs? I won’t talk too much about tools on this blog– it’s all subjective and already a topic where newbs could spend too much time deciding because, let’s face it, we all love software, which is why we want to build it. If you could, or, if you want to, take the poll down below. Thanks!