TaxFrauder/Web1-Experimentation
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

My first commit

Browse Source
This commit is contained in:
TaxFrauder 2023-03-16 10:14:36 +01:00
commit 139fd9ad78
11 changed files with 787 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

60
Pages/about.html Normal file
View File

@ -0,0 +1,60 @@
<!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">
<title>Document</title>
<link rel="stylesheet" href="/css/styleSheet.css">
<link rel="stylesheet" href="/css/gridCSS.css">
</head>
<body>
<header>
<hgroup>
<h1>Programminglanguages</h1>
<h2>About</h2>
</hgroup>
<nav>
<a id="MenuButton" href="#">☰</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="javascript.html">Javascript</a></li>
<li><a href="html&css.html">HTML/CSS</a></li>
<li><a href="c++.html">C++</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<main>
<img class="Image col-12 col-t-6 col-d-2" src="/img/Me.jpg" alt="Me">
<section class="AboutEXP col-12 col-t-6 col-d-5">
<h2>About Me</h2>
<p><strong>Name:</strong> Alex Godolakis</p>
<p><strong>Education:</strong> Ängelholm Rönnegymnasiet</p>
<p><strong>E-post:</strong> alex.godolakis@gmail.com</p>
<p><strong>Telephone:</strong> 07-3536-5612</p>
</section>
<img class="Image col-12 col-t-6 col-d-2" src="/img/Helios.jpg" alt="Helios">
<section class="AboutEXP col-12 col-t-6 col-d-3">
<h2>About my dog</h2>
<p><strong>Name:</strong> Helios</p>
<p><strong>Education:</strong> Dogwarts academy</p>
<p><strong>Hobbies:</strong> Biting people's ankles</p>
<p><strong>Favourite Food:</strong> Cucumber</p>
</section>
</main>
<footer>
<Address>
Alex Godolakis <br>
alex.godolakis@gmail.com <br>
07 3536 5612
</Address>
</footer>
</body>
</html>

85
Pages/c++.html Normal file
View File

@ -0,0 +1,85 @@
<!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">
<title>Document</title>
<link rel="stylesheet" href="/css/styleSheet.css">
<link rel="stylesheet" href="/css/gridCSS.css">
</head>
<body>
<header>
<hgroup>
<h1>Programminglanguages</h1>
<h2>C++</h2>
</hgroup>
<nav>
<a id="MenuButton" href="#">☰</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="javascript.html">Javascript</a></li>
<li><a href="html&css.html">HTML/CSS</a></li>
<li><a href="c++.html">C++</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<main>
<section class="cEXP col-12 col-t-12 col-d-6">
<h2>C++</h2>
<p>C++ (pronounced "C plus plus") is a high-level general-purpose programming language created by Danish
computer scientist Bjarne Stroustrup as an extension of the C programming language, or "C with Classes".
The language has expanded significantly over time, and modern C++ now has object-oriented, generic, and
functional features in addition to facilities for low-level memory manipulation. It is almost always
implemented as a compiled language, and many vendors provide C++ compilers, including the Free Software
Foundation, LLVM, Microsoft, Intel, Embarcadero, Oracle, and IBM, so it is available on many platforms.
C++ was designed with systems programming and embedded, resource-constrained software and large systems
in mind, with performance, efficiency, and flexibility of use as its design highlights. </p>
</section>
<table class="table col-12 col-t-12 col-d-6">
<tr>
<td>History of C++</td>
<td></td>
</tr>
<tr>
<td>Version</td>
<td>Year</td>
</tr>
<tr>
<td>C++98</td>
<td>1998</td>
</tr>
<tr>
<td>C++11</td>
<td>2011</td>
</tr>
<tr>
<td>C++14</td>
<td>2014</td>
</tr>
<tr>
<td>C++17</td>
<td>2017</td>
</tr>
<tr>
<td>C++20</td>
<td>2020</td>
</tr>
</table>
</main>
<footer>
<Address>
Alex Godolakis <br>
alex.godolakis@gmail.com <br>
07 3536 5612
</Address>
</footer>
</body>
</html>

