updated comments to explain code as wel as added alt to all images

Birkbeck2 · Jan 3, 2024 · 3495ac4 · 3495ac4
1 parent 049d6dd
commit 3495ac4
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 41 deletions.
diff --git a/about.html b/about.html
@@ -1,13 +1,12 @@
- <!--This section defines...-->
+ <!--This section defines the type of document being used (HTML), the language the page is written in and the meta elements make the page responsive in terms of different viewports. It is here that the CSS stylesheet is linked as well. If I had any JS this would be linked in a simular way here. -->
 <!DOCTYPE html>
 <html lang="en-gb">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
 
-    <!--Font from Google-->
-
+    <!--Font from Google Fonts, this is also linked in CSS so it applies to text in the body of the website-->
     <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@600&display=swap" rel="stylesheet">
@@ -17,19 +16,20 @@
 <body>
 
     <header>
-        <!--image made by me on Canva-->
+        <!--image made by me on Canva, width and height set so that it preloads on the page-->
         <img id="logo" src="Images/logo-text.png" alt="text saying the three of us" width="200" height="200">
 
-          <!-- Navigation bar -->
+          <!-- Navigation bar, 3 classes so that different CCS styles can be apllied to each section such as the over all navigation, the links, and then the individual links -->
       <nav class="nav">
                   <ul class="nav-links">
           <li class="nav-page"><a href="index.html">Home</a></li>
-          <li class="nav-page"><a href="about.html">About</a></li>
+          <li class="nav-page"><a href="soon.html">About</a></li>
           <li class="nav-page"><a href="profiles.html">Profiles</a></li>
           <li class="nav-page"><a href="contact.html">Contact</a></li>
         </ul>
       </nav>
 
+      <!--Flexbox which contains the logo with lines on either side as a border-->
       <main>
         <div class="flex-container">
           <div class="flex-item"><hr class="line"></div> 
@@ -60,9 +60,9 @@
 
       <!--Social media icons which would link to social media pages-->
       <div id="social">
-      <img src="Images/icon1.svg" alt="">
-      <img src="Images/icon2.svg" alt="">
-      <img src="Images/icon3.svg" alt="">
+      <img src="Images/icon1.svg" alt="twitter logo">
+      <img src="Images/icon2.svg" alt="twitch logo">
+      <img src="Images/icon3.svg" alt="insta logo">
       </div>
 
 

diff --git a/asia.html b/asia.html
@@ -32,25 +32,23 @@
 </header>
 
 
-    <!--Gallery Flexbox/Grid-->
+    <!--Logo Flexbox-->
     <main>
-
-      <main>
         <div class="flex-container">
           <div class="flex-item"><hr class="line"></div> 
           <div class="flex-item1"><img src="Images/logo.png" alt="a blue and green globe with the website name, the three of us around the top" width="200" height="200"></div>  
           <div class="flex-item"><hr class="line"></div>   
         </div>
+
 <h1>Welcome to Asia ;</h1>
 
+<!--Gallery Flexbox, the flex1 so I can assign CSS styling (flex) to the section, in my stylesheet the img tag is also assigned so that I can manipulate the size using media query -->
     <section class="flex1">
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         <img src="Images/food-2362678_1920.jpg" alt="yellow bowl containing broth with potato snack" width="400" height="400">
         <img src="Images/ramen-7187810_1920.jpg" alt="bowl of ramen with boiled egg split in half" width="400" height="400">
         <img src="Images/sushi-354628_1920.jpg" alt="variety of sushi pieces" width="400" height="400">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-
-
       </section>
 
 </main>
@@ -71,9 +69,9 @@ <h1>Welcome to Asia ;</h1>
 
           <!--Social media icons which would link to social media pages-->
           <div id="social">
-          <img src="Images/icon1.svg" alt="">
-          <img src="Images/icon2.svg" alt="">
-          <img src="Images/icon3.svg" alt="">
+          <img src="Images/icon1.svg" alt="twitter logo">
+          <img src="Images/icon2.svg" alt="twitch logo">
+          <img src="Images/icon3.svg" alt="insta logo">
           </div>
 
 

diff --git a/contact.html b/contact.html
@@ -39,9 +39,8 @@
       </div>
   </main>
 
