squiltcodes

[squiltcodes]

Rebecca Purple

I came across a rather heartbreaking story related to web design when I was creating my HTML and CSS website.

As we know, you can enter hexcodes for colours you want to appear on your website in CSS, but you can also simply name colours and their different variants too.

One prenamed colour in particular has a really touching story behind it - Rebecca Purple. Rebecca Alison Meyer was the daughter of CSS pioneer Eric Meyer. Unfortunately, just 12 hours into her sixth birthday, Rebecca passed away from battling brain cancer.

Purple was Rebecca’s favourite colour, and so in her memory, if you enter ‘rebeccapurple’ or the hexcode #663399 into your CSS, you will end up with the shade of Purple above as a memorial to Meyer’s late daughter.

You can read more about the story behind rebeccapurple at medium.com in an article written by Victor Algaze.

[squiltcodes]

Having gotten familiar with freeCodeCamp over the duration of this course, and dabbling in and out of StackOverflow for the odd tip and trick, I realised there is one site I had completely forgotten about that I had actually used already on my coding journey.

CodeAcademy

Code Academy is a free-to-use (or paid if you want access to premium features) site that’s sole purpose is to teach people of all skill levels and backgrounds how to code. Whether that be with HTML, Javascript, or even Python, there are a variety of learning resources available.

I started using this website back at the very beginning of 2018 and I feel as though it has given me a strong basis of understanding for all the work we’re undertaking now. Although I hadn’t used the website since 2018, I still had a familiarity with the course content we’re covering now in 2020 because of the work I did back then. I would highly recommend it to anyone thinking of trying to improve their understanding of web development and coding, and I’m going to try get back into it myself.

[squiltcodes]

Riot Games: League of Legends | PROJECT: DISRUPTION

In this post I want to focus on my absolute favourite website, which you can watch a recording of above. Unfortunately the page is from 2016 and is no longer live (believe me, I’ve checked) but since this is a Web Authoring blog, I felt it was appropriate to discuss the website here.

BACKGROUND:

The PROJECT: DISRUPTION website was designed around the launch of a set of purchasable skins in League of Legends, one of the world’s most played online strategy games, created by Riot Games. The skins are designed to have a gritty, futuristic theme. They almost seem to take inspiration from the Blade Runner universe, which is best illustrated in a later advertisement that you can watch here.

THE WEBSITE

Riot created a breathtaking website to tease this skin line as well as market and launch it. The website was visually stunning and utilized shapes, colour and audio to convey a futuristic suspense that really drew players in for more. 

Not only was the website an amazing example of visual communication, but it was also an immaculate example of digital storytelling. Players were left snippets of information to enter into the website, such as the codes “UNITY”, “FREEDOM” and “AMBITION” that would unlock more details about certain skins. As time went on, the website eventually stopped teasing the skins and outlight showed them, but the journey it took players on before then left such an impression on me.

The above is a gif of what the website looked like once it had progressed past teasing the skins and showed them in fuller detail, and I actually recorded this myself because I was so impressed with this website a the time. 

CONCLUSION

Overall, I chose to feature this website here because it encompassed many elements of web design. While technically it astounded me, I was also in awe at how visually appealing it was, as well as enamoured in the story told by the website, and there are few websites out there that have left such a lasting impression on me.

[squiltcodes]

HTML Basics: A Summary

The past few weeks have offered a really exciting and eye-opening insight into coding, and HTML in particular.

I’d like to summarize some HTML basics on this post to show what I’ve learnt, as well as come back to this post as a reference if I ever forget anything! 

So! What does HTML stand for?

HTML stands for Hyper Text Markup Language, and is the standard markup language for creating Web pages.

What is a Document Type Declaration?

A Document Type Declaration declares the web language being used in the document so a computer can identify what it is trying to process. You should always start code with a document type declaration. This looks like this: <!DOCTYPE html>

Elements & Tags:

An element is a individual component of a HTML document, and it basically represents a meaning. A tag refers to the brackets in which an element is contained and allows for an element to open and close. An example of this is shown below:

Image Source: tutorialrepublic.com

Some of the most important elements to be aware of are: 

<html>: specifies the document is using HTML. You can also add the human language attribute here by adding to the element like so: <html lang=“en”>

<head>: contains metadata, which is information not displayed on the page.

<body>: contains content like text and images that is displayed on the page.

Lab Example:

This is an example of basic HTML code that shows doctype, elements, tags and structure/indentation from our first HTML lab. The structure and indentation is important for readability if you ever need to revisit your code or share it with other developers.

In this instance, <html> is the parent of <head>, and <title> is the child of <head>. Initially I wanted to add spaces in between each line thinking it would make it easier, but Gemma advised against this as it can become messy when there are thousands of lines of code!

Overall I feel as though I have a thorough understanding of HTML and how to structure it when working on future projects. Excited to delve into HTML more as well as learn about CSS and Javascript.

[squiltcodes]

This week’s lab provided us with our first hands-on experience with coding, HTML in particular. It was really exciting to apply everything we’ve been learning in class in practical exercises, and see the code we implemented show up in an actual browser, even if it wasn’t directly a live web page (for the time being!). The class broke out into mini groups and worked as teams to complete individual challenges. 

I had the pleasure of working with Paula, Marita and Linda, and it was genuinely so nice to actually get to speak to other students and colleagues for the first time since starting the course! Having to undergo an entire post-graduate course online (so far) has meant it’s difficult to get to know other people in the course, so it was a really pleasant experience to not only get to know them, but put our brains together to work on coursework and crack our first coding challenges.

I had set up my Tumblr, Stack Overflow and Free Code Camp accounts from the first lecture, but since then I have been getting more familiar with each platform and I’m really excited to see how different my capabilities will be at the end of the course compared to now having only used them for a brief amount of time. I feel as though I have a better appreciation for the work and skill that goes into designing beautiful websites now, and I hope that when I go to make my own website that I will draw inspiration from some beautiful websites I’ve seen that I will feature on this blog in due course.

[squiltcodes]

Introduction to Web Authoring: A Reflection of Week 1

Web Authoring was perhaps the module I had the most interest in, but was most intimidated by. I currently work in digital marketing, and I applied for the Post Graduate Diploma in Digital Interactive Media to develop my web-design skills, as I have a specific interest in UI/UX design. 

I believe this module will offer me the best insight into web-design and best practice around creating exciting, interactive and beautifully-designed websites. While the prospect of this is exciting, initially I was worried about this module as it felt like there was a lot resting on it career-wise.

Any worries I had about this module were immediately washed away after attending Gemma Deery’s first lecture on Saturday morning. Outlining the contents of the course, Gemma spoke with such enthusiasm and passion. It was really inspiring to see someone care so deeply about the subject they’re teaching and left me feeling confident in my ability to not only take on this module, but excel at it.

I have a clear understanding of the learning outcomes of this module now and what will be expected of me to achieve said learning outcomes. The prospect of understanding HTML and CSS and going so far as to design my own website is so exciting to me, and I can’t wait to see what lies ahead for the rest of the module!