Digital 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.
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
For all updates and recaps from #SYP2020, click here.