Skip to content

HTML and CSS 1

What is HTML?

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. In this course we will cover HTML and CSS.

  • HTML stands for Hyper Text Markup Language
  • HTML describes the structure of Web pages using markup
  • HTML elements are the building blocks of HTML pages
  • HTML elements are represented by tags
  • HTML tags label pieces of content such as heading, paragraph, image, and so on
  • Browsers do not display the HTML tags, but use them to render the content of the page

The basics of HTML Elements are covered on this W3Schools page. Here are some HTML tags, attributes and an HTML Glossary. For a more fun take, there is a Periodic Table of HTML Elements.

What is HTML? A helpful video series from Jen Simmons.

Mozilla Developer Network

This is a very good, peer-reviewed and open-source collection of web knowledge that is well-organized and accessible for beginners. It also contains deeper documentation that experienced developers consult all the time. Excellent starting points:

What is a Text Editor?

The formal definition is: “A text editor is a type of program used for editing plain text files.” Essentially, a text editor is a program on your computer that allows you to create and edit a range of programming language files. This is the place where you write your code. Text editors handle “hand coding” many different languages, i.e.: HTML, CSS, JavaScript, PHP, Ruby, Python, and so forth.

In our classes, we use:

  • The Atom Text Editor, which can be downloaded for free at atom.io;
  • Or Notepad++, a simple text editor for Windows only, which can be downloaded from the Notepad++ site.

File and Folder Structure Basics

Where should your website live on your computer and what is the basic structure of the Index.html page on a website?

Command Line Basics

Chrome DevTools for Beginners

DevTools for Beginners teaches you the fundamentals of web development as well as the basics of DevTools. Check out Get started below if you’d prefer tutorials that focus on DevTools.

FreeCodeCamp

If you are self-motivated and like working through lessons on your own, this is a great, FREE option to complete exercises that will grow your skills. You will be able to keep track of your progress and connect with other learners around the world if you want to. https://freecodecamp.org

Semantic HTML and alternatives to using the <div> tag

7 Alternatives to the <div> HTML Tag

  • The Main Element
  • The Section Element
  • The Aside Element
  • The Article Element
  • The Blockquote Element
  • The Nav Element
  • The Footer Element

Units of Measurement

  • Understanding CSS Units: The units in which length is measured can be either absolute such as pixels, points and so on, or relative such as percentages (%) and em units.
  • CSS values and units: Every property used in CSS has a value or set of values that are allowed for that property. 

neocities hosting

Build a simple site with free hosting at Neocities. Their free service offers 1 GB of storage space and no server-side scripting. The service’s expressed goal is to revive the support of “creativity and free expression” provided by GeoCities before it was shutdown in the United States of America and Japan in 2009 and 2019, respectively.

Codepen

This is an incredibly helpful tool. Play around here to get a feel for it, but I recommend signing up for a free account. It is similar to FreeCodeCamp in that it features an editor pane along with an output pane that renders the HTML/CSS as you input it. But this is more of a sandbox. Watch this short tutorial video: An In-Depth Introduction to CodePen for Beginners

JS Bin

A more accessible, screen reader friendly alternative to CodePen is JS Bin. Like CodePen, it is a tool that enables users to learn, experiment and teach using web technologies. There are a lot of features inside of JS Bin. The aim of JS Bin’s creators is for it to be part of a user’s tool chain to help solve problems, explore technology, and teach others.

Official WC3 Validator for HTML and CSS

HTML and CSS that you write should be “valid” which means there are no typos or mistakes — it conforms to the standards agreed upon by the WC3. You can use this online tool to validate your documents.

Most Web documents are written using markup languages, such as HTML. These languages are defined by technical specifications, which usually include a machine-readable formal grammar (and vocabulary). The act of checking a document against these constraints is called validation, and this is what the Markup Validator does.

Block vs Inline Elements

From this page: One major concept to grasp in HTML is the difference between block elements and inline elements. Block elements are those that take up the full width available on a web page, effectively blocking out any other elements from sitting next to it on the left or right. Inline elements are those who only take up as much width as is needed to display the contents of the element, thereby allowing other elements to be in line with the inline element. More here: HTML Blocks

Placeholder Text and Images

Sometimes you’ll want to build out a template for a new site but not have all of the content ready. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. There are a number of free lorem ipsum generators available. Below are a few:

Internet History

The internet has become a vital part of the modern world, inseparable from daily life and routines. It wasn’t always this way though; the history of the internet started somewhere. From simple computer networks to global interconnectivity and instantaneous wireless communications, the rapid and dramatic evolution of the internet can help with understanding the changing nature of technology and communications.