Beginning My Udacity Intro to Programming Course

Jesse Sumrak
Becoming a Developer
3 min readJan 23, 2019

I officially started the Udacity Intro to Programming Course last week on January 15th, and it’s been a blast so far. The course will cover the basics of HTML, CSS, Python, and JavaScript, and already it’s been a great learning tool. I’ve taken classes on CodeAcademy, Udemy, and freeCodeCamp, but this might be my favorite structure, so far.

This course has a nice blend of videos, text, quizzes, open-ended questions, links to additional resources, thought-provoking debates, and applied learning. Personally, it helps reinforce the concepts I’m learning rather than simply through drill after drill, like with CodeAcademy, for example.

Currently, I’m just beginning the Python section (thank goodness! 🙏). I breezed through the HTML and CSS lessons, mostly because it was more of a reminder since I’d spent 40+ hours learning those back in November. Enjoying the grind so far, trying to squeeze in 10–15 hours a week on top of the full-time job, part-time job, family obligations, and church. It’s a grind, but I’m enjoying it so far.

The first CSS project we created simple Animal Trading Cards. Of course, I created the bear card with some really simple HTML + CSS.

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animal Trading Cards</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="card">
<!-- your favorite animal's name goes here -->
<h3 class="animalName">Grizzly Bear</h3>
<!-- your favorite animal's image goes here -->
<img class="bearPicture" src="brownBear.jpg" alt="grizzly bear">
<div class="info">
<!-- your favorite animal's interesting fact goes here -->
<p class="uniqueFact">Grizzly bears can run up to 35 mph.</p>
<ul>
<!-- your favorite animal's list items go here -->
<li><span>Scientific Name</span>: Ursus arctos</li>
<li><span>Average Male Weight</span>: 600 lbs.</li>
<li><span>Average Male Height</span>: 9 feet</li>
<li><span>Average Male Lifespan</span>: 22 years</li>
</ul>
<!-- your favorite animal's description goes here -->
<p>Grizzlies are massive animals with humped shoulders and an elevated forehead that contributes to a somewhat concave profile. The fur is brownish to buff, and the hairs are usually silver- or pale-tipped to give the grizzled effect for which they are named. </p>
</div>
</div>
</body>
</html>

CSS

card {
border: 1px solid lightgray;
margin: 3px;
padding: 0px 3px 12px 5px;
width: 315px;
height: 580px;
}
.animalName {
padding-left: 5px;
font-size: 25px;
}
.bearPicture {
width: 300px;
padding: 0px 6px 6px 6px;
}
/*Information About the Bear*/
.uniqueFact {
font-style: italic;
}
.info {
border: 1px solid lightgray;
margin: 5px 10px 0px 5px;
padding: 0px 15px 5px 15px;
width: 270px;
}
/*Animal List Items*/
li span {
font-weight: bold;
}
ul {
list-style: none;
padding-left: 0;
}

And this created…

Beautiful, right? Now…on to Python!

--

--

Jesse Sumrak
Becoming a Developer

Jesse Sumrak is a writing zealot focused on creating killer content. He’s spent almost a decade writing about startup, marketing, and entrepreneurship topics.