-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwebdevelopment.html
92 lines (92 loc) · 8.07 KB
/
webdevelopment.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html>
<head>
<title>Web Development - Amanda & EP1000</title>
<link rel="stylesheet" href="style.css"/>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Oxygen+Mono&display=swap" rel="stylesheet">
</head>
<body>
<header>
<h1>Website Development</h1>
</header>
<div class="menu-bar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="projects.html" class="active">My Projects</a>
<div class="sub-menu-1">
<ul>
<li><a href="safety.html">FabLab Safety</a></li>
<li><a href="webdevelopment.html" class="active">Web Development</a></li>
<li><a href="cad.html">Computer Aided Design</a></li>
<li><a href="3d.html">3D Modelling</a></li>
<li><a href="programming.html">Programming</a></li>
</ul>
</div>
</li>
<li><a href="finalproject.html">Final Project</a></li>
</ul>
</div>
<div id="web-intro">
<h3>Creation of this website</h3>
<p>I used Atom to write my codes for this website and I found that a few packages and themes in Atom made the editing process a lot easier. These packages and themes are: 1. <a href="https://atom.io/packages/atom-html-preview"> atom-html-preview</a> package by harmsk 2. <a href="https://atom.io/themes/atom-material-syntax">atom-material-syntax</a> theme by atom-material 3. <a href="https://atom.io/packages/fonts">fonts</a> by braver.</p>
<p>Before I created the website I thought about a simple template for my "About" page.</p>
<div id="web-template">
<img src="images/web-template.png" alt="Website Template">
</div>
<p>After creating the sufficient HTML and CSS files, I uploaded my website to GitHub. I go through the steps on how to do this below, click <a href="#GitHub">here</a> to jump to that.</p>
<p>I tried to make this website as adaptable as possible so you can view it in almost any window size. But of course there are some images with a specified size so they may be only viewed to full on a computer screen.</p>
</div>
<div id="web-process">
<h3>Process in creation</h3>
<p>To start off I watched <a href="https://www.youtube.com/watch?v=0afZj1G0BIE"> Learn CSS in 12 Minutes</a> by Jake Wright. You should watch this if you want to get a simple understanding of website layouts. <br><br> I first created a HTML file called about.html, note that the first page of your website must be called index.html but subsequent ones can have any name of your choice. Next I gave my page a title, a header, some content (body) and a footer. I then reorganised the body content into different divisions with different IDs. I later added in a navigation bar, for this I will go into more details later on. </p>
<p>To make my wesite look the way it is, I used a stylesheet written in CSS called style.css. This is what makes the website have an organised and aesthetic feel to it. Without this, the website would just be very plain and full of text without any design or filled with misaligned images and texts. To use this stylesheet you need to link it to your HTML file in the head segment.</p>
<p>There are many other elements in this website that also made use of CSS stylesheets and they will be listed below.</p>
<br>
<h3>HTML file for "About" page</h3>
<p>This is what my about.html file contains. I will talk about the navigation bar later on.</p>
<img src="images/about-html.png" alt="about.html Content">
<h3>CSS file for "About" page</h3>
<p>This is what my style.css file contains for the 'About' page. I changed my font to the current one by adding a link in the html file as you can find above. This font "Oxygen Mono" by Veron Adams can be found <a href="https://fonts.google.com/specimen/Oxygen+Mono?query=oxygen">here</a>.</p>
<img src="images/about-css-1.png" alt="CSS for About page (1)">
<img src="images/about-css-2.png" alt="CSS for About page (2)">
</div>
<div id="web-nav">
<h3>Navigation bar creation</h3>
<p>To start off I created a simple unordered list using the class function. This was placed in the body. I wanted my navigation bar to have a dropdown function when I hovered over it. I wanted it to also stay at the top of my page when I scrolled down. For this navigation bar I used references from <a href="https://www.w3schools.com/">W3Schools</a> and <a href="https://www.youtube.com/watch?v=wHFflWvii3M">How To Make Drop Down Menu Using HTML And CSS</a> by Easy Tutorials.</p>
<br>
<p>Here is the HTML codes for the navigation bar. Remember to put the active tag on the link that is currently active so that your CSS will work.</p>
<img src="images/navbar-html.png" alt="Navigation Bar HTML">
<p>This is the CSS code I used for my navigation bar. It is not perfect but it works and does its job. There are some things that I couldn't figure out a way to change but it looks fine, just don't stare too long at it :).</p>
<img src="images/basic-nav-css.png" alt="Basic Navigation Bar CSS">
<img src="images/dropdown-nav-css.png" alt="DropDown Navigation Bar CSS">
</div>
<div id="GitHub">
<h3> Using GitHub</h3>
<p>How do you setup a website through GitHub? <br> Firstly, create an account on <a href="https://github.com/">GitHub.com</a><br>Next, download GitHub Desktop, this will be the place we create our repositories. Make sure you are logged in. <br> Next, create a new repository with what ever name you want it to be. Make sure you know the path of this so you can find it in your own local drive.</p>
<img src="images/desktop-repository.png" alt="Create Repository">
<p>Next, publish this repository to GitHub.com. Make sure to uncheck "Keep this code private" so that is can be viewed publicly.</p>
<img src="images/publish-repository.png" alt="Publish Repository">
<p>Next, add whatever files you want into this repository file found in your own local drive. make suer to include your index.html file. In that folder should already contain some files, do not remove them. Once you are done, you have to 'commit to main' and 'push to origin' so that the changes made are logged into the system.</p>
<img src="images/commit-to-main.png" alt="Commit to Main">
<p>Finally, go to GitHub.com and check that your repository is updated. Head over to settings > pages and follow my settings in the picture down below so that you get the link to your website. This is the address of your website.</p>
<img src="images/github-pages.png" alt="GitHub pages">
<p>You are done! Remember to commit to main when you add or change some things in your repository and also push to origin so that your website is updated.</p>
</div>
<div id="web-extra">
<h3>Here is some extras found in this website</h3>
<p>Let's start with the <b>vertical timeline</b> found in the "My Projects" page. For this timeline, I took references from <a href="https://codepen.io/htmlcodex/pen/LYGjPgV?editors=1100">Super Simple Timeline</a> by HTML Codex. I took their timeline and changed up some things to make it fit below the navigation bar and also fit my aesthetics. I simply just adjusted the navigation bar to have a z-index of 10. Also for this timeline I used a different stylesheet called style_timeline.css as I didnt want to mix up the contents found in my original stylesheet. This timeline also made use of icons found from <a href="https://fontawesome.com/"> Font Awesome</a>.</p>
<p><b>HTMl for Vertical Timeline</b></p>
<img src="images/timeline-html.png" alt="Timeline HTMl">
<p><b>CSS for Vertical Timeline</b></p>
<img src="images/timeline-css-1.png" alt="Timeline CSS (1)">
<img src="images/timeline-css-2.png" alt="Timeline CSS (2)">
<img src="images/timeline-css-3.png" alt="Timeline CSS (3)">
<img src="images/timeline-css-4.png" alt="Timeline CSS (4)">
</div>
</body>
<footer>
<p>Copyright © 2021 Amanda Lai</p>
</footer>
</html>