principle_and_practices


    Starting and creating website, by starting the Website we need differnet tools for starting the process, there's code editor which helps us to write codes that makes our website.
    the code editor i have used is studio code

    Visual studio Code


    Visual Studio Code is a lightweight but powerful source code editor which runs on your desktop and is available for Windows, macOS and Linux.
    It comes with built-in support for JavaScript, TypeScript and Node.js and has a rich ecosystem of extensions
    for other languages and runtimes (such as C++, C#, Java, Python, PHP, Go, .NET).
    first step to get to start using visual studio code is to download here.


    after downloading the software you install it after it is already installed and launched it looks like this.



    before starting coding i have installed an extension in visual studio code that helps to view page live as you make changes in real time view
    this extension is called "live preview" here is the following steps to install it.
    -navigate to run tab choose down install additional debuggers and search for live preview.



    after installing the extension press F1 for shortcut to launch live preview choose the live preview(internal browser).
    then after it will open new window at right side.


git tutorial


what is git it is a source code versioning system that lets you locally track changes and push or pull changes from remote resources.
to start git we need to start creating an account on git through this link https://gitlab.fabcloud.org/

the signup/signin page looks like this.

after creating the account in gitlab, we download git software.

choose the satisfying os software and download from this link https://git-scm.com/downloads
work through whole process to install the downloaded file
how does git works?

Git allows users to track code changes and manage their project using simple commands
the base of Git is repository. used to contain a project. a repository can be stored locally or on a website, such as gitlab.
Git allow users to store several different repositories and track each one independetly.

getting started with git commands
commands are used for sharing and combining the code easily with other developers.
we start by adding Git username and email address to identify the author while committing the information
type the following commands to to add username
git config --global user.name "USERNAME"
type the following command to set email address
 git config --global user.email "EMAIL@sample.com"
if you want to check the information you entered type the following command
git config --global --list

SSH key
The SSH stands for Secure Shell or Secure Socket Shell used for managing the networks,
operating systems and configurations and also authenticates to the GitLab server without using username and password each time.
You can set the SSH keys to provide a reliable connection between the computer and GitLab. Before generating ssh keygen,
you need to have Git installed in your system. we mentioned about download before in the page.
generating SSH keys first type the following command
ssh-keygen -t rsa -C "my.email@example.com" -b 4096
this will generates ssh key, and after this i needed to copy the generatated key to simply copy the key type the following command
xclip -sel clip < ~/.ssh/id_rsa.pu
after trying this command the ssh key will be copied

refer to the link for more about SSH https://www.tutorialspoint.com/gitlab/gitlab_ssh_key_setup.htm

after configurating the username and email locate to gitlab web to get a link for cloning our project
locate to clone and choose the clone with SSH key and copy the link

after getting the link type the following command and add the copied link, this clone my server repository into my local computer repository

starting website and web structure


As it was mentioned above i have used visual studio to edit my entire codes my website has different design tabs and links that directly connect to disired pages


at the first tab there's HOME button this locate to the main page.
the second tab is my project this button locates to the page which includes all documentation of the final project
assignment this link coontains abaout all the assignments i have worked on.
about menu contains dropdown menu with about me and info this about it is introduction about me
for building my website i have used pre coded template dowloaded from this site. this platform includes more different web categories
when already downloading the software i started editing the template which includes unused objects. the web project resources i have designed the webpage through the templates i have downloaded as i mentioned above and the lonk source follows
the actual orgin web template looks the same in the picture below.


to do this all editing and organizing the templates i read and took some courses on helpful website that helped me to understand the logics behind webdesigns
for more information from about my source visit https://www.w3schools.com/ this website contains more about everything you need to know about webdesign.


they actually points on html language which i have used to design my website, though my website didn't look nice when i am only using html
and my webpage is not well arranged as i planned that's where it comes bootstrap.


to make website looks more realistic and fancier i needed bootstrap tool and also there's this website and community teches boostrap and where we can get
all packages on bootstrap visit https://getbootstrap.com/
they also contains all about bootstrap and packages also includes useful examples to guide through the packages.

after making my website i had to send them on my git repository by following steps
  • open terminal command and type the following commands
    • this comand initilize the active repository 
    git init
  • then next type the following command
    • the coomands locate the file to the initilized repository
     git add "file"
  • the following command type
    • this command lets you commit the the changes to be done in the repository
    git commit -m "comment"
  • type the following command after commiting the changes
    • this command lets you push or send your project on git repository. 
    git push

    useful links

    @weekly session