At The End Of Basic Front-End Dev Projects: My Current Issues w/FreeCodeCamp

Up until last week, FreeCodeCamp had been like a dream come true. It had brilliant small, measurable and achievable goals in order to help keep momentum in programming learning, even if you only had the energy for the smallest commitment in the day. It reminded me of the feeling I got when I very first coded with Codecademy: how simple it was to begin, as well as continue, straight from the homepage.

However, I have come to the end of the "Basic Front-End Development" block... And I've reached a sudden roadblock. Technically, yes, we should know everything we have been taught up to that point. I have a reasonable idea of how to use <div>'s and <div class>'s in order to group elements together. I even figured out, through my own research, the one thing I had always wondered... How to create a neat menu along the top, that also follows you as you scroll the page (it turns out it's just an unordered list, with some extra CSS!).

However, the biggest stumbling block was creating my own portfolio page. The "Tribute" project was much easier, as it was easy enough to create an "Ironic" page that incorporated the lyrics of Tenacious D's tribute. I found I completed a rudimentary page pretty quickly on my first attempt, without looking anything up.

Then I got to the Portfolio project. And, I put my hands up (as I increasingly regularly do): the biggest obstacle to my learning is that I am a top-tier perfectionist. If I know exactly what I want, I'll end up creating ridiculous amounts of work for myself to incorporate even the smallest, unimportant element... Even if it means I make no progress with the actual page.

This can be a helpful and important skill; as I mentioned, I have now learned something about creating navigation bars which, even weeks after first learning it, hasn't left me. The problem came when I really wanted that bar to contain a "now playing" section, displaying my currently playing Last.FM track.

In a nutshell, the biggest problem in creating a portfolio for myself is my own ridiculous set of standards. The task was significantly easier when I forced myself into the easier task of emulating my brother's stylish website... But even then, I came up with problems like trying to get a navigation bar centred, and the problems that developed with page colouring when I attempted that.

More than that, I feel as if FreeCodeCamp went from being a course that was very easy to follow, with gamification seemingly ingrained into its soul, to a task where I was suddenly thrown at the deep end. Again, technically this is stuff I have just been taught. But I feel the course could have benefited from another guided example for creating an entire web page within its learning environment (maybe with fewer hints and cues) before asking us to create our own site.

The thing is... I do have a rudimentary Portfolio page created from this as well. And I have made the decision just to submit it; as I know doing so will get me out of this rut, and looking at the continuing course, it goes back to the format of small, achievable tasks.  I intend to go back and improve it as I become more knowledgeable, as well as e-mail/submit this in some way to help improve the course (hell, I would even be willing to help create the learning materials for it).

Anyway, here I present https://glitchwalker.github.io (oh, yeah, I used GitHub instead of the site they suggested; as I already have it set up to update game mod projects, and I preferred the workflow of having the entire site working and editable on my own computer already).

Free Code Camp is free to use and is available at https://www.freecodecamp.org. The learning materials are also open source, and free to use within any setting.

Free Code Camp Is Like The Codacademy I Used To Remember

I have no idea why I didn't use this sooner; I had been subscribed to the FreeCodeCamp Blog for a few months now, as it had lots of little bits of coding news and things like that. I honestly thought it was solely a blog with new ideas on, and maybe a little side community!

However, the main FreeCodeCamp itself is made up of it's free main web design "certification" course, alongside local communities and a scheme in which you can contribute coding to non-profits later on in said course. I nags you once for a donation, near the beginning of the course itself, and that's it.

And I have to say I am impressed. It reminds me of the old design of Codecademy, which would encourage you to start learning from the homepage itself. Although FCC isn't quite from the homepage (there are a couple of pages of logging in and introduction to the site itself), the barriers between the homepage and learning are very small, and you start earning challenge points from your first log in.

This challenge point thing is the one idea that keeps me coming back to FCC at the moment... Each goal is incredibly small, maybe change a piece of code here or there (based on a similar example in the learning materials)... So it's very quick to delve in and start learning, even if there has been some time between learning sessions. This has the effect of making it much more likely you will return to it, and means you're also likely to learn for much longer. This is the kind of concept I hadn't quite been able to find up to now... But FreeCodeCamp definitely ticks the boxes for accessibility and ease of use.

Python App 2: A simple RPG

Astonishingly enough, I kept to my word. I spent some more time on the beginner to advanced Python course at Stackskills, learnt some "advanced techniques", and am now on the second project. As my title indeed suggests, its aim is to create a simple text-based RPG. The code I'm working on is of course available at my Github page although be warned that for the time being it simply includes some of the character set-up code.

I have also spent some time sprucing up the Blog, seeing as it was based on code some seven years old. First I reset to the default dynamic theme- which still looks, surprisingly,  modern. My next step is to add silly little features like a Last.fm "Now Playing" widget if I am listening to music, and to add back some colour to the defaults. Gone is the snot green- I'm likely to go with either purple or red. I've also changed the font to the beautiful and easier to read Fira Sans, based on the Firefox logo font and also used in the short-lived Firefox OS.

So We Meet Again, Mr Tag

Some CSS, An Image I Thought I'd Add Even Though I Don't (Yet) Understand It. Image via Wikipedia

The following are the notes I collected in my notebook for the corresponding P2PU task. My original intention was to provide a few images of my work as well, but after it started spanning 5 or more pages in this small notebook I decided it'd be better if I didn't!

Anyway, here goes...


<DIV>

Used to group elements into blocks for styling purposes.


<BLOCK QUOTE>