121
Pages/html&css.html Normal file
View File

@ -0,0 +1,121 @@
<!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">
<title>Document</title>
<link rel="stylesheet" href="/css/styleSheet.css">
<link rel="stylesheet" href="/css/gridCSS.css">
</head>
<body>
<header>
<hgroup>
<h1>Programminglanguages</h1>
<h2>HTML&CSS</h2>
</hgroup>
<nav>
<a id="MenuButton" href="#">☰</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="javascript.html">Javascript</a></li>
<li><a href="html&css.html">HTML/CSS</a></li>
<li><a href="c++.html">C++</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<main>
<section class="HTMLEXP col-12 col-t-6 col-d-6">
<h2>HTML</h2>
<p>The HyperText Markup Language or HTML is the standard markup language for documents designed to be
displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and
scripting languages such as JavaScript. HTML elements are the building blocks of HTML pages. With HTML
constructs, images and other objects such as interactive forms may be embedded into the rendered page.
HTML provides a means to create structured documents by denoting structural semantics for text such as
headings, paragraphs, lists, links, quotes, and other items. HTML can embed programs written in a
scripting language such as JavaScript, which affects the behavior and content of web pages. The
inclusion of CSS defines the look and layout of content. </p>
</section>
<table class="table col-12 col-t-6 col-d-6">
<tr>
<td>History of HTML</td>
<td></td>
</tr>
<tr>
<td>Version</td>
<td>Year</td>
</tr>
<tr>
<td>HTML</td>
<td>1991</td>
</tr>
<tr>
<td>HTML+</td>
<td>1993</td>
</tr>
<tr>
<td>HTML2</td>
<td>1995</td>
</tr>
<tr>
<td>HTML3.2</td>
<td>1997</td>
</tr>
<tr>
<td>HTML4.01</td>
<td>1999</td>
</tr>
<tr>
<td>HTML5</td>
<td>2012</td>
</tr>
</table>
<section class="CSSEXP col-12 col-t-6 col-d-6">
<h2>CSS</h2>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document
written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML).
CSS is a cornerstone technology of the internet, alongside HTML and JavaScript. CSS is designed to
enable the separation of content and presentation, including layout, colors, and fonts. This separation
can improve content accessibility; provide more flexibility and control in the specification of
presentation characteristics; enable multiple web pages to share formatting by specifying the relevant
CSS in a separate .css file, which reduces complexity and repetition in the structural content. </p>
</section>
<table class="table col-12 col-t-6 col-d-6">
<tr>
<td>History of CSS</td>
<td></td>
</tr>
<tr>
<td>Version</td>
<td>Year</td>
</tr>
<tr>
<td>CSS1</td>
<td>1996</td>
</tr>
<tr>
<td>CSS2</td>
<td>1997</td>
</tr>
<tr>
<td>CSS3</td>
<td>1999</td>
</tr>
</table>
</main>
<footer>
<Address>
Alex Godolakis <br>
alex.godolakis@gmail.com <br>
07 3536 5612
</Address>
</footer>
</body>
</html>

88
Pages/index.html Normal file
View File

@ -0,0 +1,88 @@
<!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">
<title>Document</title>
<link rel="stylesheet" href="/css/styleSheet.css">
<link rel="stylesheet" href="/css/gridCSS.css">
</head>
<body>
<header>
<hgroup>
<h1>Programminglanguages</h1>
<h2>Home</h2>
</hgroup>
<nav>
<a id="MenuButton" href="#">☰</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="javascript.html">Javascript</a></li>
<li><a href="html&css.html">HTML/CSS</a></li>
<li><a href="c++.html">C++</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<main>
<section class="col-12 col-t-12 col-d-6 Intro">
<h2>Introduction</h2>
<p>There are many different programming languages, and they all have their own purpose within the world of
programming. What all these languages share incommon however, is that they compile the code written into
machine code, which the machine/computer then reads to understand what it should do. The reason
programmers dont write all their code in this "machine code" is because its alot easier to understand
and organize bigger projects in these "compiler languages" that will be discussed further in later
segments.</p>
</section>
<section class="col-12 col-t-6 col-d-6 Javascript">
<h2>Javascript</h2>
<p>Javascript is a medium-difficulty compiler language, that is most often used alongside HTMl and CSS in
order to design websites. 98% of websites in the public domanin use Javascript(Often derived as JS) as a
part of their websites for varying functions. Javascript is also very popular for the construction of
mobile apps, but more complicated applications usually utilize a more complicated language(Read C++)</p>
<a href="javascript.html">Läs Vidare</a>
</section>
<section class="col-12 col-t-6 col-d-4 HTML">
<h2>HTML</h2>
<p>HTML, which stands for Hypertext markup language, is different from most programming languages, as it
does not to much on it's own. The main function of HTML is to create the core properties of elements
displayed on webpages, and is almost always used alongside CSS in order to make websites look good. You
could say that it creates the building blocks for a website that is to be improved upon with other
languages.</p>
<a href="html&css.html">Läs Vidare</a>
</section>
<section class="col-12 col-t-6 col-d-4 CSS">
<h2>CSS</h2>
<p>CSS is a programming languages that needs to be used alongside a markup language (Usually HTML, but other
options include XML). It stands for Cascading Style Sheets, and its primary function is to define how
HTML elements should be displayed. This includes things like size, colour, position on the page and much
more. CSS is the reason modern websites look like they do, and alongside HTML are the building blocks
for the web as we know it.</p>
<a href="html&css.html">Läs Vidare</a>
</section>
<section class="col-12 col-t-6 col-d-4 c">
<h2>C++</h2>
<p>C++ is a highly complicated programming language, and is an extension of the original C language. The
language is highly efficient, but also complicated. This is why it is heavily used within complicated
apps and video games, as it can efficiently compute the thousands of things happening constantly within
those scenarios. It is also often used within servers and databases, alongside being common within
applications that need to run extremely efficiently.</p>
<a href="c++.html">Läs Vidare</a>
</section>
</main>
<footer>
<Address>
Alex Godolakis <br>
alex.godolakis@gmail.com <br>
07 3536 5612
</Address>
</footer>
</body>
</html>

102
Pages/javascript.html Normal file
View File

@ -0,0 +1,102 @@
<!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">
<title>Document</title>
<link rel="stylesheet" href="/css/styleSheet.css">
<link rel="stylesheet" href="/css/gridCSS.css">
</head>
<body>
<header>
<hgroup>
<h1>Programminglanguages</h1>
<h2>Javascript</h2>
</hgroup>
<nav>
<a id="MenuButton" href="#">☰</a>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="javascript.html">Javascript</a></li>
<li><a href="html&css.html">HTML/CSS</a></li>
<li><a href="c++.html">C++</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</header>
<main>
<section class="JavascriptEXP col-12 col-t-12 col-d-6">
<h2>Javascript</h2>
<p>Javascript is one of the core programming languages of the internet. As of 2022, 98% of websites use
JavaScript on the client side for webpage behavior, often incorporating third-party libraries. All major
web browsers have a dedicated JavaScript engine to execute the code on users' devices. Javascript has
dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm,
supporting event-driven, functional, and imperative programming styles. It has application programming
interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the
Document Object Model (DOM). JavaScript engines were originally used only in web browsers, but are now
core components of some servers and a variety of applications. The most popular runtime system for this
usage is Node.js.</p>
</section>
<table class="table col-12 col-t-12 col-d-6">
<tr>
<td>History of Javascript</td>
<td></td>
</tr>
<tr>
<td>Version</td>
<td>Year</td>
</tr>
<tr>
<td>ES1</td>
<td>1997</td>
</tr>
<tr>
<td>ES2</td>
<td>1998</td>
</tr>
<tr>
<td>ES3</td>
<td>1999</td>
</tr>
<tr>
<td>ES4</td>
<td>Abandoned</td>
</tr>
<tr>
<td>ES5</td>
<td>2009</td>
</tr>
<tr>
<td>ES6</td>
<td>2015</td>
</tr>
<tr>
<td>ES7</td>
<td>2016</td>
</tr>
<tr>
<td>ES8</td>
<td>2017</td>
</tr>
<tr>
<td>ES9</td>
<td>2018</td>
</tr>
</table>
</main>
<footer>
<Address>
Alex Godolakis <br>
alex.godolakis@gmail.com <br>
07 3536 5612
</Address>
</footer>
</body>
</html>

96
css/gridCSS.css Normal file
View File

@ -0,0 +1,96 @@
main{
display: grid;
grid-template-columns: repeat(12,1fr);
grid-auto-rows: minmax(10rem,auto);
grid-gap: 1rem;
}
main section {
grid-column: span 12;
padding: 0.5rem;
}
@media (min-width: 0px){
.col-1 {grid-column: span 1;}
.col-2 {grid-column: span 2;}
.col-3 {grid-column: span 3;}
.col-4 {grid-column: span 4;}
.col-5 {grid-column: span 5;}
.col-6 {grid-column: span 6;}
.col-7 {grid-column: span 7;}
.col-8 {grid-column: span 8;}
.col-9 {grid-column: span 9;}
.col-10 {grid-column: span 10;}
.col-11 {grid-column: span 11;}
.col-12 {grid-column: span 12;}
.row-2{grid-row: span 2;}
.row-3{grid-row: span 3;}
.row-4{grid-row: span 4;}
.row-5{grid-row: span 5;}
.row-6{grid-row: span 6;}
.row-7{grid-row: span 7;}
.row-8{grid-row: span 8;}
.row-9{grid-row: span 9;}
}
@media (min-width: 768px){
[class*='col-t-']{
grid-row: span 1;
}
.col-t-1 {grid-column: span 1;}
.col-t-2 {grid-column: span 2;}
.col-t-3 {grid-column: span 3;}
.col-t-4 {grid-column: span 4;}
.col-t-5 {grid-column: span 5;}
.col-t-6 {grid-column: span 6;}
.col-t-7 {grid-column: span 7;}
.col-t-8 {grid-column: span 8;}
.col-t-9 {grid-column: span 9;}
.col-t-10 {grid-column: span 10;}
.col-t-11 {grid-column: span 11;}
.col-t-12 {grid-column: span 12;}
.row-t-2{grid-row: span 2;}
.row-t-3{grid-row: span 3;}
.row-t-4{grid-row: span 4;}
.row-t-5{grid-row: span 5;}
.row-t-6{grid-row: span 6;}
.row-t-7{grid-row: span 7;}
.row-t-8{grid-row: span 8;}
.row-t-9{grid-row: span 9;}
}
@media (min-width: 980px){
[class*='col-d-']{
grid-row: span 1;
}
.col-d-1 {grid-column: span 1;}
.col-d-2 {grid-column: span 2;}
.col-d-3 {grid-column: span 3;}
.col-d-4 {grid-column: span 4;}
.col-d-5 {grid-column: span 5;}
.col-d-6 {grid-column: span 6;}
.col-d-7 {grid-column: span 7;}
.col-d-8 {grid-column: span 8;}
.col-d-9 {grid-column: span 9;}
.col-d-10 {grid-column: span 10;}
.col-d-11 {grid-column: span 11;}
.col-d-12 {grid-column: span 12;}
.row-d-2{grid-row: span 2;}
.row-d-3{grid-row: span 3;}
.row-d-4{grid-row: span 4;}
.row-d-5{grid-row: span 5;}
.row-d-6{grid-row: span 6;}
.row-d-7{grid-row: span 7;}
.row-d-8{grid-row: span 8;}
.row-d-9{grid-row: span 9;}
}

