As a pupil of HTML and CSS

Learning coding is difficult!
Learning coding is difficult!

While Learning HTML and CSS, students definitely encounter a melange of issues and troubles.

One issue I’ve been running into while learning HTML is remembering the proper way to format link tags. Often I’ll write the first part of the tag, “ <a href=”http://www.google.com, ” but then forget to put in the closing quotation mark and/or bracket.

It’s taken me a couple days to recognize that everything after the opening " < a (href, etc.) "is actually part of the opening " < a > " tag, not separate. Instead of having simply "< a >", as I’ve been imagining it, there’s actually meant to be more in the tag.

Since I’ve been using the link tag a bit more frequently, I’ve gotten better at remembering to complete the tag as it’s meant to look, " < a href=”http://www.google.com" ".

Now whenever I want to insert a link, I tell myself to count for four brackets. If they’re all there, I’m good.

Learning HTML and CSS

At first you may think that coding is difficult and that it's for super-smart techies.

GIF of dark haired, glasses wearing "nerd."

Every character you type counts! Everything is important!

GIF of person typing on gray keyboard.

One little thing off and it can change an entire webpage. You must be meticulous.

GIF of little girl attempting to push over line of dominoes but only pushing over the first one.

However, once you get the hang of the format, you realize it's just the same formula with different inputs.

GIF of someone from "The Usual Suspects" dropping a full mug of coffee, from multiple angles.

Everything starts to clear in your mind and you get inspired.

GIF of Tom Hanks in "You've Got Mail" blowing on his fingers before hitting a keyboard button.

The possibilities are endless. Let the creativity flow.

GIF of animated, pixelated, rainbow-colored image dancing.

Not your average "Aunty"

Aunty Donna is an Australian-based sketch-comedy group. Joining YouTube in December of 2011, the channel boasts close to 114,000 followers, with over 13 million views.

The group consists of Mark Samual Bonanno, Broden Kelly, Zachary Ruane, Sam Lingham, Max Miller, and Tom Armstrong. Bonanno, Kelly, and Ruane write and act in the sketches, Lingham writes and directs, and Miller and Armstrong design and compose the music and sounds. Together the small team produces some powerfully funny videos.

The type of humor that Aunty Donna incorporates in their sketch videos exaggerates otherwise mundane and normal experiences. For example, the sketch comedy group explores the experience of checking out a pretty woman at a café. Normally, it would be a quick look and nod, but the three actors go off the deep end with how “sneaky” they are, ultimately being the most conspicuous people in the café.

While the channel has a mélange of sketch videos covering various topics, Aunty Donna’s most famous video, “Bikie Wars,” is a musical spoof of a famous Australian show by the same name, which is similar to Sons of Anarchy.

While the show Bikie Wars is a drama and very violent, the spoof satirizes the violence with a very childish, early ‘90s hip hop-style rap. As the description proves, the video provides a very “cheeky” outlook of the popular drama.

While internationally popular online, the troupe also performs around the world at shows. In 2012, their debut show, “Aunty Donna in Pantsuits,” was nominated for the Melbourne International Comedy Festival's Golden Gibbo Award, and their second show, “Aunty Donna and the Fax Machine Shop,” debuted at the 2012 Melbourne Fringe Festival and won the People's Choice Award.

In 2015, their self-titled live show toured around Australia at Adelaide Fringe Festival, Melbourne International Comedy Festival, and in Sydney as well as the UK in Dartmouth, Edinburgh, and in London at Soho Theatre.

Most recently in 2016, Aunty Donna created the original ten-part web series “1999” exclusively for YouTube with Screen Australia and Google’s Skip Ahead funding. The troupe also released an exclusive sketch-series, Trendy, for Comedy Central Australia.

Google's ebook revolution

While Google may account for the lowest percentage of purchased ebook sales, Google is dominating the ebook space because they have been one of the first companies to adapt to a changing market. Kindle sales have fallen because besides being able to store a book electronically, the actual experience of reading a Kindle ebook isn’t heightened enough to differentiate from a physical book. Google realizes that with the growing medium of online books, it’s important to redirect the experience to something drastically different from print, and something more tangible. Their team of designers, recently, have been working on turning their ebooks into interactive experiences. With he rest of google’s platforms, they have a lot of technology to leverage into making ebooks a much more intimate and hands-on experience. Many of their books are now a collaboration with Google Creative Labs in order to make books that couldn’t otherwise be printed into a physical copy.

The few books that have been created so far under this new design team are more of an app-book hybrid than of traditional e-book format. One of them is color-coded to help readers identify who is speaking and one uses interactive Google maps to take you through the spots the characters are visiting. Thus, the book physically leads you from point to point and allows you to jump back and forth between perspectives.

By moving into the sector of “electronic literature” Google is adapting their ebook library to be a completely different experience from picking up a book at your local Barnes and Noble.

65 percent of sales are still happening through Amazon Kindle sales; however, Google is the first company to really recreate the way we read and interact with e-books, which I think will help them rise in the ebook market substantially.

A visual and emotional map to coding

So you’ve decided to learn to code

You've read the blogs, you've done your research, and feel ready to get your knowledge on

You see pretty websites and solid user experiences in your future
But then you realize what this magical code looks like

And after you’re done crying and thinking about what you’ve gotten yourself into


You give yourself a pep-talk

And you start again

Only to discover that you actually don’t got it

So after you search Youtube, Google, and every fortune cookie you can find

You find the solution to actually make something work on your web page

So you think you’ve got this in the bag

Until you have to code the other 90 percent

Patience young grasshopper, Rome wasn’t built in a day and your website definitely won’t be

GIF-ing your way through HTML

When I found out I was going to code my own website:

When I saw some of what we would be doing:

When we started working and nothing made sense:

When I saw what it would look like on the web:

When I figured out my first mistake and corrected it on my own:

When something didn't work the way I thought it would:

When I kept messing things up:

When I spent a few hours learning more and starting to understand everything:

When I was still messing everything up:

When I would get one thing right, but everything else wrong:

When my website finally looked somewhat presentable:

When I found out there was an easier way to make a website:

#ShannonSolves: HTML/CSS issues

While learning HTML and CSS, I’ve realized how important it is to open and close inputs for the different formulas. For example, I’ve learned that when you don’t include the closing “/”, the entire code will not work. It’s very important to be concise and remember to close the formula. It’s quite tedious.

When learning how to embed links, it was really difficult for me to include the “<a” before the “href” and when I was learning the lesson, it took me about 15 minutes to realize that you don’t need an extra “<a” tag when including it in the reference.

Another difficulty I encountered was when I was writing unordered lists within ordered lists. It took me a minute to understand that, when nesting, the placement of “<ol / <ul" is vital for how you want the website to turn out.

Overall, the most difficult was remembering the entire outline and overview of how the coding form should look, beginning with "<!DOCTYPE: html>" and closing with "</html>."

Nooks and Crannies: A Brief History of the Nook

nook
The early to mid 2000s saw a wave of technological improvements and updates. The smartphone was introduced, along with tablets and multiple portable electronic devices, such as EBooks.

As Lady Gaga fans around the world sang along to “Bad Romance” in November of 2009, Barnes & Noble released its first Nook device for $259. The e-reader had an E Ink display with an LCD color screen. Barnes & Noble managed to attain over 1 million e-book titles within the Nook’s first year of release.

In late 2010, the book company released the Nook Color. On Christmas Day alone, over 1 million e-books were bought. A major innovation was that this new Nook could support apps as well as e-books. The Nook Color would eventually be declared Barnes & Noble’s most successful tablet, though multiple more versions would slowly be released over the next five years.

The Nook Simple Touch joined the family the following year, debuting a more minimalist design. Users were now able to to lend books to friends (though only once per title). Later the same year the Nook Tablet was introduced and it featured an increased memory, higher resolution, and CPU. Readers were also able to record their own voices on the tablet, allowing for playback while reading a story.

In 2012, the Nook Simple Touch really broke ground: the tablet’s entire screen was illuminated with a built-in light. Barnes & Noble had managed to acquire the adaptation from E Ink Holdings, as well as a contracted agreement disallowing the competition from using similar technology.

Later on that year the Nook HD and the Nook HD+ were released. Unfortunately, the prices for these two options were rather expensive when compared to other tablets: buyers could spend $269 on a Nook HD+, or they could spend about $100 more for an iPad and everything that came with it.

Barnes & Nobles partnered with Samsung in 2014. With the partnership came the Samsung Galaxy Tab 4 Nook; it has the same specifications as Samsung’s Galaxy Tab 4 10.1.

Since 2015, five more Nook tablets have been released.

The Nook has not been the most successful e-reader, partly because Barnes & Noble focused heavily on the US market, as opposed to other companies who pushed their similar products in international markets as well. In 2014, Barnes & Noble also began preventing users from downloading e-books they had purchased from the Nook store, in order to stop encryption stripping or reading books on third-party apps. Compared to a year and a half ago, Nook sales have fallen over 22 percent. Kindle and iPad tablets have been steadily gaining popularity, in part because they offer more possibilities of use compared to the Nook.

HTML and Russian nesting dolls

So, HTML is hard. It’s like learning a new language, and while you don’t have to figure out how to ask where the bathroom is, it is crucial to figure out a million other little things that don’t really apply in english or french or Swahili . And since I might be the actual worst person at HTML that there ever was, I think that makes me the authority to help anyone else out there who might be struggling. Right?

Because sometimes we need people to explain things to us on an elementary level but we are too afraid to ask. Conveniently, and for the greater good of the coding public, I have no shame, so I am taking one for the team and myself in this guide on nesting.

I don’t even know if that is the official term for it, but I like visuals and Russian nesting dolls will be assisting me in this breakdown of coding language.

