Assignment 1- Developing My Website
Date: 01-02-2020
Agenda:-
1. Introduction to HTML and CSS
- I have two working spaces: on my laptop and on the cloud.
- Comparison between HTML and CSS:
| HTML | CSS |
|---|---|
| Hypertext Markup Language. | Cascading Style Sheets |
| Provides the structure or framework of the page. | Provides the presentation or visual layout of the page. |
| i.e. Head, Body, Foot. | i.e. Color, Font, Design, Style, Texture. |
Several examples are provided on: W3Schools
For HTML examples click on: HTML Home
For CSS examples click on: HTML CSS
2. GIT Setup
- Setup GitLab Account
- Login into the cloud:GitLab
- open my file: Hanadi.almohsin
- Click on the + button and select new file.
- File name: test.
- Template type: *.yml .
- Apply HTML template.
- Select “Commit Changes”.
- GitLab allows my website to be connected to the fab academy server.
- .yml is a file that will take whatever I wrote in HTML and CSS and convert it into a language that the server will understand.
- Open GIT Bash
- Git Bash sets up a connection between our local repository and the online one.
- follow the instructions as shown in the image:-
- Copy the unique key.
- Paste it in the GitLAb cloud as follows:
1) Click on my profile logo.
2) Settings.
3) SSH Keys
4) Paste the key.
5) Click on Add Key.
- Create a folder on my PC Desktop named: “local_workspace”
- This will serve as my local work pace or repository .
- In GIT Bash change the work directory into the local workspace by typing: $ cd Desktop/local_workspace
- We need to clone or synch every file.
- Open the cloud and select clone URL for the clone with SSH.
- This is the GIT Repository, inside my name branch, I copied this link.
- In GIT Bash:
-This copies the files from the cloud in my workspace.
- The next step is to modify download the template for my website.
- Download Website theme/template from:Bootstrap
- I selected the “Stylish Portfolio” theme.
- Unzip the file to the desktop.
3.Using Brackets:
- Brackets is a modern text editor that makes it easy to design in the
browser.
- Provides live view
- It works in all OS
- Open Brackets program.
-As seen in the above image, the three files that I have made changes to are:-
1) index.html
2)stylish-portfolio.css
3) Stylish-portfolio.min.css
- changes include:-
* Reducing the number of sections into three (Home, Assignments, Project)
* Changing the background and pictures.
* Changing all the colors into white, black and grey.
* Linking the assignment and project sections into other pages.
* Changing the icons used in the page.
4. Push and Pull local workspace
- The last thing to do is to push the files in the working directory to the
repository by using:
- Move to the master file directory in GIT Bash:
- Copy all the files from the bootstrap folder.
- Paste them in the master folder.
- Add all the files in the directory: $ git add -A
- Add the title “Assignment 1” for the updating operation: $ git commit -m "Assignment1".
- Push all files added in the first command to my GITLab account: $ git push
- Check my website on GitLab, Assignment 1 appears in my activities.
- Go to: Fab Academy 2020 Website
- Go to QBIC and click on my name.
- The website is successfully appearing on GITLab:
