Web Frontend Development Resources
The resources listed here are for educational purposes only.
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.
- Absolute URL Paths: File paths map URLs (web addresses). Example:
https://www.byui.edu/speeches/devotionals - Server Root - Absolute Path: The root directory of the website/server.
/images/someimage.webpRecommendation: 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.
images/someimage.webp - 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 - Same Directory: The referenced file exists in the same directory of the current page.
products.html
HTML: Hypertext Markup Language
- Official Documentation: HTML MDN Web Docs - MDN Web Docs
- HTML Reference - htmlreference.io
- w3c HTML 5.X Editor's Draft - w3c
CSS: Cascading Style Sheets
- 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 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
- 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
- Placeholder Data jsonplaceholder.org
- 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
- 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
Wireframing
Online Tutorials and Courses
Design
- Design Resources for Developers - Brad Traversy
- Code Beautify - Code Formatter, JSON Beautifier, XML Viewer, Hex Converters
Visual Studio Code (VS Code)
- Online Editor
- Download
- 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
- 150+ FREE APIs - Dev.to
- Public APIs - APILayer
- Rapid API Collection of interesting APIs
- JSON Placeholder mock REST API Service
- mocky - Mock up custom APIs
- Free APis
AI
- TensorFlow Lite - Machine Learning for Mobile and IoT Devices
- Hemingway Editor
- ChatGPT
- Meta AI
- Pika - video on demand