Hi!... I'm Code Sleep
➤ About Me
I'm a front end developer...
➤ Title
Bootstrap Landing Page
➤ License
#MIT
➤ Username
codesleep
➤ Logo
➤ Description
A simple landing page made with Bootstrap 4
Features
- Modal
- Grid Layout
- Carousel
- Support Chat App
➤ Screenshots
➤ Usage
Educational exercise for using bootsrap 4
➤ Installation
npm install bootstrap@5.3.0-alpha3
-
Zip Method
Download zip file to local device and open it Then open folder your perfered way in Virtual Studo Code IDE Open the intergrated terminal and run the following command: ``` npm run dev ``` You will see: output below, then click this link to open App on your device ``` ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h to show help ``` Once opened **Paste** in a _url_ hit **enter** and wait for a _result_ to be proccessed (this will take a several seconds depending on connection as speed varies)
➤ CDN Links
CSS
https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css
JS
https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js
➤ Documentation
➤ Node.js 🔥
Node.js is an open-source, cross-platform, JavaScript runtime environment that allows developers to run JavaScript code outside of a web browser. It is built on top of the Google V8 JavaScript engine and provides an event-driven, non-blocking I/O model that makes it lightweight and efficient for building scalable network applications. With Node.js, developers can use JavaScript on both the front-end and the back-end of web applications, making it a popular choice for full-stack development. Node.js has a vast ecosystem of modules and packages available through npm (Node Package Manager), making it easy to add functionality and extend its capabilities. Node.js is widely used for building web servers, command-line tools, desktop applications, and more.
➤ Bootstrap
Bootstrap is a powerful and popular front-end framework that provides a collection of tools, components, and utilities for building responsive and visually appealing websites and web applications. It offers a comprehensive set of CSS and JavaScript components, as well as pre-designed templates, to facilitate the creation of consistent and professional-looking user interfaces.
- Responsive Grid System: Bootstrap Toolkit utilizes a flexible grid system that allows you to create responsive layouts for different screen sizes and devices. The grid system is based on a 12-column layout, which can be easily customized to suit your specific needs.
- CSS Components: Bootstrap Toolkit provides a wide range of reusable CSS components that you can use to enhance the appearance and functionality of your website. These include typography, buttons, forms, tables, navigation menus, alerts, badges, and much more. The components are designed to be easy to implement and customizable to match your project's design requirements.
- JavaScript Plugins: Bootstrap Toolkit offers a variety of JavaScript plugins that can add interactive features and behaviors to your website. Some of the commonly used plugins include carousels, modals, dropdowns, tooltips, popovers, accordions, and scrollspy. These plugins are built on top of jQuery, a popular JavaScript library.
- Customizable Themes: Bootstrap Toolkit allows you to customize the look and feel of your website by choosing from a range of predefined themes or creating your own. The themes provide a consistent and visually appealing design, ensuring that your website has a professional and polished appearance.
- Mobile-First Approach: Bootstrap Toolkit follows a mobile-first approach, meaning that its components and grid system are designed to work well on mobile devices and then scale up to larger screens. This ensures that your website is optimized for a wide range of devices and provides a seamless user experience.
- Integration and Extensibility: Bootstrap Toolkit can be easily integrated with other front-end frameworks or JavaScript libraries. It also provides an extensive set of customization options, allowing you to modify the framework's variables, styles, and functionality to suit your specific needs.
Overall, Bootstrap is a versatile and user-friendly framework that simplifies the process of building responsive and visually appealing websites. It is widely used by developers and designers to create modern and consistent user interfaces with less effort and time.
➤ Learned
Grid, Absolute, Relative, Fixed Attachment, Cover and Contain
➤ Tests
none
➤ Authors
Code Sleep
➤ Trademarks
This project may contain trademarks or logos for projects, products, or services. Authorized use of CSD trademarks or logos is subject to and must follow CSD's Trademark & Brand Guidelines. Use of CSD trademarks or logos in modified versions of this project must not cause confusion or imply CSD sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.
➤ VS Code - Extensions 💻
- Quokka.js
🤖 - ESLint
🔥 - Rapid API Client
🎯 - GitHub Actions
🆘 - Prettier
🔥 - Tabnine
🤖
➤ Going Forward
to be continued...........
➤ Contributing
====CHATGPT============BARD=============DALLE====
➤ Additional resources ⚡️
- Coding Addict
- Javascript Mastery
- MDN Web Docs
- Java Point
- Geeks for Geeks
- Node.js
- Rapid API
- GitHub Actions
THANK YOU FOR READING THIS REPO PLEASE VISIT AGAIN FOR MY LATEST PROJECTS!