├── .gitignore ├── README.md ├── cryptomasters └── urls.php ├── frontendmuseum ├── .DS_Store ├── background.css ├── data │ ├── data.db │ ├── data.json │ └── data.php ├── gallery │ ├── ancient-greece.png │ ├── ancient-greece.webp │ ├── aristotle.png │ ├── colorful-adaptations.png │ ├── data.json │ ├── fem.jpg │ └── sea-monsters.png ├── images │ ├── app-icon.png │ ├── app-icon.svg │ ├── gradient.png │ ├── logo.png │ └── logo.svg ├── index.html ├── script.js └── styles.css └── slides.pdf /.gitignore: -------------------------------------------------------------------------------- 1 | /.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![Frontend Masters](https://static.frontendmasters.com/assets/brand/logos/full.png)](https://frontendmasters.com/courses/php/) 2 | ## PHP Fundamentals Course 3 | This is a companion repository for the [PHP Fundamentals](https://frontendmasters.com/courses/php/) course on Frontend Masters. -------------------------------------------------------------------------------- /cryptomasters/urls.php: -------------------------------------------------------------------------------- 1 | "Life in Ancient Greek", 6 | "description" => "Uncover the world of ancient Greece through the sculptures, tools, and jewelry found in ruins from over 2000 years ago that have been unearthed through modern science and technology.", 7 | "image" => "ancient-greece.png" 8 | ], 9 | [ 10 | "title" => "Aristotle: Life and Legacy", 11 | "description" => "Explore the life and legacy of the great philosopher Aristotle, one of the most influential thinkers of all time. Through rare artifacts and ancient texts, learn about his ideas on ethics, politics, and metaphysics that have shaped the world for centuries.", 12 | "image" => "aristotle.png" 13 | ], 14 | [ 15 | "title" => "Chameleon: Colorful Adaptations", 16 | "description" => "Discover the amazing world of chameleons and their incredible ability to change color. Through interactive displays and live chameleon exhibits, learn about the science behind their color changing and how they use it to communicate and camouflage in their environments.", 17 | "image" => "colorful-adaptations.png" 18 | ], 19 | [ 20 | "title" => "Sea Monsters: Myth and Reality", 21 | "description" => "Dive into the world of sea monsters and explore the myths and legends that have captured our imaginations for centuries. Through fossils, ancient maps, and interactive displays, discover the truth behind the stories and learn about the real-life creatures that inhabit our oceans.", 22 | "image" => "sea-monsters.png" 23 | ] 24 | ]; 25 | 26 | ?> -------------------------------------------------------------------------------- /frontendmuseum/gallery/ancient-greece.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/php-fundamentals/5b7f995f30003d20de09c767f58b1274d13569ed/frontendmuseum/gallery/ancient-greece.png -------------------------------------------------------------------------------- /frontendmuseum/gallery/ancient-greece.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/php-fundamentals/5b7f995f30003d20de09c767f58b1274d13569ed/frontendmuseum/gallery/ancient-greece.webp -------------------------------------------------------------------------------- /frontendmuseum/gallery/aristotle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/php-fundamentals/5b7f995f30003d20de09c767f58b1274d13569ed/frontendmuseum/gallery/aristotle.png -------------------------------------------------------------------------------- /frontendmuseum/gallery/colorful-adaptations.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/php-fundamentals/5b7f995f30003d20de09c767f58b1274d13569ed/frontendmuseum/gallery/colorful-adaptations.png -------------------------------------------------------------------------------- /frontendmuseum/gallery/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Life in Ancient Greek", 4 | "description": "Uncover the world of ancient Greece through the sculptures, tools, and jewelry found in ruins from over 2000 years ago that have been unearthed through modern science and technology.", 5 | "image": "ancient-greece.png" 6 | }, 7 | { 8 | "title": "Aristotle: Life and Legacy", 9 | "description": "Explore the life and legacy of the great philosopher Aristotle, one of the most influential thinkers of all time. Through rare artifacts and ancient texts, learn about his ideas on ethics, politics, and metaphysics that have shaped the world for centuries.", 10 | "image": "aristotle.png" 11 | }, 12 | { 13 | "title": "Chameleon: Colorful Adaptations", 14 | "description": "Discover the amazing world of chameleons and their incredible ability to change color. Through interactive displays and live chameleon exhibits, learn about the science behind their color changing and how they use it to communicate and camouflage in their environments.", 15 | "image": "colorful-adaptations.png" 16 | }, 17 | { 18 | "title": "Sea Monsters: Myth and Reality", 19 | "description": "Dive into the world of sea monsters and explore the myths and legends that have captured our imaginations for centuries. Through fossils, ancient maps, and interactive displays, discover the truth behind the stories and learn about the real-life creatures that inhabit our oceans.", 20 | "image": "sea-monsters.png" 21 | } 22 | ] -------------------------------------------------------------------------------- /frontendmuseum/gallery/fem.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/php-fundamentals/5b7f995f30003d20de09c767f58b1274d13569ed/frontendmuseum/gallery/fem.jpg -------------------------------------------------------------------------------- /frontendmuseum/gallery/sea-monsters.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/php-fundamentals/5b7f995f30003d20de09c767f58b1274d13569ed/frontendmuseum/gallery/sea-monsters.png -------------------------------------------------------------------------------- /frontendmuseum/images/app-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/php-fundamentals/5b7f995f30003d20de09c767f58b1274d13569ed/frontendmuseum/images/app-icon.png -------------------------------------------------------------------------------- /frontendmuseum/images/app-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /frontendmuseum/images/gradient.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/php-fundamentals/5b7f995f30003d20de09c767f58b1274d13569ed/frontendmuseum/images/gradient.png -------------------------------------------------------------------------------- /frontendmuseum/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/php-fundamentals/5b7f995f30003d20de09c767f58b1274d13569ed/frontendmuseum/images/logo.png -------------------------------------------------------------------------------- /frontendmuseum/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /frontendmuseum/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | Frontend Museum 21 | 22 | 23 |

Frontend Masters Museum

25 |
26 |
27 |

Life in Ancient Greek

28 |

Uncover the world of ancient Greece through the sculptures, tools, and jewelry found in ruins from over 2000 years ago that have been unearthed through modern science and technology.

29 | 31 |
32 |
33 | 34 | -------------------------------------------------------------------------------- /frontendmuseum/script.js: -------------------------------------------------------------------------------- 1 | 2 | const obs = new PerformanceObserver(list => { 3 | const entries = list.getEntries(); 4 | console.log(entries); 5 | }); 6 | obs.observe({entryTypes: ["largest-contentful-paint", "layout-shift", "first-input", "paint"], 7 | buffered: true}); 8 | 9 | 10 | 11 | async function load() { 12 | const response = await fetch("gallery/data.json"); 13 | const data = await response.json(); 14 | data.forEach(exhibition => { 15 | const article = ` 16 |
17 |

${exhibition.title}

18 |

${exhibition.description}

19 | 20 |
21 | `; 22 | document.querySelector("main").innerHTML += article; 23 | }); 24 | } 25 | 26 | window.addEventListener("DOMContentLoaded", load); 27 | -------------------------------------------------------------------------------- /frontendmuseum/styles.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | font-family: 'Inter', sans-serif; 4 | padding: 0 40px; 5 | } 6 | 7 | article { 8 | margin: 18px; 9 | padding: 18px; 10 | border-radius: 25px; 11 | background-color: white; 12 | color: black; 13 | max-width: 500px; 14 | margin: auto; 15 | margin-bottom: 20px; 16 | } 17 | 18 | article img { 19 | width: 100%; 20 | } 21 | 22 | article h2 { 23 | font-size: 32px; 24 | font-weight: bold; 25 | margin: 0; 26 | } 27 | -------------------------------------------------------------------------------- /slides.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/firtman/php-fundamentals/5b7f995f30003d20de09c767f58b1274d13569ed/slides.pdf --------------------------------------------------------------------------------