Quick reference

In this course, we cover a small selection of foundational concepts that you need to know about if you’re going to work on digital projects as a publishing professional. Naturally there is much more to discover! Even the most advanced editors and developers spend much of their time every day searching online, and looking up how to perform simple tasks.

You only need to know enough to be able to search for what you need, when you need it. This is simply a matter of growing your technical vocabulary.

Here is a (deliberately) short list of concepts to start out with.

Languages

HTML: A language for marking up content so that web browsers can lay it out in web pages. It’s made of tags in elbow brackets, which carry information about the document. That information is stored in the tags themselves as attributes, and by wrapping sections of text between opening and closing tags.
CSS: A language for describing what HTML elements should look like when rendered by a web browser. It’s made of rules, which each comprise selectors (a reference to specific HTML elements) and a series of style properties (such as ‘font-family’).
Markdown: A syntax for writing in plain text that a markdown processor can turn into HTML. A very quick way for humans to create simple HTML.
Javascript: A language for writing instructions to a web browser. These instructions can change the HTML and CSS on a page, and can include complex logic and interaction with users and other web servers.

Concepts

UI, UX and user patterns

A user interface (UI) is the layout of a given website. The user experience (UX) describes the whole experience of using a given website. And user patterns are the common ways that users expect to use websites. For instance, users expect login and logout buttons to be in the top right.

Personae

Personae are fictional users of a website, with rich descriptions of their lives and priorities. They are our ideal users, whose needs come before all other considerations. Personae are created at the beginning of planning a new digital project.

Accessibility

Accessibility has many specific meanings, which all refer to ways of increasing access to content, especially for those whose needs are often neglected. In web design, accessibility usually refers to technological techniques that make it easier for people with disabilities to use a website, such as carefully constructed HTML, high-contrast colours, and keyboard shortcuts.

Security awareness

It is critical to develop a good awareness of security issues in tech. These include:

personal security (such as using a password manager and two-step verification everywhere, and being aware of large data breaches)
project security (such as ensuring all websites are served over secure HTTPS, and updating software regularly with security updates)
ecosystem security (such as chip vulnerabilities and cyber warfare).

Shortcut keys

If you’re able, using your keyboard rather than your mouse wherever possible is fundamental to working efficiently on digital projects. It is important to constantly learn and refine your personal-efficiency toolkit, much of which involves learning and creating shortcut keys.

Software

Command line: Generally known as Terminal on Mac and Linux and the Command Prompt on Windows, the command line is the instant-messenger app for talking to your computer. It is critical to become comfortable with using the command line for basic tasks, starting with navigating into and out of folders with the cd and cd .. commands.
Git: The most common software for version control on digital projects. Git lets each contributor work on their own copies of a project repository, and to merge their work into a single, common source of truth. Using Git involves taking snapshots of your project called commits, and pushing those commits to a shared repository online.
Text editors: Also called code editors, text editors are programs that make it faster and easier to write in technical syntaxes, such as markdown, HTML, CSS, and Javascript. They are highly customisable. Over time, you will bond with your text editor, customising it to suit your needs, and making you more productive. Popular free text editors include VS Code, Sublime Text, Atom and Brackets.

Infrastructure

Web servers: Websites are made of files that are stored on a web server. Those files might be finished HTML, CSS and Javascript files, or the server might run software that assembles those files for users on the fly. Your browser connects to the web server via your ISP and a network of domain name servers (DNS). Each web server has a unique IP address (‘Internet protocol address’). The top domain-name servers know the IP address for every domain name. So when your browser wants ‘electricbookworks.com’, they connect it to the server that has IP address ‘41.203.18.37’.
APIs: An API (‘application programming interface’) is a set of instructions for getting information from a server. It’s like a restaurant menu: a list of things you can order, and the names to order them by. Developers write scripts that can get data from others’ servers using their API.

Resources

Stack Exchange: A family of website forums for asking and answering technical questions. The biggest Stack Exchange forum is Stack Overflow, where people ask and answer programming questions. There are also fora for computer tips (Super User), Graphic Design, Ebooks and more. On Stack Exchange websites you earn points for participating, and as you earn points you get new privileges. Stack Exchange’s clever incentives system has led to an extraordinarily valuable resource for technical knowledge.
MDN: MDN (Mozilla Developer Network) is widely regarded as the authority for reading up on web standards. Need to know exactly how a CSS property works? What goes into an HTML meta tag? MDN is the authority. Another site, W3Schools, is actually easier to read, but many technical folk reckon MDN is more accurate and trustworthy.
CSS Tricks: The CSS Tricks website is a wonderful resource for learning about CSS. If you’re searching for how to do something and a CSS Tricks article comes up, you can rely on it. It’s run by Chris Coyier, who also presents a geeky podcast called Shop Talk Show.
A List Apart: A List Apart publishes long, crafted, useful articles on web development. It’s worth subscribing to their weekly email digest.
Smashing Magazine: Smashing Magazine is another excellent resource for well-written articles on web development.

Services

GitHub: GitHub is a website that vast numbers of people and organisations use to store and share code and plain-text content. Everything is stored and managed using Git, the version-control software, so repositories on GitHub are often the original, source-of-truth repositories for projects. GitHub repositories can be public, so that anyone can see their contents, or private, so that only your team members know they exist. Alternatives to GitHub include GitLab and Bitbucket, and self-hosting with Gitea. It’s possible to use all of them for free, and paying gets you extra functionality.
Google Docs, Sheets, Slides: Google offers the most popular service for creating documents, spreadsheets and slide presentations online. Collaboration features, version history, and APIs make these services far more useful than Word, Excel and Powerpoint. If you prefer not to use Google (which collects and may abuse vast amounts of data about its users), there are good alternatives, including Microsoft Office Online, Zoho, OnlyOffice, Authorea, Bit.ai, Dropbox Paper, Etherpad, and Nuclino.