Week1. Project management¶
This week I work on two things:
1/ How to make my own website, and add all the initial infomation in it;
2/ Thinking about the final project details.
1/ How to make my own website.¶
At the very begining, I need to find out what is “Git”?
Git is a distributed version control system that was created by Linus Torvalds in 2005. Version control systems are tools that help manage changes to source code over time, allowing multiple people to work on the same codebase without conflicts, and enabling them to track their work history.
Git is widely used for its speed, efficiency, flexibility, and robust capabilities in handling both small and large projects. Here’s how it works:
Snapshotting: When you make changes in a Git repository, Git takes a snapshot of your files, recording what has changed since the last time you committed (saved) your changes. Each snapshot is referred to as a commit, which has a unique ID.
Branching and Merging: Git allows for creating branches, which are parallel versions of your repository. Branching enables you to work on different features or fixes without affecting the main codebase, and you can merge your changes back into the main branch when they’re ready.
Distributed Development: Every contributor has their own local copy of the entire repository, which includes all the history and changes. This means that work can continue on any machine with the repository, even without network access, and changes can be synchronized later.
Integrity and Security: Every commit and change in Git is checksummed with a SHA-1 hash, ensuring the integrity of the codebase. If a file is tampered with or corrupted, Git will detect it.
Staging Area: Unlike some other version control systems, Git has a staging area or “index.” This is like a pre-commit holding area that allows you to review and prepare your commits before actually recording the changes in the repository’s history.
Non-linear Development: Git supports complex non-linear development workflows with features like rebase, which can splice and rewrite history in a controlled manner.
Speed: Git is designed with performance in mind. Most operations are local, which makes them much faster since they don’t rely on a network connection.
Open Source: Git is free and open-source, meaning that its source code is available for anyone to look at or contribute to.
To use Git, developers typically interact with it through the command line; however, there are also many graphical user interfaces (GUIs) available. Git is integral to services such as GitHub, GitLab, and Bitbucket, which add a web-based interface and additional features like issue tracking, code reviewing, and more on top of Git’s functionality.
Content above come from GPT4
Then I need to add Git into my laptop, Since I am using a MacBook, I can install Git using different methods, I choose one of the simple method：¶
Install Git using Homebrew
Open Terminal.app and paste the following command to install it:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
After installing homebrew, I open it and use it to download Git.
Then Creat a new folder and name it “Fablab2024kawi”, use command “cd”, Drag the folder into the window,
then go to the gitlab website, copy “HTTPS”
paste to this window and press “Enter”
Then the git is Setup completed.
At this point, git is installed, now I need to build my own personal website, So I need a tool to edit the website, that is VScode.
What is VScode?
Visual Studio Code (commonly referred to as VS Code) is a free, open-source text editor developed by Microsoft. It’s lightweight, fast, and supports multiple programming languages. VS Code features capabilities such as auto-completion of code, program debugging, and version control, with the flexibility to add more functions through plugins. This editor is highly suitable for coding and debugging by programmers, appealing to both beginners and experienced developers alike. Install VScode
Content above come from GPT4
VScode also done for install.
then install “preview on web server”
After all of installation, I can finally use HTML to build my own website.
One of the more difficult problems I encountered was how to divide the entire webpage into columns and set up sidebars. I checked GPT and got the answer:
To create columns in a webpage using HTML, there is several methods. Here are two common approaches:
Traditional Method using HTML and CSS: create div containers for each column and use CSS to define their width and position.
<!DOCTYPE html>
<html>
<head>
<style>
.row {
width: 100%;
overflow: auto;
}
.column {
float: left;
width: 50%; /* For example, creating two columns, each taking half the width */
padding: 10px;
box-sizing: border-box; /* This makes sure padding does not affect the overall width */
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some other text..</p>
</div>
</div>
</body>
</html>
In the example above, the .column class turns the two div elements into side-by-side columns. You can adjust the width of the columns by modifying the width property in the .column class.
Using Flexbox: Flexbox is a part of CSS that provides a more streamlined way to create complex layouts.
<!DOCTYPE html>
<html>
<head>
<style>
.row {
display: flex;
}
.column {
flex: 1; /* This will cause all columns to equally share the available space */
padding: 10px;
}
</style>
</head>
<body>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some other text..</p>
</div>
</div>
</body>
</html>
then I try to make my own code below
<div class="navbar">
<div class="navbar-inner">
<a href="../index.html">Home</a>
<a href="../final-project.html">Final Project</a>
<a href="../about.html">About me</a>
</div>
</div>
<div class="container">
<div class="column" >
<p style="font-weight: 800;"><a href="../final-project.html"> > Final Project</a></p>
<li><a href="../assignments/week01.html">week 1. Project management</a></li>
<li><a href="../assignments/week02-part01.html">week 2. Computer-Aided design</a></li>
<li><a href="../assignments/week03-part01.html">week 3. Computer controlled cutting</a></li>
<li><a href="../assignments/week04.html">week 4. Embedded programming</a></li>
<li><a href="../assignments/week05.html">week 5. 3D Scanning and printing</a></li>
<li><a href="../assignments/week06.html">week 6. Electronics design</a></li>
<li><a href="../assignments/week07.html">week 7. Computer controlled machining</a></li>
<li style="color: rgb(191, 191, 191);">week 8. Electronics production</li>
<li style="color: rgb(191, 191, 191);">week 9. Molding and casting</li>
<li style="color: rgb(191, 191, 191);">week 10. Output devices</li>
<li style="color: rgb(191, 191, 191);">week 11. Mechanical design & machine design</li>
<li style="color: rgb(191, 191, 191);">week 12. Input devices</li>
<li style="color: rgb(191, 191, 191);">week 13. Networking and communications</li>
<li style="color: rgb(191, 191, 191);">week 14. Interface and application programming</li>
<li style="color: rgb(191, 191, 191);">week 15. Wildcard week</li>
<li style="color: rgb(191, 191, 191);">week 16. Applications and implications</li>
<li style="color: rgb(191, 191, 191);">week 17. Invention, intellectual property and income</li>
<li style="color: rgb(191, 191, 191);">week 18. Project development</li>
</div>
body {
font-family: sans-serif;
margin: 0;
}
p {
font-family: 'montserrat';
}
.ad-container {
position: relative;
width: auto;
height: 100%;
}
.ad-container img {
width: 100%;
height: 100%;
}
.ad-text {
position: absolute;
top: 15%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 18px;
font-weight: bold;
}
.container {
display: flex;
}
.column {
padding: 30px;
}
.column:first-child a {
color: #3d4486;
text-decoration: none;
}
.column:first-child a:hover {
color: #00cea5;
text-decoration: none;
}
.column:first-child {
flex-basis: 250px;
color: #2b305d;
margin-right: 0px;
background: #FFFFFF;
}
.column:last-child {
color: #000000;
flex: 1;
background: #FFFFFF;
}
.container2 {
display: flex;
}
.column2 {
flex: 1;
padding: 1px;
}
.column2:first-child {
flex: 1;
background: #ffffff;
margin-right: 30px;
}
.column2:nth-child(2) {
flex: 1;
background: #ffffff;
margin-right: 30px;
}
.column2:last-child {
flex: 1;
background: #ffffff;
}
.container3 {
display: flex;
background: #ffffff;
}
.column3 {
flex: 1;
padding: 30px;
text-decoration: none;
}
.column3:first-child a {
color: #2b305d;
text-decoration: none;
}
.column3:first-child a:hover {
color: #0071ce;
text-decoration: none;
}
.container4 {
display: flex;
background: #ffffff;
}
.column4 {
flex: 1;
padding: 1px;
text-decoration: none;
}
.navbar {
width: 100%;
padding: 5px;
background-color:#2b305d;
This problem is solved, the web page looks like this
In the same way, the home page is also divided into columns.
Useful links( Help me how to learn HTML)¶
What kind of usfull new code I learn.¶
Code Example¶
All HTML documents must start with a document type declaration:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML headings are defined with <h1> to<h6> tags.
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML images are defined with the <img> tag.
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">
HTML paragraphs are defined with the <p>tag.
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML links are defined with the <a> tag
<a href="https://www.w3schools.com">This is a link</a>
Learn the Git tutorials
git status
git add.
git commit -m “message ”
git push
MkDocs¶
What is MkDocs? MkDocs is a fast and simple static site generator that is geared towards building project documentation. Documentation source files are written in Markdown, and then MkDocs builds a static HTML website from these files. It is particularly popular in the software development community for documenting projects due to its ease of use and straightforwardness.
Key features of MkDocs include:
Markdown Support: Write your documentation in Markdown, a lightweight markup language with plain text formatting syntax.
Theme Support: Comes with a selection of pre-made themes that can be customized, or you can create your own.
Host Anywhere: The static HTML output means that you can host your documentation on any web server, GitHub Pages, ReadTheDocs, or other hosting services.
Preview Your Changes: MkDocs includes a built-in development server that can be used to preview documentation changes in real time.
Searchable: MkDocs provides a search feature within the generated site, enabling users to easily search for information within documentation.
Extensible: You can enhance your documentation with plugins from the third-party community or create your own.
To use MkDocs, you typically install it using Python’s package manager pip, create your documentation using Markdown, and then run a build command to generate the site. MkDocs is an excellent choice for teams that need a simple, yet powerful tool to create documentation that can be easily maintained and updated.
Content above come from GPT4
I’ve found that using HTML to write documentation is very time-consuming, so I’ve decided to switch to using MkDocs for writing documentation. Consequently, I’ve reinstalled MkDocs. Below is the page before I made the changes.
I followed this tutorial to create a new page step by step:¶
First, create a new folder to store the materials for the new page.
then open a new terminal window on vscode
Because my computer has not installed python before, I need to install python first. Here I installed python3.12.3.
Then install python
When I returned to VScode, I found that python is not in the system path
so I searched a lot of information online and found this URL:
- https://www.mygreatlearning.com/blog/add-python-to-path/
it help me a lot, following this tutorial, the problem was solved. Here is my
new page.
2/ Thinking about the final project details.¶
When you are one meter away from him, the pointer represents the hour hand; when you are closer to 80cm, the pointer represents the minute hand; when you are closer to 60cm, the pointer represents the second hand; when you are closer, the pointer will rotate at the fastest speed.
Why I made this clock¶
When you look at the hour hand and it barely moves, you feel that time passes very slowly, very slowly… But in fact, time has been passing quickly, but in a dimension that we rarely see. It used to be slow, but I hope that through this work, people can feel that time actually passes quickly and they should cherish time.
Initial Concept¶
