Week 01: Webpage Design

Markdown Formatting

Photos: use the following format without the spaces

! [description] (link)

Links: use the following format without the spaces

[displayed description] (link)

Videos: use the following format without the spaces after the "<"

< video controls width="100%" > < source src="mp4" type="video/mp4"> </ video>

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

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

mkdocs.yml is the file that controls the website appearance in the mkdocs format. It is the file that reads your .md documents, and converts them to html. As it converts the document it formats it according to this mkdocs.yml. When I used html formatting I had to put the header and footer in every document.

to show the format of a code on my website in markdown format I use 3 backticks ``` followed by the name of the language the code is writen in yaml for the mkdocs.yml, and css for the html style.css document. At theend of the code close with three more back ticks. - this formatting is called a code fence. It was suggested by claude.ai when I asked it to check my files before I committed and pushed to gitLab. I did not add it until I asked later "what is a code fence." Now that I understand what it is I could add it to my documentation. It will be helpful in adding code in the future.

"nav" = navigation bar - each week I have to add the week, description, and path to the document so they show up on my website

"theme" = style choices for the website - this is where you change the colors and fonts - a favicon is the little symbol that shows up in internet tab next to your site's name - features are special design choices that you can use. I have navigation tabs on the side of the page, and I made them sticky so they are always there. I don't like to have to scroll all the way back to the top to navigate my website.

the markdown extensions and plugins were pulled from the template given by Fab Academy. I have not yet come across what they do. However, I did notice the plugin with the revision date is likely the code to add the last time the site was updated to the footer of the website.

This is what is in my mkdocs.yml as of 3/23/2026. It has the site author information first, and url to publish on.

site_name: Dorian Fritze - Fab Academy site_description: Fab Academy 2026 documentation site for Dorian Fritze site_author: Dorian Fritze copyright: Copyright 2026 Dorian Fritze - Creative Commons Attribution Non Commercial

site_url: https://fabacademy.org/2026/labs/charlotte/students/dorian-fritze/

nav: - Home: index.md - About: - About Me: about/index.md - Student Agreement: about/agreement.md - Assignments: - "Week 01 - Project Management": assignments/week01-project-management/week01.md - "Week 02 - CAD": assignments/week02-computer-aided-design/week02.md - "Week 03 - Computer-Controlled Cutting": assignments/week03-computer-controlled-cutting/week03.md - "Week 04 - Embedded Programming": assignments/week04-embedded-programming/week04.md - "Week 05 - 3D Scanning and Printing": assignments/week05-3d-scanning-and-printing/week05.md - "Week 06 - Electronics Design": assignments/week06-electronics-design/week06.md - "Week 07 - Computer-Controlled Machining": assignments/week07-computer-controlled-machining/week07.md - "Week 08 - Electronics Production": assignments/week08-electronics-production/week08.md - Final Project: - Overview: final-project/index.md

theme: name: material palette: primary: teal accent: deep purple font: text: Ubuntu code: Ubuntu Mono icon: logo: material/school favicon: images/favicon.svg features: - navigation.tabs - navigation.tabs.sticky - navigation.instant

plugins: - search - git-revision-date-localized: fallback_to_build_date: true enabled: !ENV [ENABLED_GIT_REVISION_DATE, False]

markdown_extensions: - attr_list - def_list - tables - md_in_html - admonition - pymdownx.highlight: guess_lang: false - pymdownx.superfences - pymdownx.tasklist: custom_checkbox: true - toc: permalink: true

1. HTML Codes

Videos: use the following format without the spaces after the "<" < video controls width="100%" > < source src="mp4" type="video/mp4"> </ video>

To change the style of your website in html, go to the style.css file. It has the codes for little style programs, like block coding, that you can use in your html documents.

body { font-family: sans-serif; margin: 0; }

.navbar { width: 100%; background-color: #f630f0; border-radius: 2px; }

.navbar-inner { max-width: 1280px; margin: 0 auto; padding: 10px 0; }

.navbar a { color: #f8f6f6; display: inline-block; font-size: 15px; padding: 10px; text-decoration: none; }

.navbar a:hover { color: #ffffff; }

.content { max-width: 1280px; margin: auto; padding-left: 10px; }

footer { font-size: 12px; color: #999; text-align: center; padding: 50px 0 30px 0; } footer p, footer a { font-size: 12px; color: #999; }

You can see above where I changed the navbar to be pink.

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.

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 website wouldn't load because it couldn't build my HTML files with mkdocs build. The pipeline failed because I had a pdf file, and a few movies accidentally added to the repo. It kept failing, because those files kept getting pulled back down from the online repo.