3: Bootstrap Template
Use a Bootstrap template to produce a stunning webpage.
Learning Targets
I can build a hero with a call to action.
I can implement a color palette via CSS.
I can build a responsive Bootstrap website.
I can implement Bootstrap classes and components into a website.
What is Bootstrap?
Read about it. Twitter publishes a front-end framework that has significantly impacted web designers. It's great, and you'll spend a lot of time with its documentation.
What is responsive?
Responsive design isn't just about websites looking good on different screens; it's about delivering an optimal user experience on any device. Imagine navigating a complex website on a tiny phone instead of a spacious desktop – the frustration is real! Responsive design solves this by adapting the website's layout, content, and functionality to various screen sizes, ensuring a seamless user journey.
Bootstrap's Grid System:
Bootstrap, a popular framework, makes responsive design accessible. Based on 12 columns, its grid system provides a flexible layout structure. In your example, <div class="col-md-6"> and <div class="col-lg-6"> define elements that occupy 6 columns on medium and large screens, respectively.
Breakpoints and Device Adaptation:
The magic happens with breakpoints and specific screen widths where the layout adjusts. Bootstrap uses predefined breakpoints for @media queries, essentially saying, "When the screen size reaches X, apply these styles." Your task with the inspector window is to find these breakpoints! Look for @media rules defining styles for lg, md, and sm (small) screens. Notice how Bootstrap adjusts the number of columns these classes occupy at each breakpoint.
Exploring Device-Specific Adjustments:
While Bootstrap offers a solid foundation, sometimes device-specific tweaks are necessary. For example, on smaller screens, you might:
Collapse content sections by default and use buttons or icons to reveal them.
Increase font sizes for better readability.
Simplify navigation menus or switch to hamburger menus for better accessibility.
Optimize images for faster loading times.
Beyond Bootstrap:
Remember, Bootstrap is a tool, not a silver bullet. You might need to go beyond its base styles as your projects evolve. This is where understanding CSS media queries and flexbox becomes crucial for more granular control over responsive layouts.
Beyond Screen Size:
While the screen size is the primary factor, a responsive design also considers other aspects:
Device orientation: Portrait and landscape modes on phones and tablets require different layouts.
Resolution: High-resolution displays might necessitate adjustments for image quality and text sizes.
Network speed: Consider loading optimizations for users with slower connections.
The Importance of Testing:
Responsive design isn't a one-and-done task. Rigorous testing on various devices and screen sizes is crucial. Use browser emulators and real devices to identify and fix any layout issues and ensure a consistent user experience across platforms.
Optional Button Drill
Here's another fun exercise. Let's open up https://codepen.io/ again, set up Bootstrap, and customize a button. Check out some simple examples from the ever-helpful W3schools: https://www.w3schools.com/csS/css3_buttons.asp
Look at some of the coolest CSS buttons.
Bootstrap 2 Project
Replit: Our Cloud-Based IDE
What is Replit? Replit is an online platform that acts as an Integrated Development Environment (IDE). Think of it as a workspace in your browser where you can write code, run your website, and collaborate with others in real time.
How does it work in class? Instead of downloading templates, each student will have a pre-provisioned copy of the chosen StartBootstrap template ready to use in Replit. This eliminates the need for individual downloads and setups.
Pros of using Replit:
Convenience: No setup required, access your project from any device with internet.
Collaboration: Work with classmates on your website in real time.
Pre-configured environment: Everything you need to start coding is already set up.
Cloud storage: No need to worry about losing your work; it's automatically saved online.
Cons of using Replit:
Limited customization: Replit may have limitations compared to desktop IDEs like VS Code in terms of customization and plugin options.
Offline access: You need an internet connection to access your project in Replit.
,VS Code with Downloaded Template:
What is VS Code? VS Code is a popular, downloadable code editor for your computer. It provides powerful features like syntax highlighting, code completion, and debugging tools.
Using VS Code: You can download the StartBootstrap template yourself and open it in VS Code for editing.
Pros of using VS Code:
More customization: VS Code offers extensive customization options with plugins and themes, catering to your preferred development style.
Offline access: Work on your website even without an internet connection.
Advanced features: Powerful debugging tools and code analysis features for more in-depth development.
Cons of using VS Code:
Setup required: You must download and install VS Code and the template.
No real-time collaboration: Working with classmates requires additional tools or sharing downloaded files.
Storage management: You're responsible for saving and backing up your project files.
The Choice is Yours!
Both options have their merits, and the best choice depends on your personal preferences and learning style.
For beginners: Replit's easy access and collaboration features might be ideal.
For experienced programmers: VS Code's customization and offline capabilities could be more appealing.
Download a StartBootstrap Template:
Visit StartBootstrap (https://startbootstrap.com/) and browse their collection of free templates.
Choose a template that suits your project's needs.
Click on the template's preview page and find the download button.
Select the option to download the zipped file.
Save the downloaded file to a convenient location on your computer.
Open the Template in VS Code:
Open VS Code.
Go to File > Open Folder.
Select the unzipped folder containing the downloaded template.
Click Open. This will open the entire template structure within VS Code.
Create a Custom CSS File:
Within VS Code:
Go to File > New File.
Name the file custom.css.
Save the file in the appropriate location within your project folder (usually the root directory).
Open a Preview of the Site:
In VS Code:
Right-click on the index.html file and select Open with > Live Server.
This will launch a local preview of the website in your default browser.
Make Changes and Refresh:
Edit the HTML and CSS files directly within VS Code to customize the website.
Update your custom.css file with desired styles.
Save your changes.
The Live Server preview will automatically refresh, reflecting your latest edits.
Continue Building:
Use the template's structure and provided classes as a starting point.
Add your own content and modify the HTML as needed.
Refer to the template's documentation for available components and their usage.
Use your custom.css file to personalize the design further.
Keep making changes, saving, and refreshing to see your progress unfold.
Additional Tips:
Regularly save your project folder to Google Drive for backup and collaboration.
Explore Bootstrap's extensive documentation and online resources to learn more about its features and customization options.
Remember, practice makes perfect! Start with this guide, experiment, and have fun creating your unique website!
In the same folder, create a new file: custom.css. Next we'll need to connect the css file to the folder html file.
Video Walkthroughs
Last updated
