4AOL

How to Build the Website

Step 1: TOOLS NEEDED
Installing all the tools necessary for the webpage build:
Git: Gitlab control
Github: Webpage server
Github desktop: To push or pull from the github server and to the github server
VScode: For writing our documents and code for the website and its pages
HTML Language: to write the website
CSS: Corresponds with html. Used to style the website

Step 2: PAGE SETUP
Before we begin, it is worth noting that the GitHub repository had already been setup for our team website by our supervisor. It enables us to upload our website pages to a server for us to edit as team and also setup for others to open and view the work we have done during the course of the module.
Repository Setup for Nexmaker:

Repository Directory

We would like to illustrate how to setup a repository the instructions are as follows: First sign up and create a repository on github.com. Make it public in order to grant access for others to modify. Add a README file for the purpose of writing the website description.

Got to repository settings, in the settings sidebar, select ‘Pages’. In GitHub pages under branch, select main and the ‘/root’ and save. Since the ‘/docs’ folder has not been installed yet, you select root. The setting will be changed to ‘/docs’ later after Docsify install.

In our website one member is the admin and other members have the maintain role.

Step 3: LOCAL SETUP

1. Github Desktop
Install Github desktop and sync your account. Clone your repository created earlier and open in Vs Code.

2. Vs Code
Local settings Open Github desktop, clone repository created earlier and open it in Visual Studio Code.
Example:
Setting index.html
To set an index.html file, follow these simple steps:
1. Create a new folder on your computer where you want to store your website files.
2. Open a text editor (such as Notepad or VsCode) and create a new file.
3. Save the file with the name "index.html" in the folder you created earlier. Make sure to save it with the ".html" extension.
This is an example of how files and folders are organized in VScode.

4. Open the index.html file in your text editor.
5. Start by adding the basic structure of an HTML document by typing this code at the top of the file.

< !DOCTYPE html >

6. Below the doctype declaration, add an opening and closing "html" tag:

< html>< /html >

7. Inside the "html" tags, add opening and closing "head" tags:

< head>< /head>

8. Within the "head" tags, you can add various elements such as a title for your webpage using the "title" tag:

< title>Your Website Title< /title>

9. After closing the "head" tags, add opening and closing "body" tags:

< body>< /body>

10. Inside the "body" tags, you can start adding content to your webpage such as headings, paragraphs, images, links, etc.
For example:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./vars.css">
<link rel="stylesheet" href="./style.css">

<style>
a,
button,
input,
select,
h1,
h2,
h3,
h4,
h5,
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
text-decoration: none;
appearance: none;
background: none;

-webkit-font-smoothing: antialiased;
}

menu, ol, ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<title>4AOL</title>
</head>
<body>
<div
class="div"
style="
background: url(div.png) center;
background-size: cover;
background-repeat: no-repeat;
"
>
<div class="welcome-to-our-group">Welcome To Our Group!</div>
<div class="button">
<a class="member"href="member/index.html">Member</a>
</div>
<div class="_00-button">
<a class="assessment"href="Assessment/index.html">Assessment</a>
</div>
<div class="_00-button2">
<a class="final-work"href="final/index.html">Final Work</a>
</div>
<div class="_00-button3">
<div class="frame-1">
<a class="team"href="Team/index.html">Team</a>
</div>
</div>
<div class="_4-aol">4AOL</div>
</div>

</body>
</html>

Headings:
Use the < h1 > to < h6 > tags for headings. The lower the number, the larger the heading.

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<!-- ... -- >
<h6>This is a Heading 6</h6>

Lists:
Create ordered (numbered) and unordered (bulleted) lists using < ol> and < ul> along with < li> for list items.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>

Links:
Use the < a > tag to create hyperlinks.

<a href="https://www.example.com">Visit Example.com</a>

Add Text:
Inside the <body> tag, you can add text using the <p> (paragraph) tag.

<p>This is a paragraph of text on my web page.</p>

Add Images:
To add images, use the <img> tag. Specify the src attribute with the path to your image.

Divs and Spans:
Use <div> for block-level containers and <span> for inline containers. These are often used for grouping and styling purposes.

