Software Development | Web Frontend Resources

Tutorials

These tutorials were selected as supplemental review material for basic concepts.

• Responsive Web Design – freeCodeCamp (HTML, CSS, and accessibility projects)
• JavaScript – freeCodeCamp

---

🗒️ File Paths and References

A file path is the specific location of a file or folder within a computer's or server's file system. It points to the file's exact directory structure.

• Absolute URL Paths: Absolute URLs give the full address of a resource and start with a protocol (like https).

  <a href="https://www.byui.edu/speeches/devotionals">

  <img src="https://resource.thesite.com/images/breakfast.svg">

• Server Root – Absolute Path: The root directory of the website/server.

  /images/someimage.webp

  Recommendation: Do not use this root directory type of notation when referencing assets on your pages in WDD courses. It may work locally but not on your GitHub Pages site because you are working in a course repository/sub-directory.

• Relative Path: The path to a file or folder relative to the current page. This example references an image named "profile.png" in a sub-folder named "images". See the example screenshot to the right.

  <img src="images/profile.png" alt="Xavier Rodriguez" width="100" height="200">

  This example references a file named "aboutus.html" which is located in the same folder as the referencing HTML file that is using an a anchor tag's href attribute. The file path is relative to the current file.

  <a href="aboutus.html">About Us</a>

• Parent Directory: To go back to the parent directory from the current directory, use ../ to reference the parent directory. This example references an image that is located in a folder in the parent directory of the current page.

  ../images/someimage.webp

  In this example, the img tag with src attribute is located in a file named "holygrail.html", which is in a sub-folder named "week02".

  <img src="../images/castle.jpg" alt="Castle Eltz in Germany" width="200">

• Same Directory: The referenced file exists in the same directory as the current page.

  products.html

  Another way to reference the current directory is to use the ./ notation at the beginning of the path. This is typically not necessary because it is implied and can lead to errors especially if you forget the . which then would make the reference a root-relative path / which has different results depending on the server.

• Element on the Same Page An element on the same page can be referenced by using the # symbol followed by the element's ID.

  <a href="#section-six">Section Six of the Report</a>

Basic Troubleshooting

• Make sure the file exists where you intended it to reside.
• Check the file path to make sure you are not pointing to the wrong folder or location.
• Check the spelling, including the case if necessary, of the file reference to make sure it matches the actual file name. Compare the reference to the given source.

  Example: Common Error – Letter case does not match

  In this example, the reference to the image found in an img tag within the index.html file is in error because the case is wrong.

  <img src="images/img_3324.jpg">

  In addition, this image file should NOT be left in this naming format. The image file should be given a simple, semantic name like "castle.jpg".

  

Common Naming Conventions in Programming

• Camel Case
  Each word within a compound word name is capitalized except for the first word.

  julySales, getNewReport()

• Pascal Case
  Each word within a compound word name is capitalized.

  JulySales, GetNewReport()

• Underscore or Snake Case
  Each word within a compound word name is separated by an underscore.

  july_sales, get_new_report()

• Kebab Case
  Each word is separated by a hyphen/minus sign.

  july-sales, get-new-report