Pet Journey: Refactoring the pet-journey page by adding more content and styling with Sass(CSS preprocessor)

🎗️ Badges

🚀 Overview

According to Sass Document,

Sass is a stylesheet language that’s compiled to CSS. It allows you to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.

In this project, besides HTML, CSS and Javascript, Dart Sass, is taken into account to enhance the design of the user interface by taking advantage of ready-made Bootstrap components. Additionally, Autoprefixer is applied to help us taking care of browser support.

🔑 Key Topic

The following content will be covered in this README.md:

1. Learning Objectives
2. Requirements
3. Installation & Usage
4. Author
5. References & Helpful Links
6. Contributing
7. License

🧑‍💻 Learning Objectives

After fulfilling the project, I acquire knowledge to:

• Build and style static webpages with semantic HTML and CSS and Javascript
• Implement best practices and standards when structuring HTML files using nested elements, indentation, comments, and line breaks
• Implement the use of adding Images & Links into HTML and the box model for HTML elements
• Implement the use of Sassy CSS (.SCSS) extension in files and @mixin, @include, @use of Sass to advance the styling of the project
• Implement Sass styling via class, id and element selectors using external stylesheets and nesting styles
• Implement Glightbox to display video with Youtube, using Intersection Observer API to trigger animation based on document's viewport
• Implement a side page with a video background
• Implement Bootstrap styling, Google font, Font Awesome, CSS breakpoints, Mailchimp and Navigation with Responsive web design theory
• Perform common commands via the command line to interface with the operating system, such as navigating the file tree and creating, opening and comitting the file and directory to github
• Use Git workflow to initialize projects, track changes, and host via remote server
• Execute live deployment using GitHub Pages

📋 Requirements

Build a webpage that improve the content and styling of pet-journey

⚡ Installation & Usage

1. Cloning the project & rendering on your local browser

• The respository can be cloned as other github repository
• Then drag the index.html to your local browser

2. Using the live code

• Open your webbrowser
• Then add this link to your internet browser

👥 Author & Credit

Author:

• Nio Phan

💡 References & Helpful Links

• Version Control
• HTML
• CSS
• SASS
• Bootstrap
• Javascript
• Google Fonts
• Font Awesome
• Mailchimp
• Glightbox
• Intersection Observer API
• Pro Git

💭 Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to follow Common Guidlines as appropriate.

📝 License

MIT