Save and View:
Save your HTML file and open it in a web browser to see your web page. Right-click on the file and select "Open with" to choose your preferred browser.

Now you have successfully set up an index.html file! You can open it in a web browser to see how it looks or continue adding more content and styling to build your website further.
for more information

Write document and save all under VScode
Push to Github
1. Click on the "Clone a repository" button or go to File > Clone Repository.
2. Select the repository you want to work with from the list or enter its URL.
3. Choose a local path where you want to clone the repository on your computer.
4. Click on the "Clone" button to download a copy of the repository to your local machine.
5. Once cloned, you can make changes to files within the repository folder on your computer using any text editor or IDE.
6. Open the GitHub desktop app and you will see a list of changed files under "Changes".
7. Review and select which files you want to commit by checking their checkboxes.
8. Enter a brief summary of your changes in the "Summary" field and provide an optional description in the "Description" field.
9. Click on the "Commit" button to save your changes locally.
10. To push your changes to GitHub, click on "Push origin" at the top right corner of the app window.

That's it! Your changes are now pushed to GitHub using the GitHub desktop app.

<div style="color: blue;">This is a blue block of text.</div>
<p>This is a <span style="font-weight: bold;">bold</span> word in a paragraph.</p>

4. Designing in Figma
Figma is a UI design software. We used figma as a basis for what we intend the website design to look like. We also use Figma with the assistance of plugins for the HTML & CSS code then take the necessary measures to make it a working website

a. Designing the website in Figma
Below is a screenshot of the design workflow. Pages are placed side by side with shared elements to ensure continuity in design.

b. We toggle between ‘Design Mode’ and ‘Developer Mode’ in Figma.
Design mode allows us to add elements such as text, images, shapes, layers, colours, etc. Examples:

Design mode:

Design mode Toggle for inserting elements in the frame to design the page
In Design Mode, we toggle between Elemental tools, Tabs to organize them and the Design tools sidebar to edit.

Below is an illustration of how we created the page and various tools used in Figma. By adding elements such as the frame for the page, shapes and texts are layered for the buttons. On the right sidebar, we can view and change various parameters in the design. We can align the text, buttons, shapes, use creation tools to make icons. Edit texts, colors and grids of the page. We played with these various features and reach the result of the prototype for the Landing Page and other supporting website pages .

Developer mode:

Developer Mode enables us to modify the and preview technical aspects of the UI design. We then take the code export it to Vscode for refining and adding interactive features such as links, and buttons to connected pages

Figma Developer Mode Example :
A plugin called “AutoHTML” was used to generate code according to the setup of the page layers and elements. It enables us to view HTML, CSS and JS of the page which can be extracted by copying the code into a new file, or by downloading a compressed folder containing the respective html and css files.

Vscode Import Example:

HTML and CSS files pushed to the repository and viewed in vscode. This is where we will edit elements of the pages and continuously add information over the course of the assignments.

How to make a web page using Figma

For A simple instruction using figma for webpage building:

1. On the Figma homepage, we select “Design File” to start designing our page.

2. Setup Your Canvas on right by selecting the type of device you’d like to design on. Since we are working on a web page, we select Desktop for our Frame/Canvas dimensions.

Below, is what is an example of the setup for our Canvas. Selecting Frame sets up its own layers where we will setup the rest of the page.

Linking Pages

For Linking the Webpages, Figma was not used as the AutoHTML plugin did not have the function. Instead, the files were Pulled through VScode and the edit was made from there to link web pages together. Each page is linked to one another using HTML. The example shown will link the Assignments, Members and Team page from the Home Index.html Page.

The Code connecting ‘Assignments/index.html’, ‘Team/index.html’, ‘Member/index.html’ pages from the Home ‘index.html’ page is as follows:

<div class="button">
<a class="member"href="member/index.html">Member</a>
</div>
<div class="_00-button">
<a class="assessment"href="Assessment/index.html">Assessment</a>
</div>
<div class="_00-button3">
<div class="frame-1">
<a class="team"href="Team/index.html">Team</a>
</div>
</div>

AUTOHTML

The AutoHTML plugin for Figma is a powerful tool designed to bridge the gap between design and development. It streamlines the process of converting your Figma designs into clean, production-ready HTML code.