Used for large quotes that may need indentation based on the style (although the style doesn't HAVE to indent it, but it'd make sense to). Use CITE to provide a URL citation. e.g:

<blockquote cite="http://gwattsdesign.blogspotcom>Loads more text would usually go here, say a paragraph or a few lines, but because I am just giving an example there is no need for me to randomly write that much off the top of my head</blockquote>

<P>

Represents a paragraph. It is used to "block" text together, and this is the most used block-level element.

<OL>

Creates an ordered list. (Can be preceded by numbering or any other character or image defined in CSS). e.g:

<ol>
   <li>line/item 1</li>
   <li>line/item2</li>
</ol>

<UL>

Similar to <ol>, bu creates a list with no numerical ordering, but just bullet points (or whatever is defined in CSS) e.g:

<ul>
   <li>line/item</li>
   <li>another line/item</li>
</ul>

<LI>

Stands for List Item. Should only be used in a list with <ol> or <ul>

<NAV>

Navigation element; contains links used to navigate the website. e.g:

<nav>
   <ul>
      <li>Home</li>
      <li>Away</li>
      <li>About</li>
      <li>Links</li>
   </ul>
</nav>

<MENU>

Creates an unordered list. The difference is whereas <ul> solely displays items, <menu> acts as an interactive menu with items that are activated or interactive in some way (like in a window's menubar). It can also contain nested <menu>'s, or menus within menus (which presumably would display on mouse-over). e.g.:

<menu type="toolbar">
   <li>
      <menu label="file">
         <button type="button" onclick="new()">New...</button>
         <button type="button" onclick="save()">Save...</button>
      </menu>
   </li>
   <li>
      <menu label="empty">
      </menu>
   </li>
</menu>

<SPAN>

Used for styling purposes. Similar to <div>, but is used in-line within a block, rather than acting as a block itself. (A little like when you put text in italics or bold in word processing, it doesn't necessarily act on the whole block/paragraph but only on a word, a few words or a line...?) e.g.:

<p>this <span>here</span> has just used the span tag</p>

<TIME>

Represents the time and/or date of an event, whether external (like a concert) or part of the website (like the creation of an article, or update of a page). It doesn't magically do anything on its own, but it is machine readable (using, for example, something like Google Calendar or a Feed Reader) so an application can use the date to update a calendar or order news stories. Information can be internal to the tag, or surrounded by the tag, depending on whether you want to the user to see the extra information or not respectively as part of the page.  e.g.:

<p>Let's meet up at <time>19:00</time>
<article>
   <p>This here article was made on <time pubdate>2011-01-02</time></p>
</article>
<p>The comedy show took place on <time datetime="2001-05-15 17:00">May 15 2001</time>
<Q>
Indicates the included text is a quote. e.g.
<p>Gary said <q>Gee whiz, that is so funny!</q>.</p>

<IMG>

Represents an image. e.g.:

<img src="a_pic.png" height="800" width="600" alt="What a pic!/>

Based on the P2P University activity at  http://p2pu.org/en/groups/webmaking-101-html-hunting-in-the-world-around-you/content/some-tags-for-you-to-meet/

Related articles

• HTML5 context menus in Firefox (Screencast and Code) (hacks.mozilla.org)
• [How To] Enable Ubuntu's Global Menu in Xubuntu 11.10 (omgubuntu.co.uk)
• Why Good Website Navigation Is Important ? (olgalf.wordpress.com)

A New Blog, An New Attempt At Design

While watching the events surrounding the SOPA bill, and wanting to get into political blogging of some kind, I decided to create a new blog.

Not one to be a bit un-controversial, I decided to create a logo and caption based on that of the Green Party and the Pirate Party, as they are both parties I support and as I believe they are both compatible to create a kind of mega eco-tech-savvy chimera of some kind.

Anyway, there are my results. I will be getting back into the HTML course shortly as well.

Related articles

• We are still against SOPA/PIPA (plus best practices on marking CC-licensed works) (creativecommons.org)
• Green Party calls for sustainable economics that puts society, democracy and jobs first. (greenparty.org.uk)

About me. Creativity. And... Stuff.

Hi all, this is the first of what I hope will be a huge number of amazing adventures we shall embark on, into the world of super amazing and definitely not geeky HTML and Design. First about me.

I’m a 20-something armchair eco-warrior, although in my head I’m still 15, and I hark from the City of Lincoln in that small island known at the United Kingdom. I had been diagnosed with the affliction of Bipolar, which means I am regularly dogged by very low depressions and occasionally very high periods of productivity and creativity which are fun but ultimately unsustainable and usually end up in causing many problems. However my aim is to cease being dictated to by my label and instead try and use some of that energy for good. Sometimes failing. Although I have been on national radio talking about mental health and the like, as well as affecting national policy on mental health problems, so have been successful in some senses. It’s just a shame that, at present, I have very little paid work!!

I have a lot of piecemeal knowledge on HTML and graphics design I learnt by doing at school, and also picked up a lot of design skills in college and university. My reasons for joining the P2PU webcraft school was in the hope that I can put all this knowledge together and do what I do best, which is creating things. If I could make a tiny living from the work I do, then that would be so much better too. I also agree with the open source ethos of free ideas being shared for free. On a more technical side I am interested in trying to create everything I do using open source software, and have restricted my web design to Ubuntu (or the Linux Mint flavour, to be exact) to try and force me to learn how to use the very much comparable free software.

Related articles

• What Projects Can You Setup in School of Webcraft? (pippabuchanan.com)
• School of Webcraft Update May 24th 2011 (pippabuchanan.com)
• Six Free Software Packages to Load on Your New PC (pcworld.com)