232
css/styleSheet.css Normal file
View File

@ -0,0 +1,232 @@
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
html {
font-size: 62.5%;
}
header {
background-image: url(/img/Header.JPG);
color: white;
}
header hgroup {
font-size: 1.3rem;
padding: 1rem;
}
nav {
position: absolute;
background-color: black;
top: 1rem;
right: 1rem;
}
#MenuButton {
text-decoration: none;
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
color: white;
border: 0.1rem solid gray;
border-radius: 0.5rem;
float: right;
font-size: 1.5rem;
}
a:hover#MenuButton {
background-color: gray;
}
nav ul,
nav:active ul {
display: none;
}
nav:hover ul {
display: inline-block;
}
nav ul li {
list-style-type: none;
display: block;
padding: 0.5rem;
color: white;
font-size: 1.5rem;
}
nav ul li a {
text-decoration: none;
display: block;
padding: 0.5rem;
color: white;
}
nav ul li a:hover {
background-color: grey;
}
section {
margin: 0.5rem;
}
section h2 {
font-size: 2rem;
font-weight: normal;
margin-bottom: 0.5rem;
}
section p {
margin-bottom: 0.5rem;
font-size: 1.5rem;
}
section.Intro {
border: 0.1rem solid silver;
background-color: silver;
}
section.Javascript {
border: 0.1rem solid lightcoral;
background-color: lightcoral;
}
section.HTML {
border: 0.1rem solid lightgreen;
background-color: lightgreen;
}
section.CSS {
border: 0.1rem solid lightskyblue;
background-color: lightskyblue;
}
section.c {
border: 0.1rem solid pink;
background-color: pink;
}
section.JavascriptEXP {
border: 0.1rem solid lightsalmon;
background-color: lightsalmon;
}
section.HTMLEXP {
border: 0.1rem solid aquamarine;
background-color: aquamarine;
}
section.CSSEXP {
border: 0.1rem solid mistyrose;
background-color: mistyrose;
}
section.cEXP {
border: 0.1rem solid thistle;
background-color: thistle;
}
section.AboutEXP {
border: 0.1rem solid black;
border-radius: 0.4rem;
}
Img {
width: 360px;
height: 480px;
margin-top: 0.5rem;
margin-left: auto;
margin-right: auto;
}
main a {
text-decoration: none;
float: right;
color: black;
margin: 0.5rem;
font-size: 1.5rem;
}
table {
border: 0.1rem solid gray;
border-collapse: collapse;
font-size: 2rem;
margin: 0.5rem;
}
table td {
padding: 0.25rem;
}
tr:nth-child(even) {
background-color: lightgrey;
}
footer {
background-color: black;
color: white;
display: flex;
margin-top: 1rem;
font-size: 1.5rem;
}
@media (min-width: 768px) {
header hgroup {
font-size: 2.5rem;
}
#MenuButton {
display: none;
}
nav {
position: static;
background-color: transparent;
}
nav ul,
nav:active ul {
display: block;
padding-left: 1rem;
}
nav ul li {
padding-left: 0;
display: inline-block;
}
nav ul li a {
border: 0.1rem solid gray;
background: black;
border-radius: 1rem;
font-size: 2rem;
}
nav ul li a:hover {
background-color: gray;
}
section h2 {
font-size: 2.5rem;
font-weight: normal;
margin-bottom: 0.5rem;
}
section p {
font-size: 2rem;
}
main a {
font-size: 2rem
}
footer {
font-size: 2rem;
}
}
@media(min-width: 980px) {}

BIN
img/Header.JPG Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 198 KiB

BIN
img/Helios.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 72 KiB

BIN
img/Me.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB