The Basic Webpage Setup project is designed to provide a comprehensive guide for beginners in web development, focusing on creating a simple webpage from scratch. Developed as a practice exercise for writing thorough and user-friendly documentation using Markdown and MkDocs.
This guide provides step-by-step instructions for creating a simple personal webpage using Visual Studio Code (VS Code), covering the basics of web development with HTML and CSS. It's designed for individuals with basic computer skills who are new to web development and want to create their webpage. The guide includes details on necessary software, project structure setup, writing HTML and CSS code, and conventions used throughout the guide.
In each step of our guide, there are code snippets, examples, notes, and success indicators to aid in understanding and completing the tasks.
- Clone this repository using VS Code
- Set up MKDocs from the Installation page or by following the steps outlined in this video
- Execute the command
mkdocs serveto run the website locally Ctrl + clickfor Windows, andCmd + clickfor mac on the link that was generated
Click Here to visit the full documentation.
Use the left navbar to choose a section to jump to, or scroll to the bottom of the page for a link to the next step. This guide is divided into 4 main sections:
This section covers the basics of web development using HTML and CSS, catering to individuals with basic levels of computer skills and no prior knowledge of web development.
The section outlines the tasks the user will do and introduces conventions used throughout the guide.
This section provides a detailed guide on setting up a basic webpage project using Visual Studio Code. It covers creating a folder structure, adding HTML and CSS files, linking them together, and verifying the setup by previewing the webpage in a browser.
This section guides you through adding content to your webpage using HTML. It includes instructions for reverting changes made in the previous section, then walks you through building your webpage step by step. The user will learn to add headings, paragraphs, unordered lists, and clickable links. By the end, you'll have structured your webpage's content efficiently with <div> tags and created a clickable link to another website.
This section guides you through styling the content of your webpage using CSS selectors and classes. It starts by explaining how to style elements using type selectors, targeting all list items in an unordered list. Then, it demonstrates styling multiple elements using classes, creating a reusable style for headings.
By the end of this section, you will have successfully applied styles to your webpage, including changing the color and decoration of list items and adding background color, padding, and border to a div element.
We used markdown, python, css and yaml in this project.
We wrote our comprehensive documentation and README files leveraging VS Code’s Markdown renderer and previewer.
We also heavily used VS Code's GitLens extension to streamline version control, enabling us to track changes, collaborate effectively with so many concurrent git commits on the same files.
We used Material for MKDocs as the foundation of our project. This tool enabled us to easily add features and integrate style choices into our documentation website. With MKDocs, we could write content in Markdown format and convert it into a static website with essential features like a table of contents, navigation menus, informative admonitions, and a troubleshooting guide.
MKDocs' support for various themes and extensions that are configurable using a .yaml file, which allowed us to make the guide that much more easy to use!
We divided our tasks according to individual strengths- Daylen worked on more technical writing side of the tasks, and Jasper worked on more front-end development aspect of the project.
We regularly conducted in-person and virtual meetings to review each other's work, offer feedback during our code reviews. We used Trello, Zoom, and Discord to communicate frequently and efficiently, ensuring our tasks were completed ahead of time.
Also, with help from our cohort at BCIT, we conducted user testing sessions which allowed us to validate the user experience of the guide and refine our style choices.
I am an enthusiastic and passionate developer currently studying at the British Columbia Institute of Technology. One of my standout projects so far has been crafting a complete Jack compiler following The Elements of Computing Systems using Java.
I’m a full stack developer and I’m passionate about making cool stuff and solving problems. I’m currently studying Computer Science at BCIT.