#301DaysOfCode Daily Updates

Free Learning Resources

This track assumes you have an undisturbed hour every day to dedicate to learning code. We will use free lessons from all three institutions listed below. To save time, sign up for all of them before you start.

Free Code Camp
Free Code Camp
Code Cademy
Code Cademy
Code School
Code School

Already know how to code? Check out this coding challenge round up – 17 Coding Challenges to Help You Train Your Brain

Jan - March 2017

Hey hey!

I am kicking the new year off right with a few months of review. Solid foundations are the key to long-term success.

Everyone learns at a different rate if you feel like you need to go slower, or faster than this course track, feel free.

Objectives:

  • Learn HTML, CSS, responsive design, and the Bootstrap Framework.
  • Also learning, command line, Git, and publishing websites.
  • Later, making HTML 5 projects for my portfolio.

My 2017 – 2020 Dev Map

Intro to HTML & CSS - Part 1 - (Day 1)

Happy new year!!

I am starting off 2017 right. One hour of HTML coding.

The first lesson from Free Code Camp is Say Hello to HTML Elements.

I have not planned a format for this challenge because I want to feel it out.

Free Code Camp Lessons Covered:

  • Say Hello to HTML Elements
  • Headline with the h2 Element
  • Inform with the Paragraph Element
  • Uncomment HTML
  • Comment out HTML
  • Fill in the Blank with Placeholder Text
  • Delete HTML Elements
  • Change the Color of Text
Intro to HTML & CSS - Part 2 - (Day 2)

Free Code Camp Lessons Covered:

  • Use CSS Selectors to Style Elements
  • Use a CSS Class to Style an Element
  • Style Multiple Elements with a CSS Class
  • Change the Font Size of an Element
  • Set the Font Family of an Element
  • Import a Google Font
  • Specify How Fonts Should Degrade
Intro to HTML & CSS - Part 3 - (Day 3)

Free Code Camp Lessons Covered:

  • Add Images to your Website
  • Size your Images
  • Add Borders Around your Elements
  • Add Rounded Corners with a Border Radius
  • Make Circular Images with a Border Radius
  • Link to External Pages with Anchor Elements
  • Nest an Anchor Element within a Paragraph
  • Make Dead Links using the Hash Symbol
  • Turn an Image into a Link
Intro to HTML & CSS - Part 4 - (Day 4)

Free Code Camp Lessons Covered:

  • Create a Bulleted Unordered List
  • Create an Ordered List
  • Create a Text Field
  • Add Placeholder Text to a Text Field
  • Create a Form Element
  • Add a Submit Button to a Form
  • Use HTML5 to Require a Field
  • Create a Set of Radio Buttons
  • Create a Set of Checkboxes
  • Check Radio Buttons and Checkboxes by Default
Intro to HTML & CSS - Part 5 - (Day 5)

Free Code Camp Lessons Covered:

  • Nest Many Elements within a Single Div Element
  • Give a Background Color to a Div Element
  • Set the ID of an Element
  • Use an ID Attribute to Style an Element
  • Adjusting the Padding of an Element
  • Adjust the Margin of an Element
  • Add a Negative Margin to an Element
  • Add Different Padding to Each Side of an Element
  • Add Different Margins to Each Side of an Element
  • Use Clockwise Notation to Specify the Padding of an Element
  • Use Clockwise Notation to Specify the Margin of an Element
Intro to HTML & CSS - Part 6 - (Day 6)

Free Code Camp Lessons Covered:

  • Style the HTML Body Element
  • Inherit Styles from the Body Element
  • Prioritize One Style Over Another
  • Override Styles in Subsequent CSS
  • Override Class Declarations by Styling ID Attributes
  • Override Class Declarations with Inline Styles
  • Override All Other Styles by using Important
  • Use Hex Code for Specific Colors
  • Use Hex Code to Mix Colors
  • Use Abbreviated Hex Code
  • Use RGB values to Color Elements
  • Use RGB to Mix Colors
Learning CSS Foundations Part 1 - (Day 7 & 8)

Code Academy Lessons Covered:
Course link: HTML & CSS
Note: This course uses some outdated HTML 4 principles, but has quality content to review. Read more

What’s New? This portion of the course will be touching on how to make tables, rows, and spans. It introduces new common terms for referring to HTML such as “tags” rather than “elements”.

  • Introduction to HTML
  • HTML Structure: Using Lists
  • HTML Structure Tables, Divs, and Spans
Learning CSS Foundations Part 2 - (Day 9 & 10)

Code Academy Lessons Covered:
Course link: HTML & CSS
What’s New? External style sheets, em font sizes, text decoration, using multiple CSS Selectors, the universal CSS selector, branching, CSS Hierarchy, specificity value, pseudo-class selectors.

  • Introduction to CSS
  • CSS Classes and IDs
  • CSS Element Positioning
Learning CSS Foundations - Part 3 - (Day 11 & 12)

Code Academy Lessons Covered:
Course link: Learn HTML & CSS: Part I
What’s New? Opening anchor links in a new window. Improving code readability. Line breaks. W3C Standards. “Color” propery referred to as “foreground color”. HSL colors. rgba color opacity. Backup colors/depreciated color support on older browsers. Font size types. Line height/leading. Word spacing. Letter spacing. Font weight. Font style. Text transform. Muli-class CSS selection.

  • HTML Content
  • CSS Fundamentals
  • Styling with CSS
  • Organizing HTML & CSS
Learning CSS Foundations - Part 3 - (Day 12 & 13)

Code Academy Lessons Covered:
Course link: Learn HTML & CSS: Part I
What’s New? Responsive design basics; Min/Max width/height in CSS. Text overflow. Introduces new border styles. Cleaning up code bloat”. Visibility. CSS image class sizing. Background images, repeat, size, position, scrolling. Gradients. Deprecated code.

  • The CSS Box Model
  • CSS Positioning
  • Images
  • HTML Tables
Pause for the Cause

Test your HTML & CSS knowledge so far.

W3 Schools also offers certs, but I’m not sure how mich weight they would carry. Though, W3 Schools has been around for over 10 years.

Learn the Command Line - Part 1 - (Day 14)

Code Academy Lessons Covered:
Course link: Learn The Command Line

  • Navigating the File System
  • Viewing and Changing the File System

Commands often used:

  • ls command – How to view file names from the command line.
    • ls -a – The -an option shows hidden files and directories.
    • ls -l – The -l option shows file and directory details.
    • ls -t – The -t option orders files and directories by the time they were last modified.
  • PWD command – Determine your current directory.
  • cd command – How to change directories.
    • cd .. – Move up a directory.
  • mkdir command – Make a new directory.
  • cp command – Copy a file or directory.
  • mv command – Move a file or directory.
  • rm command – Remove/Delete a file.
    • rm -r – Remove/Delete a directory.
  • grep command – “global regular expression print”. Searches files for lines that match a pattern and returns the results. It is also case sensitive.
Learn the Command Line - Part 2 - (Day 15)

Code Academy Lessons Covered:
Course link: Learn The Command Line

  • Redirecting Input and Output
  • Configuring the Environment

Useful topics covered:

  • Nano editor
  • ~/.bash_profile
  • Editing, updating and managing the environment.
Learn Git - Part 1 - (Day 16)

Code Academy Lessons Covered:
Course link: Learn Git

  • Basic Git Workflow
  • How to Backtrack in Git

Take aways:

  1. A Working Directory: where you’ll be doing all the work: creating, editing, deleting and organizing files
  2. A Staging Area: where you’ll list changes you make to the working directory
  3. A Repository: where Git permanently stores those changes as different versions of the project

Common Commands:

  • git init – Initialize Git
  • git add . – Add everything in your current working directory.
  • git commit -m “Message Here” – Commit your code to the staging environment, and leave a message with it.
  • git push – Push your commit to the code repository.
  • git diff – See the difference in file/code changes.
  • git log – See a log of recent commits with user and date.
  • git show HEAD – will display everything the git log command displays for the HEAD commit, plus all the file changes that were committed.
  • git checkout HEAD filename – will restore the file in your working directory to look exactly as it did when you last made a commit.
  • git reset HEAD filename – This command resets the file in the staging area to be the same as the HEAD commit. It does not discard file changes from the working directory, it just removes them from the staging area.

More Info:

Learn Git - Part 2 - (Day 17)

Code Academy Lessons Covered:
Course link: Learn Git

  • Git Branching
  • Git Teamwork

Commands:

  • git branch – Tells you which branch you are currently on.
    • git branch branch_name – Make a new branch.
    • git branch -d branch_name – Delete a branch.
  • git checkout – Switches branches.
  • git merge – Merge your branch into the master branch.
  • git clone remote_location clone_name – Copies another remote repository.
  • git remote -v – See a list of a Git project’s remotes.
  • git fetch – See if changes have been made to the remote and bring the changes down to your local copy.
    • git merge origin/master – Merge your fetched repo with your local master repo.

Notable topics:

  • Merge conflict.
  • Remotes.
Bootstrap Framework - Part 1 - (Day 18)

Free Code Camp Lessons Covered:

  • Use Responsive Design with Bootstrap Fluid Containers
  • Make Images Mobile Responsive
  • Center Text with Bootstrap
  • Create a Bootstrap Button
  • Create a Block Element Bootstrap Button
  • Taste the Bootstrap Button Color Rainbow
  • Call out Optional Actions with Button Info
  • Warn your Users of a Dangerous Action
  • Use the Bootstrap Grid to Put Elements Side By Side

Free Code Camp Lessons Covered:

  • Ditch Custom CSS for Bootstrap
  • Use Spans for Inline Elements
  • Create a Custom Heading
  • Add Font Awesome Icons to our Buttons
  • Add Font Awesome Icons to all of our Buttons
  • Responsively Style Radio Buttons
  • Responsively Style Checkboxes
  • Style Text Inputs as Form Controls
  • Line up Form Elements Responsively with Bootstrap
Bootstrap Framework - Part 2 - (Day 19)

Free Code Camp Lessons Covered:

  • Create a Bootstrap Headline
  • House our page within a Bootstrap Container Fluid Div
  • Create a Bootstrap Row
  • Split your Bootstrap Row
  • Create Bootstrap Wells
  • Add Elements within your Bootstrap Wells
  • Apply the Default Bootstrap Button Style
  • Create a Class to Target with jQuery Selectors

Free Code Camp Lessons Covered:

  • Add ID Attributes to Bootstrap Elements
  • Label Bootstrap Wells
  • Give Each Element a Unique ID
  • Label Bootstrap Buttons
  • Use Comments to Clarify Code
Make a Website - (Day 20)

We should be able to blaze through HTML, CSS and understand the basics of Bootstrap. For today we are doing the entire Make a Website course by CodeCademy.

Now that we are proficient, we will speed up our development process with (Very) Basic Textbox Keyboard Shortcuts.

Do not worry if you are still going slowly through exercises. Perfect practice makes perfect. Over time, however, practice on speeding up your development process in any way possible.

What is new:

  1. Keyboard shortcuts that allow you to select and edit lines of code faster.
  2. The <video> element.
  3. rem property for font size. Comprehensive Guide: When to Use Em vs. Rem
Deploy a Website (Day 21)

Code Cademy Course Link: Deploy a Website

We will learn:

  • The Github Workflow
  • Publishing GitHub Pages
  • Create a default Jekyll website
  • What is YAML
  • Using Amazon Web Services (AWS) to purchase a domain name
  • Setting Name services (NS)
  • Setting CNAMEs
  • Setting Canonical names
  • Setting A records
Intro to JQuery - Part 1 - (Day 22)

Free Code Camp course: JQuery

Lessons Covered: Learn how Script Tags and Document Ready Work — Thru — Disable an Element Using jQuery

What is new?

  • Defining functions.
  • Targeting elements by type, class, and ID.
  • Using the .addClass function to set styles.
  • Use .removeClass function to remove styles.
Intro to JQuery - Part 2 - (Day 23)

Free Code Camp course: JQuery

Lessons Covered: Change Text Inside an Element Using jQuery — Thru — Use jQuery to Modify the Entire Page

What is new?

  • The .css function to change CSS within JQuery.
  • The .prop function to change the properties of an element; such as disabling the element.
  • The .remove function removes an HTML element.
  • The .appendTo function will move an element you designate to another location.
  • The .clone function will copy an element.
  • The .parent function allows you to select the element one level above the current element.
  • The .target:nth-child(#) function allows you to target child classes.
  • The target:even function allows you to target even classes.

If you’re struggling with the CodeCademy JQuery & SASS like I have, try their intro to JavaScript course in conjunction. It helps with understanding variables and functions more. JavaScript Course .

Do not worry if the last few days of this month are challenging or incomprehensible. We are getting a general overview of front-end tech before we take a step back, review, and practice the basics of what we learned.

Intro to JQuery - Part 3 - (Day 24)

Code Cademy course: jQuery

Lessons Covered:

  • Introducing jQuery
  • jQuery Functions
  • Dynamic HTML

What’s new:

  • Create a JQuery object with $().
  • The .fadeout function will animate your element to slowly hide over a set duration.
  • The .ready function tells to load the script as soon as the HTML document is ready.
  • The .slideDown function reveals additional space of the element you are revealing.
  • The .mouseenter and .mouse leave functions tell an element what to do when a user’s cursor enters or leaves the element.
  • How to assign variables with =. What a variable is.
  • The .fadein function will animate your element to slowly appear over a set duration.
  • A compound selector is applying a function to more than one selector.
  • An “event handler” is a broad term to refer to actions like .onclick, or .mouseenter. While an “event” is an action like .fadeOut.

Resources I looked Up:

Learned from resources:

  • A $ sign to define/access jQuery
  • jQuery uses CSS syntax to select elements
  • All selectors in jQuery start with the dollar sign and parentheses: $()

My Vlog Update:

Personal Notes:

  • I think one of the larger hurdles I’ve had so far is getting comfortable putting the selector before the function. While this makes logical sense when I read the instructions or problem to solve often the function is mentioned before the selector. This makes me think of an episode of Family Guy – in soviet Russia car drives you.
  • Understanding the flow and syntax of “jQuery Event Methods” has been a stumbling block as well.
  • Chaining” that’s the name of the bugger of a concept I’ve been fumbling with!!
  • Learning the basics of JavaScript first would serve me better when attempting this leg of the journey, but I’m going to try to brute force through it.
Intro to JQuery - Part 4 - (Day 25)

Code Cademy course: jQuery

Lessons Covered:

  • jQuery Effects
  • jQuery Events

What is new:

  • “.append() inserts the specified element as the last child of the target element.
  • .prepend() inserts the specified element as the first child of the target element.”
  • .before function
  • .after function
  • “.empty() deletes an element’s content and all its descendants. For instance, if you .empty() an ‘ol’, you’ll also remove all its ‘li’s and their text.
  • .remove(), not only deletes an element’s content, but deletes the element itself.”
  • “.addClass() and .removeClass(), can be used to add or remove a class from an element”
  • .toggleClass()
  • Animating spirtes with JQuery
  • Using the JQuery UI library
Learn SASS - Part 1 - (Day 26)

Code Cademy Course Link: Learn Sass

Lessons Covered:

  • Create a Sass Stylesheet
  • Mixins and the & Selector

What we learn:

  • Compiling SCSS to CSS
  • Variable Scope
  • Defining SCSS variables
  • Data types
    • Numbers
    • Strings
    • Booleans
    • null
  • DRY = Don’t repeat yourself
  • Arguments
  • & selector
  • String interpolation

Commands used:

  • sass main.scss main.css < — Compiles sass into css
Learn SASS - Part 2 - (Day 27)

Code Cademy Course Link: Learn Sass

Lessons Covered:

  • Functions and Operations
  • Sustainable SCSS

What we learn:

  • Adding color values
  • The Sass arithmetic
    • addition +
    • subtraction –
    • multiplication *
    • division /, and
    • modulo %.
  • Each loops
  • For loops

Pause for the Cause (Day28)

Common Code Constructs:

We have covered some very important coding concepts in no time! Do a happy dance 🙂

We learned these universal coding guidelines:

  • Syntax <– Color within the lines of the language you are using. Different languages call for different syntax, be it something as simple as HTML & CSS to more complex Ruby or C++.
  • Keeping your code organized <– This on seems like common sense, but if you have lived in the world for several years you will learn “common sense” is not common. Remember to comment your code, make self-explanatory variable names, and indent to show hierarchy.
  • Refactoring code <– We learned the basics of refactoring code in our CSS lessons. Instead of having two classes that do nearly the same thing, we combined them into one shared class. This made our code more efficient, organized, and easier for others’ to read.
  • Compiling code <– We learned the basic concepts of converting high-level code “Sass” to “CSS” so that your web browser can interpret it. In other languages you may have to work with a compiler and an interpreter to make the code be understood by the medium, service, or device you are programming for. Neat, huh?
  • Variables <– We started learning about these buggers with Sass. They allow us to make our code more efficient, especially when dealing with a repeatable event. Remember, make variable names self-explanatory, use proper syntax, and refactor them when possible. Everyone likes clean code!
    • Per CodeCademy -Variables make it easy to update code and reference values by allowing you to assign an identifier to a value.
  • Data types <– Numbers, Strings, and Boolean Logic, oh my! This stuff is what powers up most programming languages and allows us to make some rad apps! They save a lot of time and lines of code once you understand how to use them correctly.
  • Nested code <– All languages that I know of allow you to put elements of code into other elements to simplify, clean up, and organize your coding experience.
    • Per: CodeCademy – Nesting code is the process of placing child selectors and properties in the scope of a parent selector. This allows a programmer to draw DOM relationships and avoid repetition.
  • Parents, children, grandchildren <– Nested elements are children and grandchildren. Parents rule the family. Now, it’s a party!
  • Scope < — Think of this as the parent variable, element, or selector. If it has children, and grandchildren, they are within the scope of the parent.
  • Staging environments <– These allow us to work on a project in a development environment before we push it to a live production version everyone can see. We learned Git, but I am sure you will come across other alternatives while working in the industry.
Programing 101 (Day 29 - 31)

Woah! Can you imagine it has already been a month on rapid learning and consistent code? Think you are pretty awesome eh? You are ^_^

Keep calm and practice #ConsistentCode. Part of consistent code is continually reviewing, and added new concepts.

For the next few days, we are diving into Programing 101 with Clean Coders. Uncle Bob is one of my favorite kooky coders, you will see what I mean ^_^ He makes code interesting.

Split this video into three days. Take notes of new concepts, and test yourself to bridge what we have currently learned with new material.

Remember, you are awesome, but, as you will soon find out, you are just learning to crawl. Stay patient, and humble. Next month we will backtrack a little. We will focus on some design concepts, wire framing, and lay the foundation for the first of our front-end projects.

Day 30 - Personal Note
  • Worked on 100 Days of Code Twitter Bot
  • Looked up Create a local clone of fork
    • git clone <Forked repo URL>
  • Looked up How do I update a GitHub forked repository (Only updates locally)
    • git remote add upstream <URL> < — Set my fork to original repo
    • git remote -v < — To check upstream is set correctly
    • git fetch upstream < — Updated fork from the main project repo
    • git checkout master < — switch to master branch
    • git merge upstream/master < — Merge the updated original repo with my local forked version.
  • Read Pushing to a remote
    • git push origin master < — Pushes my locally updated repo to my forked repo
  • Looked up Pull Request Tutorial
    • Reviewed notes and article on how to create a new branch.
    • git pull origin master <– Ensured everything was up-to-date again
    • git checkout -b <new-branch-name> < — Make a new branch
  • Looked up How to exit a git status list in terminal
    • Use “q”

Benjamin Spak

Started #301DaysOfCode. Practices #ConsistentCode Personality #INTJ. Encourages #SeizeSuccess. Fun #FridayNightCode.

Love this free course so far? Please consider donating 🙂

One month of #301DaysOfCode down!! Congrats! Start month 2 on your #ConsistentCode journey.

  • Alvaro Mesa

    Great guide, can you tell what resources, sites you use to learn? most of them free, any paid?. Also great work udpating and taking notes, those really help. I started in January and I need to be more organized.

    • I try to use all free resources so that other people can follow in my footsteps. I have a membership to skillshare and Lyndia, but I rarely use them. I’m mostly using Free Code Camp, Code Cademy, and code school to learn for free. I also picked up a copy of Head First HTML 5 Programming, but haven’t used it much, yet.