The biggest problem I have run into so far on my journey to HTML proficiency is trying to figure out where everything goes.

So I am going to use Sheila the Russian nesting doll to explain.

So the biggest doll, the one that holds all the other little dolls is the main part of that section of code. I know that made no sense, so for example:

<body>

<nav>

<ul>

<li><a href="">Resume</a></li>

<li><a href="">Clips</a></li>

<li><a href="">Contact</a></li>

</ul>

</nav>

In this string of code

<body> is the biggest Russian nesting doll because it holds all of the information encased in the space underneath of it.

The next-sized Sheila would then be the <nav> bar because it sits inside something bigger called the <body>

Inside of second sheila is an <ul> and so on until we get all the way down to the tiniest part of the strong, the individual list items, and we close it all up.

Everything in that string of code builds on one another to form a whole. The list items make up the unordered list, which comprises the navigation bar, which all fit inside the largest container that is the body.

Make sense? If not, google it, because that’s all I’ve got.

How to hype an article

E-Book app recommendations

In the article, “Customizable e-book recs on the opening screen of your e-book app?” on Teleread, Joe Wikert discusses the usability of e-book apps and why having tailored reccomendations for readers is a much better way of keeping readers hooked than what they are doing now.

The following posts would be ample in drawing attention to the article.

Tweets:

Each tweet should include a link to the article.

"Why haven’t the e-reading apps given us recommendations for books?"

"Ever feel like you’re not up to date on the latest published books? Our ideas on how e-reading apps can change this:"

"Shouldn’t we be able to see what our friends are reading? Say goodbye to book clubs and hello to in-app recommendations and discussions."

Instagram:

In the comment on the photo, each will have a link to the article.

A picture of a stack of books, and a tidy e-reader screen with the caption: "deciding which book to read next shouldn’t be a heavy task."

A picture of a chat in an e-reading app asking “what’s a good new fantasy book out?” and then the “…” reply screen from the friend, with the caption: "your friends know what you like, they should be able to tell you."

A video of someone scrolling through a list of upcoming publication dates for new book releases with the caption: "Keeping up to date on your favorite books should be as easy as scrolling through Instagram."

Facebook:

A post with a link to the article, a small blurb, and a picture of a tablet open to an e-book app.

A post opening a discussion in the comments about the availability and accuracy of book recommendations within e-book apps.

A link to a survey about which book to read next (for interactive media) and then a question about how much nicer it would be to have these in e-book apps.

Refinery29's growth and usability

I read Refinery29 pretty religiously, and since it was one of the first online magazine/blog hybrids to be pretty successful, I thought it would be interesting to check out where it all began. In my search I found that the first iteration of the site popped up in 2005. With a map of a warehouse cascading over the top search bar, I thought maybe another company had initially owned the ip address. A little more time on the site revealed that what I know and love to be RF29 now, started well ahead of its time as a compiled city guide for New York, with the best individual boutiques and shops curated by the site. So the initial purpose was only for discoveries within the NY area. The original logo was made of big blocked letters assembled into a warehouse looking shape. It didn't scream their aesthetic to me, at all. The original site was organized very much like a traditional blog—with a lot of information, side panels, and kind of modularly messy, if that makes sense. There were too many places to look and all the information was fighting for attention, cramped on the page. Other than the elaborate and interactive map of the "refinery" the page was pretty bare and unimaginative. The only colors appear to be dusty pastels, nothing like the bold colors that match the brand's voice today. A huge reason the page is so empty is likely due to the fact that there are zero advertisements.

The newer version is a lot easier to jump between and locate the most important content;however, the very first thing you see as the top of the site is a banner ad for Maybelline (or whatever ad they are featuring that day). But now on the side, every space, even the white space, is all purposeful and accounted for. Everything is operating on a grid system, with the most current, or biggest stories, chunked at the top. The website's navigation is much clearer. You can scroll down the feed to select articles by clicking on an image, or you have the option to use the search bar or banner categories to do a little exploring. The categories are also pretty in-depth; There are eight main sections and then each of those is broken down further into as many as eight additional sub-categories. Refinery is an incredibly visual site, there is not one piece of content that doesn't have an equally important visual attached to it. As far as ad integration, there are only two main ads per page, usually for the same company, running along the top and sidebar of the page. They are definitely noticeable but don't bog down the feed too harshly.

For mobile, this site gets an A plus. They understand that most of their readership, like me, skims the site from their phone, whether that's through an article directly opened from the email roundups they send, or if it's from a link shared on twitter. The mobile site has the same crisp organization and layout, plus they have an app for a heightened mobile experience. The website appears to cover several aspects of accessibility requirements. They have in-depth labels of all sections, making it easy to read and locate titles. They have dropped the ball on alt image tags, with only some of the images on each page being properly labeled.

There is a comment section available for each article but users must log in to have access to the comment box themselves. This is always at the bottom of every article or site page and feels pretty removed from the rest of the encompassed visual elements. Below each comment tab there is another slew of articles for you to jump over to next.