Skip to content

Week 01: Webpage Design

1. HTML Codes

Photos: (no spaces) ! [description] (link)

Links: (no spaces) [displayed description] (link)

Videos: (without a space after the "<") < video controls width="100%" > < source src="mp4" type="video/mp4"> </ video>

Document Structure

Headings

Divisions & Selections

Text Formatting

Comments & Special Characters

Lists

Links & Images

Media

Tables

Example Tables

Forms

Complete Example 1/2

Complete Example 2/2

Markdown Cheatsheet

This cheatsheet was given to our class by Dr. Taylor.

Markdown 1

Markdown 2

Markdown 3

Markdown 4

Markdown 5

Find out how to change website settings with MKDocs Materials here: MkDocs Material Setup

Problems

  1. Why can I type the same code and get different results? In this image you will see my code for inserting the 10 min Blender Cat. I changed the alt name of the top code right before taking the screen shot, but it showed the image when they were both named the same.

Same code, different results

I had the little image symbol show up before when I was linking a document that was not an acceptable image. A pdf or heic.

  1. My site was broken because I had been writing raw HTML files, but the GitLab CI pipeline expects an MkDocs-based site. The pipeline kept failing because it couldn't build my HTML files with mkdocs build.