-<!--Form-->
+<!--Form for site visitors to sign up, share stories or request a country to be featured. the form tag instructs the browser to display what is coded between these tags in a form structure. This can be made functional with JS and backend databases. The label tag is what is displayed above the input box. 'for' is to define what the input will be. 'input' is what is expected to be entered, this could be date which would open up a calendar on some browers as default, you can also put number, or email as an example. 'select' creates a drop down option box, the 'value' allows you to enter as many options as you want for the user to chose from. For accessibilty, you can also begin typing letters to get to the country you want quicker than having to scroll or hold the down key-->
 <form>
-
     <div class="form">
       <form>
         <label for="fname">First Name</label>
@@ -314,10 +313,10 @@
 
     <!--Social media icons which would link to social media pages-->
     <div id="social">
-    <img src="Images/icon1.svg" alt="">
-    <img src="Images/icon2.svg" alt="">
-    <img src="Images/icon3.svg" alt="">
-    </div>
+        <img src="Images/icon1.svg" alt="twitter logo">
+        <img src="Images/icon2.svg" alt="twitch logo">
+        <img src="Images/icon3.svg" alt="insta logo">
+        </div>
 
     <p id="trademark">website made by woods91</p>
 

diff --git a/index.html b/index.html
@@ -1,25 +1,25 @@
-<!--This section defines the type of document being used (HTML), the language the page is written in and the meta elements make the page responsive in terms of different viewports -->
+<!--This section defines the type of document being used (HTML), the language the page is written in and the meta elements make the page responsive in terms of different viewports. It is here that the CSS stylesheet is linked as well. If I had any JS this would be linked in a simular way here. -->
 <!DOCTYPE html>
 <html lang="en-gb">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="style.css">
 
-    <!--Font from Google-->
+    <!--Font from Google Fonts, this is also linked in CSS so it applies to text in the body of the website-->
 
     <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=League+Spartan:wght@600&display=swap" rel="stylesheet">
 
-<!--Each title will have The Three of Us, plus which page you are on so the user can see this from the tab sectionon the browser-->
+<!--Each pages title will have The Three of Us, plus which page you are on so the user can see this from the tab section on the browser-->
     <title>The Three of Us - Home</title>
 </head>
 
 <!--Main body of page-->
 <body>
     <header>
-      <!--image made  by me on Canva-->
+      <!--image made by me on Canva-->
       <img id="logo" src="Images/logo-text.png" alt="text saying the three of us" width="200" height="200">
 
         <!-- Navigation bar -->
@@ -34,7 +34,7 @@
 
 </header>
 
-<!--Section contains..., images from Canva, free from artist Veii Rehanne Martinez (Sketchify)-->
+<!--Section contains a flex container so I could structure the webpage items which is some information text and fictional reviews-->
 <main>
   <div class="flex-container">
   <div class="flex-item"><hr class="line"></div> 
@@ -70,11 +70,11 @@
         </form>
       </div>
 
-      <!--Social media icons which would link to social media pages-->
+      <!--Social media icons which would link to social media pages but as this don't exist, I have not linked them to any website-->
       <div id="social">
-      <img src="Images/icon1.svg" alt="">
-      <img src="Images/icon2.svg" alt="">
-      <img src="Images/icon3.svg" alt="">
+      <img src="Images/icon1.svg" alt="twitter logo">
+      <img src="Images/icon2.svg" alt="twitch logo">
+      <img src="Images/icon3.svg" alt="insta logo">
       </div>
 
 

diff --git a/profiles.html b/profiles.html
@@ -74,10 +74,10 @@ <h1 id="label">Which continent would you like to explore?</h1>
 
       <!--Social media icons which would link to social media pages-->
       <div id="social">
-      <img src="Images/icon1.svg" alt="">
-      <img src="Images/icon2.svg" alt="">
-      <img src="Images/icon3.svg" alt="">
-      </div>
+        <img src="Images/icon1.svg" alt="twitter logo">
+        <img src="Images/icon2.svg" alt="twitch logo">
+        <img src="Images/icon3.svg" alt="insta logo">
+        </div>
 
 
       <p id="trademark">website made by woods91</p>

diff --git a/soon.html b/soon.html
@@ -56,11 +56,10 @@
       </div>
 
       <!--Social media icons which would link to social media pages-->
-      <div id="social">
-      <img src="Images/icon1.svg" alt="">
-      <img src="Images/icon2.svg" alt="">
-      <img src="Images/icon3.svg" alt="">
-      </div>
+      <img src="Images/icon1.svg" alt="twitter logo">
+        <img src="Images/icon2.svg" alt="twitch logo">
+        <img src="Images/icon3.svg" alt="insta logo">
+        </div>
 
 
       <p id="trademark">website made by woods91</p>