the purpose is to acquire skills in using a version control system such as Git, develop a website and begin to capture the ideas of the final project in visual form.
Commands that will be used for our terminal📟
| command |
|
Function |
| cd "folder name" |
⏩ |
Open folder📂 |
| mkdir "folder name" |
⏩ |
Create folder🗂 |
| ls |
⏩ |
Show directory🗄 |
| cd .. |
⏩ |
back🔙 |
How to upload your repository to the cloud?🌥
1. First, we use the ls command in CMD to display our folders.
2. Next, we type the cd/ command and in quotes the folder
we want to access (we can also use the TAB key).
3. We enter the mkdir "name" command to create a folder.
4. We type the cd "name" command for the newly created folder.
5. Then, we create a "file name".txt file using the type null > command.
6. We initialize the repository with the git init command.
7. We check our actions with git status to see what actions we can take next.
We observe that we haven't added anything to our repository yet,
so we are suggested to use the git add . command.
8. We check the status again and notice that it is still unpackaged,
so we use git commit -m "my_first_commit", where the
text in quotes is the name of our commit.
How I created my webpage?🌐
My site was created using a template and trying to use mostly HTML and CSS
there are also some effects with JavaScript
Here is how to create a website in three easy steps:
1.-First than ever i chose a template:
I went to plantillas html gratis and picked a template that I liked, then downloaded it.
2.-I extracted the files:
I unzipped the
downloaded file and copied the folder with the template files into my project.
3.-edited the content:
I opened the index.html file in my text editor and looked for sections that allowed me to change the content, such as titles, texts, and links.
I customized the content according to my needs.
4.-To start editing the template I started using a div id=intro to be able to create a special section for the introduction to my html page.
I added an image that I designed using an img tag with an src attribute to be able to specify the path where the image is located in my files
and it will be displayed on the web page, in case I wanted to add a description to the image I would use the alt= attribute and for the image
size use the width= attribute and add how big you wanted the image in pixels.
To set the title of the web page, use an h1 tag and a class=animate_animate
that takes me
from a page called
animate.css to be able to apply specific styles or behaviors to my tag.
I did the same process for the subtitles,
only I replaced the h1 with an h4 so that the lyrics do not overshadow the title.
5.-With an ul tag I could group elements in an unordered way to create a list of which I could order with the li tag to define each element within the list.
inside the list I placed a label to be able to create a link to the menu and I closed the /div to make that section of the code end.
6.-In the next section I created an unordered list with ul, which I sorted with li and added an a tag to create a link to other tabs in my code
7.-For the next section of the code, add a header element to define the header of the part where my process will be shown and I added a class=major.
I added a title with an h2 and then added a p element to be able to add a paragraph
and under that I added my name with an h3 making it a little smaller than normal.
I added a ul and added a special class= actions
Below that class place a link that leads to my about me adding a class=button large.
I used a center to center the or and after that I placed another header to define another header and I did the same process for that section of the code
8.-To separate a new section, use a div and add a title with an h1 and center it with the center tag.
I created a section tag to group
related and thematically similar content within the web page, adding a class=posts.
Adding an article tag since it is used to represent independent and
autonomous content and a header to define the independent section.
When adding a span tag used to apply specific styles or behaviors to a part of a text which
I will also add a class=date to add the dates and make it look good aesthetically, I added an h2 tag for subtitle and adding a br for insert a line break add an h3 for slightly smaller letters.
9.-I closed the h2, h3 tags and the header element and then added an img tag with an src to direct me to the desired image, an alt if I wanted to put a footer
on the image and a width in px to define the size.
I added a p tag to describe what will be done this week.
Finally, create a list with ul with a class= action special and order
this with a li tag adding a link with an href to locate the file in jpg and a class=button so that this button can direct to another tab called week 1 and I closed all the tags,
I did the same process 17 times, changing the images, titles and paragraphs.
How use git?🤷♂️
1. Git Clone 💽
The clone command creates a local repository of the folder that is in git on our computer.
2. Git Add . 🗂
After modifying the files the command add adds the changes we want to keep on sight to update the local copy of the repository
3. Git Commit📦
Commit is the command used to save a checkpoint of our work. Is important to mention that these only saves the changes made on our computer.
4. Git Push🌥
This command sincs all the changes we made locally to the cloud file system.
Final project idea💡
