Maker Journal #1 – Tinker at Home

OVERVIEW

For my first Maker Journal, I chose Code Academy. My objective was to gain experience with the HTML (Hyper Text Markup Language) and CSS (Cascading Style Sheets) software development tools using the two segments offered shown thru Code Academy, see below:

Learn HTML (3 Hours)
Learn CSS (9 Hours)

HTML is a programming language that powers the web, which provides a means of communication to others in the form of webpages. Like any other language, once you master it, you can begin to create content, whether that is simple websites or more complex web applications. HTML provides the structure of the webpage, outlining the elements each webpage will contain.

CSS (Cascading Style Sheets) provides the layout and design of the webpages by providing functions to create visually engaging webpages.

GOALS

My goal with selecting this technology is to update my toolbox with more modern tool-sets and to consider as part of the Maker Journal how this tackles two of the four course outcomes:

Model innovation, iteration, and reflection through personal practice, and engagement with existing research.
Demonstrate the ability to use a variety of mediums and tools to engage and communicate with stakeholders.

MY EXPERIENCE

I started my professional career in state government as a programmer/analyst, using programming languages including, COBOL, Pascal, SQL, and UNIX scripting, to develop and support user data entry systems, reporting, etc. Additionally I designed and supported large enterprise databases including Oracle and SQL. My more recent experience (last 10 years) includes project management, team management, and strategic sourcing.

From my previous experience with programming languages, I know that each language has the following basics:

Guidelines for code structure, which includes functions, parameters, etc
Style guide that tells you in great detail how to indent your code, where to put spaces and braces, how to name stuff, how to comment and the good and bad practices.

At the start of this Maker Journal exercise, my expectation was that the initial two courses would provide this foundation using a descriptive narrative, examples and coding exercises.

LEARN HTML

This was the first of my two courses. The instruction provided deeper insight into HTML. The following provides the basic coding structure and a description of the usage:

The <!DOCTYPE HTML> declaration defines the document to be HTML, and aides browsers to display web pages correctl
The <html> element is the root element of an HTML page.
The <head> element contains meta-information about the document.
The <title> element specifies a title for the document.
The <body> element contains the visible page content.
The <h1> element defines a large heading.
The <p> element defines a paragraph.
The <br /> is a self-closing tag which provides a line break.

The following provides quick overview of the course content. These pages images are presented side by side on the screen, allowing the student to view the instruction descriptive narrative, coding area and result on the same screen. Formatting the images was difficult they do not allow print screens while using the tool, but I was able to snap a picture to show the pages.

CodeAcademy Screen Shot - Instruction Descriptive Narrative

CodeAcademy Screen Shot -Coding Area

CodeAcademy Screen Shot -Result

LEARN CSS

My second course, the instruction provided deeper insight into HTML and where CSS fits into website and webpage development.

As I mentioned in my overview, CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be displayed on screen, paper, or in other media. CSS can define the color, font-family, font-size, order, padding and margin, etc. Essentially, a single CSS can control the layout of single or multiple web pages.

CSS can be added to HTML elements in 3 ways:

Inline, using the style attribute in HTML elements.
Internal, using a <style> element in the <head> section.
External, using an external CSS file. Using this approach you can modify the look of the entire website through this one CSS file.

The most common way to add CSS, is to keep the styles in separate CSS files. However, the course used inline and internal styling, to demonstrate the association between HTML and CSS. I found this particularly helpful to be able to move between the HTML and CSS coding pages.

OVERALL EXPERIENCE

The tool, Code Academy;

My initial assumption at the start of this Maker Journal exercise was that the initial two courses would provide this foundation using a narrative, examples and coding exercises.

Post course instruction I found the first two units covered what I would expected for the initial module. My opinion of Code Academy has remained the same, I would strongly recommend this site and the training offered. They ease you into the technology, providing a quick start, foundational course, which allows you to get your feet wet and then for those more serious about learning the toolset they offer Codeacademy Pro Intensive program. The tool also provides ‘Stuck? Get a hint’ option and access to community forums.

The programming language, HTML;

HTML provides some similarities to previous coding languages I have used:

Ability to add history and comments which serve to document the program and remind programmers of complicated code or just why a change was introduced.

Provides a specific coding structure.

IO Modules (Input-Output Modules) provide a common program to read and write data and

Copybooks used by the IO Modules to outline the format for passing of data in one file

HTML however is different from COBOL or Pascal in that it is not compiled (translated) into a binary program for a computer to read and interpret. HTML is a markup language that uses declaratives (blocks, heading, etc) which are saved and executed in the browser. HTML used as intended essentially provides instructions to a browser on what to do with each part of the webpage for that job I found it easy to use and understand. What it does not do well is provide a common area to use repeatable code to, for example, allow you to focus on the look and feel of the website, this is where CSS comes in.

The programming language, CSS;

The CSS approach is very similar to options when programming using COBOL.

In COBOL; both of these options in COBOL create a one-stop place to modify code. What that means is it saves the programmer a lot of work when modifications are needed. If I need to modify how dates are edited or calculated, in COBOL you could use the copybook to handle how that is done once, instead of separately in each program. This ensures uniformity between programs and when a change is needed, we do it once not multiple times. Developing a consistent look to a webpage or site in one CSS, ensures that the look and feel is consistent (same font, color, etc.), and when it needs to change it is done in the single CSS not separately in the HTML programs.

Additionally, using CSS properly can’t help but speed up the webpage for the end-user, essentially because you are using less code so the pages load faster.

I would highly recommend this approach too anyone developing webpages.

CodeAcademy Screen Shot - Instruction Descriptive Narrative

CodeAcademy Screen Shot - Coding

CodeAcademy Screen Shot - Result

CONNECTION TO ESSENTIAL QUESTIONS

So, “How might we design learning to embrace principles of computational thinking?”, well three things come to mind concerning the learning to code approach:

First this approach to learning is more than just a textbook or test, computational thinking practices developed from writing and debugging programs (test, debug, revision; loop) instills a certain level of confidence. This was also described as a three-stage progression ‘Use-Modify-Create’ in What is Computational Thinking? , used to support students development of computational thinking
Secondly, although the learning is centered-around programming and debugging with this method, it also provides an opportunity to the student to become clear about problem solving strategies and more purposeful about improving them. Exploring Issues of Computational Thinking in Higher Education, “computational thinking enables individuals to become more efficient problem solvers by teaching them to recognize computable problems and approaching the problem-solving skillfully”.
Finally, it supports the ISTE NETS standard for students; they learn individual skills and collaborate, Bringing Computational Thinking to K-12 (article from ISTE

REFLECTION

My personal practice of learning to code, helped me better understand course outcome ‘model innovation, iteration and reflection’. The Learn HTML and Learn CSS courses reminded me that although languages may have different purpose, syntax and structure, their foundation is built upon what has worked in previous programming languages, at least the popular and most used. Although this is not a hard concept, I believe it helps to reinforce the concept from time to time, so that you might add the greater understanding to allow you to approach “problem-solving skillfully”.

Search This Blog

EDT 598-0990 Studio in Computing for Learning