In this lecture, you'll be given an overview of the course and its expectations. We'll briefly talk about the deliverables and exam format for the course. We'll also provide a very brief introduction to HTML syntax, structure and semantics, familiarise yourself with a platform where you can experiment with HTML, and start ideating design ideas for your first Major Web project.
HTML is the foundation of web development. It is an acronym for HyperText Markup Language. It is used to structure content on a webpage. What do we mean by content? Plain text, images, videos, links to other websites, etc. The structure gives content meaning by defining that content as, for example, headings, paragraphs, or images.
The most important thing to know is that the tags are used to structure content, or in other words: to decide how each part is organized in order to more easily understand what the page is trying to communicate.
It's useful to memorize this list, but don't feel like you have to learn and memorize every HTML tag. Once you understand the basics, you can easily look up which tag you need.
Semantic HTML are HTML tags that introduce meaning to the web page rather than just presentation. For example, a <p> tag indicates that the enclosed text is a paragraph. A <nav> tag indicates a navigation menu of some kind. Both examples show meaning and structure, in this way it's easier to understand for both the browser and the developer.
This leads to the following insight about writing code: while code is written to produce working software, it should also be written so other developers can easily read and understand it. You'll learn more about that later.
The Major Web Project requires you to design and implement a website and the best Web designs always start on paper. Wireframing allows you to design and ideate "the big picture" of your website without focussing too much on the details. Read more about the process of wireframing and why it's useful.
A fantastic (and fun) online code editor for learning HTML, CSS and JavaScript.
One of the best resources for learning Web development, the Mozilla Developer Network provides fantastic documentation for almost all aspects of the Modern Web. Best of all, it is completely free and available for all to use. Be sure to add this to your bookmarks!
- HTML article
- The Most Commonly Used HTML Tags
- Semantic HTML
- Intro to Wireframing
- Codepen
- MDN web docs
You can write code for the web in any application that allows you to write and save plain text files (such as Notepad or TextEdit). However a code editor is a tool specifically designed for editing code.
Depending on the the programming language, the code editor highlights special keywords, give suggestions for some extent, adds automatic indentation and sometimes has an integrated command line interface as well.
While your code editor does the basic job of allowing you to write code, it can always be improved to make our lives as programmers easier. Currently, Visual Studio Code is one of the top code editors on the market. There are many cool text editor options out there. However, if you're just getting started with, VSCode is what I reccomend for this course.
One of the nice things about VSCode is that we can add plugins to make our programming life much easier. Please install the following plugins as well and see for yourself.
For more specific information on how to setup your editor:
The Command Line interface (also known as CLI or shell) is a way to navigate through your computer's content (media, folders, applications, etc.) without a visual user interface. It allows you to type text commands to perform specific tasks. Since you can directly control the computer by typing, many tasks can be performed more quickly, and some tasks can be automated with special commands that loop through and perform the same action on many files.
As a beginning programmer it's important to get familiar with it, as it will teach you how computers work: As a tool that you give instructions to. This is not any different from programming for web development; but instead of writing instructions to the computer directly, you write instructions for browsers to execute.
For more information, check the following resources and code along: