WDD 330 | Web Frontend Development II Resources

Web Frontend Development Resources

Please note that the resources listed here are for educational purposes only.
Some resources may require an free account or subscription. Most are free.
Some resources may have limitations on the number of requests.

HTML: Hypertext Markup Language

Official Documentation: HTML MDN Web Docs - MDN
- MDN Curriculum: Web Standards
- MDN Curriculum: Tutorials
- MDN Curriculum: Semantic HTML
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 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

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

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.webp
```
Generally, 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: The directory above the current directory.
```
../images/someimage.webp
```
Same Directory: The referenced file exists in the same directory of the current page.
```
products.html
```

Git and GitHub

LearnGit.io

Wireframing

Online Tutorials and Courses

LinkedIn Learning
W3Schools HTML | CSS | JavaScript | SASS | JSON | How To Snippets
CodeCademy Learn HTML & CSS | Make a Website
CodeCademy Cheatsheets
Python - finxter

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.

Resource Lists including Public APIs

Brad Traversy - Design Resources for Developers - Curated list of design and UI resources including templates, libraries, and frameworks.
Code Beautify - Code Formatter, JSON Beautifier, XML Viewer, Hex Converters
Public APIs - A collective list of free APIs for use in software and web development
Rapid API Collection of interesting APIs
JSON Placeholder mock REST API Service
mocky - Mock up custom APIs
Free APis

TensorFlow Lite - Machine Learning for Mobile and IoT Devices
Hemingway Editor
ChatGPT
Meta AI
Pika - video on demand

Organizations