Blackie

Posted on Dec 6, 2023 • Edited on Dec 31, 2023

Part 5: All You Need to Know to Master Web Development With HTML CSS and JavaScript

#webdev #javascript #beginners #css

Getting Started With CSS Framework

Custom properties and variables
CSS Frameworks
Bootstrap
TailwindCSS
References and Resources

CSS Custom Properties and Variables

CSS custom properties (aka CSS variables or cascading variables) allow you to store and reuse values throughout your stylesheet.They act as placeholders for values that can be easily changed in one place, affecting all styles that use them.

Benefits:

Maintainability: Reduce code duplication and make your styles more organized and easier to update.
Themeability: Easily switch between different themes by changing only the values of custom properties.
Dynamic styles: Create dynamic styles that react to user interaction or browser features using JavaScript.

How to use them:

Declare the custom property:
- Using two dashes as a prefix (--variable-name: value;)
- Using the @property at-rule (@property --variable-name { syntax: <value-type>; initial-value: value; })
Use the var() function to access the value (background-color: var(--primary-color);)

Key points:

Custom properties are scoped to the element(s) they are declared on and participate in the cascade.
They can be used to store all types of CSS values, including colors, lengths, fonts, and even complex calculations.
Values can be overridden by declarations with higher specificity.
JavaScript can be used to access and modify custom properties dynamically.

Use Case: Theme Switching with CSS Custom Properties

Imagine you're building a website with two distinct themes: light and dark. You want to make it easy for users to switch between these themes on the fly.

Without Custom Properties:

You would need to duplicate your entire stylesheet, replacing all the color values for each theme. This would lead to a lot of code duplication and make it difficult to maintain.

With Custom Properties:

Define custom properties for your primary colors:

Use these custom properties throughout your stylesheet:

Create buttons or a toggle to switch the values of the custom properties:

By changing the values of just these four custom properties, you can instantly switch the entire theme of your website. This demonstrates the power and flexibility of CSS custom properties.

CSS Frameworks

CSS frameworks are pre-built collections of CSS styles that provide a solid foundation for web development. They offer pre-defined styles for common elements like buttons, forms, and grids, saving you time and effort.

Benefits:

Faster development: Jumpstart your project with ready-made styles and components.
Consistency: Ensure consistent design across your website.
Responsiveness: Many frameworks provide responsive design features, making your website look good on all devices.
Community and resources: Access a large community of developers and extensive documentation for support.

Popular Frameworks:

Bootstrap: Widely used, mobile-first framework with a vast library of components.
Tailwind CSS: Utility-first framework for building custom designs with low-level classes.
Material Design: Google's framework based on their design principles, offering a clean and modern aesthetic.
Foundation: Flexible framework with a focus on accessibility and modularity.
Bulma: Lightweight and minimalist framework with a focus on simplicity.

Choosing a Framework:

Consider your project needs, desired level of customization, and team experience when choosing a framework.

Key Points:

Frameworks can simplify development but may add complexity and bloat to your code.
Learn the framework's core principles to leverage its full potential.
Customize the framework to suit your specific needs and brand identity.

Bootstrap

Quickstart
Skip the setup, jumpstart your web project with Bootstrap's CDN!

Create a new index.html file in your project directory and create the basic boilerplate.

Include Bootstrap's .min.css in your <head> for styling and Add Bootstrap's .bundle.min.js before closing <body> for interactivity (includes Popper for dropdowns etc.).

Project 1: Arsenal Vibes

jrshittu / Arsenal-Vibes

Building a football news site with Bootstrap

Arsenal Vibes

A bootstrap tutorial, source for the latest Arsenal news, transfers, videos, opinions, and more! a part of All you need to master Web development with HTML, CSS & Javascript Series.

Features

Stay up-to-date with all the latest Arsenal news and updates
Explore in-depth articles, videos, and opinions
Enjoy a visually appealing and user-friendly interface
Get involved in discussions with other Arsenal fans

Technologies Used

HTML
CSS
Bootstrap
WebP and AVIF image formats

Structure

Header: Navigation, search, and subscription options
Main Content:
- Featured post
- Two additional posts
- "More in News" section
Sidebar:
- About section
- Recent posts

Contributing

We welcome contributions from the Arsenal community! Please feel free to submit pull requests or create issues to suggest improvements.

License

MIT License: https://opensource.org/licenses/MIT

Contact

JR Shittu - jrshittu@gmail.com

Additional Notes

Consider adding a footer for copyright information, contact details, and links.
Integrate social media buttons to encourage sharing and engagement.
Implement…

View on GitHub

Check the finished project here👇

jrshittu.github.io

TailwindCSS

Quickstart
Skip the setup, jumpstart your web project with tailwindcss's CDN!

Create a new index.html file in your project directory and create the basic boilerplate, then add the cdn link in the head section.

Project 2: Arsenal Vibes with TailwindCSS

jrshittu / Arsenal-Vibes-TailwindCSS

Arsenal-Vibes-TailwindCSS

Source for the latest Arsenal news, transfers, videos, opinions, and more! a part of All you need to master Web development with HTML, CSS & Javascript Series.

Features

Stay up-to-date with all the latest Arsenal news and updates
Explore in-depth articles, videos, and opinions
Enjoy a visually appealing and user-friendly interface
Get involved in discussions with other Arsenal fans

Technologies Used

HTML
CSS
TailwindCSS
WebP and AVIF image formats

Structure

Header: Navigation, search, and subscription options
Main Content:
- Featured post
- Two additional posts
- "More in News" section
Sidebar:
- About section
- Recent posts