⚡ Terracota App

• Single page optimised HTML-CSS-JS website to market a holiday home and aim for perfect SEO
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Terracota App
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-Do List
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Built with HTML, CSS and JavaScript with Bootstrap 5 CSS and Javascript
• Progressive Web App (PWA)
• CSS and Javascript are minimised to reduce initial render/First Contentful Paint time.
• SEO optimised

📷 Screenshots

.

📶 Technologies

• HyperText Markup Language HTML
• Cascading Style Sheets CSS styling

💾 Setup

• Open index.html using Visual Studio Live Server. Changes are updated automatically on server.

💻 Code Examples

• index.html extract showing how new format webp images are marked up in HTML

          <div class="carousel-item active">
            <picture>
              <source
                type="image/webp"
                class="d-block w-100"
                srcset="./images/bg/house-front.webp"
                alt="house front view"
              />
              <source
                type="image/jpeg"
                class="d-block w-100"
                srcset="/images/bg/house-front.jpg"
                alt="house front view"
              />
              <img
                src="/images/bg/house-front.jpg"
                class="d-block w-100"
                alt="house front view"
              />
            </picture>
            <div class="carousel-caption col-md-6 col-10 col-offset-md-6">
              <h1>Terracota</h1>
              <p class="carousel-image-text">
                Una vivienda moderna, muy bien equipada y muy confortable. En
                este alojamiento se respira tranquilidad: ¡relájate con toda la
                familia!
              </p>
            </div>
          </div>

🆒 Features

• Deployed to web
• SEO optimised

📋 Status & To-Do List

• Status: Working.
• To-Do: SEO

👏 Inspiration

• Anna Monus: 9 tricks to eliminate render blocking resources

📁 License

• This project is licensed under the MIT License - see the LICENSE file for details.

✉️ Contact

• Repo created by ABateman, email: gomezbateman@yahoo.com