BYU-Idaho | Software Development | Web Frontend Resources

Web Frontend Development Resources

This page contains a list of resources for web frontend development. It includes links to official documentation, tutorials, and other resources that can help you learn more about HTML, CSS, JavaScript, and other frontend technologies.

Tutorials

This are selected as relevant subjects to be used as supplemental, review material of basic concepts.

HTML and CSS — freeCodeCamp (🔥) Projects
JavaScript — freeCodeCamp (🔥)
- Basic JavaScript

🗒️ File Path Notation / References

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

Summary

Starting a path with "/" indicates to go to the root folder and start there.
Starting a path with "../" indicates to go one folder back and start there.
Starting a path with "../../" indicates to go two folders back and start there (and so on…).
Starting a path with "./" indicates to start in the current folder.
To move forward, start with the first sub-folder and keep moving forward.

Absolute URL Paths: Absolute path references are file path maps that use external resources 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 enabled space because you are working in a course repository/sub-directory.
Relative Path: The path to a file or folder relative to the current page. sub-folder: This example references an image named "profile.png" in a sub-folder named "images". See the example screenshot to the left.
```
<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 in that is located 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" file which file 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 of the current page.
```
products.html
```
Another method is 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 anchor 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".

Optional Resources

Working with Files – MDN
Anchors – MDN

HTML: Hypertext Markup Language

HTML is the standard markup language for creating web pages. It describes the structure of web pages using markup.

Official Documentation: HTML – MDN Web Docs
HTML Reference – htmlreference.io
w3c HTML 5.X Editor's Draft – w3c

CSS: Cascading Style Sheets

CSS is a stylesheet language that describes the presentation of an HTML document. It is used to style web pages written in HTML and XHTML.

Official Documentation: CSS MDN Web Docs – MDN
CSS Reference – cssreference.io
All the CSS Properties You Need to Know To Build a Website – dev.to
10 Modern Layouts (22 min) - Chrome for Developers
CSS Flex
- CSS Flexbox Layout Guide
- Flexbox Froggy Game
CSS Grid
- CSS Grid Layout Guide
- Grid Garden Game
- Align the Grid (4 min) - gridbyexample.com
- Align Grid Items (4 min) - gridbyexample.com
- CSS Grid Generator -cssgrid-generator

JavaScript

The JavaScript programming language empowers developers to create dynamic content, handle user input, manipulate the DOM (Document Object Model), build engaging user interfaces, and more.

MDN Web Docs: JavaScript Building Blocks | JavaScript Documentation
CodeCademy JavaScript Cheatsheets
API Documentation
22 JavaScript Functions You'll Use 99% of the Time
JSON: Learn JSON in 10 Minutes
JavaScript Tutorials: JavaScript.info
Online JavaScript Book: Eloquent JavaScript
15 JavaScript Array Functions You Should Master as a Senior Dev
ES15 Features – dev.to

Images and Graphics

Images and graphics can make or break a web design. They can help make your website more visually appealing, informative, and engaging.

Free Images/Photos: Unsplash | Pexels | Burst | Pixabay
Icons: iconfinder | Font Awesome | Icon Icons | Google Icons
Placeholders: picsum.photos | dummyimage | placeimg | 13 Placeholder Sites Ash Allen Design
Editing: Pixlr-x | Photopea | Remove Background | Squoosh | TinyPNG

Git and GitHub

Git is a distributed version control system that allows you to track changes in your code and collaborate with other developers. GitHub is a web-based platform that provides hosting for Git repositories and tools for collaboration.

Git – official documentation
Get Started with GitHub – official documentation
The Git Workflow
Error Messages / Hints / FAQs – Ralph Borcherds
Working in GitHub – Video Demonstrations

Wireframing

Wireframing is an essential part of the web planning and design process. It allows you to create a visual representation of your website's layout and structure before you start building it.

Design

Good design is essential for creating a successful website. It involves creating a visually appealing and user-friendly interface that engages users and helps them achieve their goals.

Design Resources for Developers – Brad Traversy
Code Beautify – Code Formatter, JSON Beautifier, XML Viewer, Hex Converters

Visual Studio Code (VS Code)

Visual Studio Code is a lightweight but powerful source code editor that runs on your desktop and is available for Windows, macOS, and Linux. It comes with built-in support for JavaScript, TypeScript, and Node.js and has a rich ecosystem of extensions for other languages (such as C++, C#, Python, PHP) and runtimes.

Installing and Customizing
Keyboard Shortcuts (pdf)
Visual Studio Code Tips and Tricks
Emmet Cheat-sheet
HTML Programming in VS Code
CSS, Sass, and Less
JavaScript in VS Code
Thunder Client – Lightweight Rest Client for testing APIs.

APIs

APIs (Application Programming Interfaces) are a set of rules and protocols that allow different software applications to communicate with each other. They enable developers to access data and services from other applications and use them in their own applications.

150+ FREE APIs – Dev.to
Public APIs - APILayer
Rapid API Collection of interesting APIs
mocky – Mock up custom APIs
Free APis – dev.to – APIs for your Projects

Artificial Intelligence (AI)

AI is the simulation of human intelligence processes by machines, especially computer systems. These processes include learning (the acquisition of information and rules for using the information), reasoning (using rules to reach approximate or definite conclusions), and self-correction.

Large Language Models: ChatGPT | Meta AI | Gemini
GitHub Copilot – Your personal tutor in VS Code
TensorFlow Lite – Machine Learning for Mobile and IoT Devices
Hemingway Editor – Analyze text for readability
Pika – video on demand

Official Standards Organizations

These organizations are responsible for developing and maintaining the standards that govern the web.

WHATWG community
W3C – The World Wide Web Consortium – HTML, CSS, and accessibility
ecma international – Javascript (ECMAScript)