#SYP2020: Coding Workshop.

SYP2020 Coding WorkshopDigital skills are so in demand in today’s job market and they really set you apart but it can be tough to know where to start! Our coding expert was Cat Dean, Web and Community Manager at Canongate Books. Cat works on all things digital there, including Canongate.tv.

Don’t be afraid!
Her advice was not to be afraid. You might not know how to do something when you get it, but you should feel confident and take your time to figure it out. Her aim for the day was to leave us all feeling interested and empowered, and she did just that!

Cat’s mum was at the forefront of digital typography and she told us a great story about her mum hiding a manual in her handbag to sneak into the toilet at work and read it when she got stuck. She felt inspired by her mum’s approach.

Cat said that digital skills teamed with an understanding of content and communication landed her the job at Canongate. They loved that someone had the combination of an English Literature degree and digital skills. The position was perfect for her too because she was really interested in blogging and the digital but also in writing.

Check out people’s code.
We started the workshop by talking about HTML. HTML stands for Hyper Text Mark-up Language. It’s not complicated programming and is easy to write and understand. HTML is interpreted by a browser to display content.

Cat advised looking at other people’s code by clicking view source on webpages. You can look at someone else’s solution and even copy parts, however, it’s best to do your own code.

Along with HTML, there’s also CSS (cascading style sheets) and Javascript. CSS is used to make things different sizes or colours. This used to be done in HTML but this meant if a client changed their mind about the colour of some text, changing it throughout the code was a big job. CSS makes it a lot easier. Javascript is being used when you hover over something and it changes colour on a web page.

HTML is made up of tags. There are two kinds of tags, <start>middle</end> vs </block>.

For example: <p>some text</p> vs <img/> <br/><hr/>.

Tag names are related to their purpose, img=image and p=paragraph.

Some tags used a lot are:

  • <body> Everything on the page
  • <head> Information about the page (doesn’t actually show)
  • <p> Paragraph
  • <a> Anchor link / hyper link
  • <h1><h6> Headings
  • <img> Image
  • <ul> Unordered list (ie bullets)
  • <ol> Ordered list (ie numbered)
  • <li> List items
  • <table> Tables
  • <tr><td> Table rows, table data
  • <div> Section
  • <strong> Bold
  • <i> Italic

Clean, readable code.
Sometimes you can add an attribute, which adds information to a tag. Some tags need attributes to work. For example <img/>.

The attribute would look like this <img src=“picture.jpg” alt=“Sunset”/>.

The source is telling it where to find the image you want.

Cat says we want to aim for clean readable code. Just one missing bracket can mess up a whole web page and it’s easier and quicker to solve problems if you have your code on different lines and indented.

Naming conventions are also key. HTML file names:

  • html NOT home.html
  • about-me.html NOT about me.html
  • breaking-news.html NOT breaking_news!!!.html
  • contact-us.html NOT Contact-Us.html

She advises that the best sites to further your knowledge are http://www.lynda.com and http://www.w3schools.com.

TW CODING.pngFor all updates and recaps from #SYP2020, click here.

Advertisements

3 thoughts on “#SYP2020: Coding Workshop.

  1. Pingback: #SYP2020: A Publishing Odyssey. – SYP Scotland

  2. Pingback: #SYP2020: Intellectual Property. | Reading between the Fonts

  3. Pingback: International Industry Notes: Beijing Book Fair, Japan's Mobile Games, Scotland's Indie Publishers - Publishing Perspectives

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s