2. Project management¶

Task: Project Management¶

Build a personal site describing you and your final project.
Upload it to the class archive.
Work through a git tutorial.

In this week, we have to learn website designing and define a final project. I don’t know anything about website designing. So I want to learn all things for it.

My Goals¶

Make a personal website¶
- Understand about Gitlab
- Learn html
- Learn css
- Understand about Git
Define final project¶
- It should cover the following crieterias,
  - 1 input and 1 output
  - include a hardware and mechanical component
  - must include some electronics
  - use maximum fablab machines

Understand about Gitlab¶

At first, we have to login to the GIT repository using the username and password provided by Fab Academy Coordination

Then open the file of you.

In that file, you can see some files, Your website is the combination of these files. You can start editing by click in web IDE button.

Use of these different files are: | File | Use | | — | ----------- | | mkdocs.yml | It is the configuration file of the site | |docs/| All site content/files should be in this folder| | index.md | homepage | | files/ | You can add all files except video format in this file | |images/| You can put your images in here |

mkdocs.yml : It is the configuration file of the site
docs/ : All site content/files should be in this folder
index.md : The homepage
files/ : You can add all files except video format in this file
images/ : You can put your images in here

After click the Web IDE button, you will enter into the editing window.

Then we can select one file to edit, In here I select index.md, Then I changed heading and I added a photo. After some edit. Click on the commit button

Then add a commit message. and make sure to select ‘commit to master branch’ option and click on commit button

Learn html and css¶

As our mentors told us, I go through the chapters of html in thew3school.com. I think that beyond any courses w3school.com can teach us the basics of html effortlessly. ‘try it yourself’ features in every chapter really helped me. Along with that i also went through the css chapters in w3school.com. Then I got an overall idea about website designing. The following exercises helped me to understand basics of html and css.
Go to w3school.com-> How to -> Example WebsiteExample Website,
Then select a website design you like and click on the ‘Try it yourself’ button.
Then make little changes in the code of that website like colour, font, text size, element positions etc.

You can workout an another exercise

Download and install Visual studio code
Import go live plugin to view the live preview of website
Open Git repository
Select a previous student’s repository in which you like the website design.
Download the zip file of that student by clicking on download –> zip
After extract the zip file, open that file in visual studio code.
Then make little changes in the codes(html, css, js) and click on the ‘go live’ button.
Then you can understand different parts of a code.

Git¶

Git is a open source distributed version control system. It is used to tracking changes in the source code and it enabling multiple developers to work togather on non-linear development.

- I- Install Git.¶

I installed Git using the link provided by our mentor.

- II- Configuring Git.¶

After enter into my new folder I opened Gitbash and used the following codes step by step.

clone current repositery from the remot server to the system.

git clone https://gitlab.fabcloud.org/academany/fabacademy/2022/labs/kochi/stuadents/username.git

Add Git username and set email

git config –-global user.name “YOUR_USERNAME”

Configure email address for uploading

git config -–global user.email “jSmith@mail.com”

Checking for SSH KEY

cat ~/.ssh/id_rsa.pub

To generate SSH key, the following code is used.

ssh-keygen -t rsa -C "mu**********@gmail.com"

To see the SSH key.

cat ~/.ssh/id_rsa.the pub

Then I copied the key using following code.

clip < ~/.ssh/id_rsa.pub

Then I pasteed the key to GIT on the web version

- III- Uploading the repo online.¶

After doing some edits in index.html, I want to upload the file into my online repository. I followed the codes below
- Add the new files(or changes you made)

To upload file by file

git add index.html

To upload To upload all files together

git add .

Download last copy of the repository

git pull

Combine the two files

git merge

Commit with a commit message

git commit -m ‘change you did’

Upload to the Repository

git push

Errors displayed in the gitbash is caused by the conflict between the remote and local repository due to the changes made in the local repository without pulling the committed

I solved that problem by overwriting local files using force git pull. For that, I referred following website
stackoverflow
www.freecodecamp.org