The Web Developer Bootcamp

Back

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 (opens in a new tab).

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.

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 (opens in a new tab).

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.

Footnotes

  1. Not just jQuery. ↩ ↩2

  2. His apartment has me starry-eyed and wishing for a dev job and I am totally California dreamin’. ↩ ↩2

  3. A form. Of all things. ↩ ↩2

  4. Guy’s last name is always escaping me. ↩ ↩2

© tiff.RSS