Testing My Work

HTML-CSS
1

I’ve created a few front end screens that have no back end support, as yet. Some of them will need additional code when I get around to back end coding, no doubt. Nothing is hosted on the web yet, but I was wondering how I might best go about testing to be sure they don’t get corrupted as I continue to develop my website. All of them were committed in git as I finished them and have been updated in git when I’ve made changes.

Can anyone suggest how to go about setting up a test? All of the files are in a root folder on my G: drive. I tried to create a menu screen but I can’t get the links I coded to work. I ran my HTML through and online checker/delinter and found not problems. I’ve searched and I’ve re-read lesson modules until I can no longer see the problem with fresh eyes. My HTML for the menu is below.

G:–
|______A-Projects
|
|________BiographyPage
|________Lineage
|________DataEntry
|______Individuals
|______Marriages
|______Offspring
|______Deaths
|______Images

<html lang="en">
  
  <head>  <!--  BEGINNING OF HEAD SECTION   -->
      <meta charset="UTF-8">
      <meta name="description" content="Hutchins Clan Biography">
      <meta name="keywords" content="HTML, CSS, JavaScript, Hutchins, biography">
      <meta name="author" content="Robert Hutchins">
      <meta http-equiv="refresh" content="30">
      
    <title>Main Menu</title>

    <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Birthstone">
    
    <link
    rel="stylesheet"
    href="menu.css">
    
   
    <style>
      /*  ALL STYLING IS IN EXTERNAL CSS FILES; SEE LINKS IN HEAD SECTION   */
      </style>

  
      <!--All style selectors placed in one CSS File -->
    
  </head> <!--  END OF HEAD SECTION   -->
  
     
    <body>  <!-- BEGINNING BODY SECTION 
                 (PAGE CONTENT) -->
                           
      <div class="line-page"><!--  Defines page 
                              border and background  -->
        <div class="masthead">
          <div class="masthead-line1">
            The Hutchins Clan
          </div>
          <div class="masthead-line2">
            Main Menu
          </div>
        </div>  <!--   END of .masthead-->
        <div class="menu-frame">
          <div class="menu">
            <a href="/biographypage/index.html">Biography Page
            </a><br>
            <a href="/lineage/index.html">Lineage Page
            </a><br>
            <br>Data Entry Screens:<br>
            <a href="/dataentry/index.html">Individual Entry
            </a><br>
            <a href="/dataentry/marriage.html">Marriage Entry
            </a><br>
            <a  href="/dataentry/offspring.html">Offspring Entry 
            </a><br>
            <a href="/dataentry/death.html">Death Entry
            </a><br>
            <a href="/dataentry/photodrop.html">Image Entry
            </a><br>
          </div>
      </div>  <!--  End of .menu  -->
      </div>
    
    </body> <!--  END BODY SECTION
                  (PAGE CONTENT)  -->
  
  </html>
2

More information is needed, how are you running this VScode or notepad. I’m not sure what you mean because it has to be ran first to see what is going on with the links. Is there some reason you are not using https://url <a href="https://www.yourhomepage.com">Visit our homepage</a>

1 Like
3

I’m so ignorant I don’t understand your response.

The code came straight from VS Code. I occasionally create a workpad file in a project so that I can manipulate code there before I use it in the ‘real’ VS Code file, but that is not the case in my example.

I didn’t use the form, https:// url. . . , because the code that I want to invoke from the menu is not on the web. It resides on my system in the same root directory as the html that creates the menu.

From all I’ve read online, I should be able to link to another html file on my system from within an html file. If my syntax is wrong, please correct me. I’m a blind squirrel lookin’ for an acorn here.

4

Open the folder the where the files are located (use Explorer on Windows on Finder on Mac).

Then open the index.html, index.htm, or the main HTML page for the project using your default browser.

5

More about testing:
My project demands that I create a test environment in order to move ahead. I need advice about how to do this.

Do I need a local server to have a test environment, or is it possible to create a test environment on my webhost’s platform where servers and SQL and PHPAdmin exist for my use? In either case, I need to know what to do to create a test environment. If I create a local host test environment, what do I need to set up to make my local machine act as if it were a web host? Do I need Xampp? What else?

A good wiki on this subject would be very helpful if you know of one.

6

Here is an article with an overview on back-end testing.

I hadn’t realised you were moving on from the front end.

Copy and paste the link into your browser. There maybe a typo or broken link somewhere.

Happy coding