Digital Product Design | Software Architecture | Tech Startup

Calculate Business Loan Payments, Interest, and Total Cost Easily and Accurately

Hi everyone!

If you're looking for extra capital to launch a startup or expand your existing business, it's important to know how much you'll need to repay—monthly and overall. Don’t commit to a loan without understanding the full picture. That’s where our Online Business Loan Calculator comes in handy.

This tool is designed for business owners, entrepreneurs, or anyone seeking a full breakdown of a loan. It helps you calculate monthly payments, total interest, repayment period, and overall cost automatically with just a few simple inputs.

How to Use the Business Loan Calculator

Fill in the following fields based on your situation:

Loan Amount (USD): Enter the total amount you want to borrow. Example: 80,000 Annual Interest Rate (%): Enter the yearly interest rate. Example: 8.5 Loan Term (years): How many years you want to repay the loan. Example: 7 Extra Monthly Payment (Optional) (USD): Add this if you plan to pay more than the minimum each month. Example: 200 

Click “Calculate” to get instant results—no login or signup needed.

What You’ll See

• Monthly Payment: Estimated monthly installment amount.

• Average Monthly Interest: Average interest paid per month.

• Total Interest: Total interest paid over the life of the loan.

• Repayment Duration: Estimated time to fully pay off the loan.

• Total Repayment: Total amount paid (principal + interest).

This helps you build a smarter financial strategy for your business.

Loan Formula Used

Monthly Payment (without extra payment):

P = (r × Principal) / (1 - (1 + r)^-n)

Where:

• P = monthly payment

• Principal = loan amount

• r = monthly interest rate (annual rate ÷ 12 ÷ 100)

• n = total number of months (loan term × 12)

Adding extra payments can shorten the loan term and reduce the total interest significantly.

Sample Loan Calculation

Note: This simulation is for illustration purposes only. Actual numbers may vary depending on your lender’s specific terms and fees.

Why Use This Business Loan Calculator?

• See estimated payments before applying

• Plan long-term repayment strategies

• Understand how extra payments impact your loan

• Instant results, no registration required

• Free and always available

Common Questions

How is this better than a standard amortization table?
Standard tables are fixed, while this calculator adapts to your inputs and shows results instantly.

What happens if I pay extra every month?
You can shorten your repayment period and reduce total interest significantly.

How accurate is this calculator?
It gives close estimates, but your lender may use slightly different formulas or include fees not covered here.

Do I need to sign up to use it?
Nope—just enter your loan details and see your results right away.

Start Calculating and Plan Smarter

With this calculator, you can take control of your business finances. Don’t let a loan become a burden—use this tool to make smarter decisions and help your business grow in the right direction!

Hi everyone!
If you’ve just finished learning about Flexbox, congrats! Flexbox is a great tool for arranging items in a single direction—either horizontally or vertically. But what if we want to build something more complex, like a layout with both columns and rows? That’s where CSS Grid becomes your new best friend.

In this article, we’ll explore the basics of Grid, compare it with Flexbox, and build a fun layout like a chessboard—all with just a few lines of code. Let’s jump in!

What is CSS Grid?

CSS Grid is a two-dimensional layout system that lets you organize content on a web page like pieces in a puzzle. Grid works in two directions—rows and columns—which makes it perfect for complex layouts like galleries, dashboards, or even news websites.

Image Illustration: A responsive weather forecast layout for Bern using grid-based sections.

With Grid, you can:

• Create flexible column and row structures

• Position items precisely on the page

• Maintain consistent spacing between items

• Build layouts that stay neat across different screen sizes (responsive design!)

CSS Grid vs Flexbox: What's the Difference?

You might wonder, "Isn't Flexbox also for layout? What's the difference?"

Let’s break it down:

Imagine you're placing a header, sidebar, main content, and footer. With Flexbox, you'd need nested divs and a bit of manual tweaking. With Grid, you can define it all directly in one container!

Image Illustration: Diagram showing the difference between 1D (Flexbox) and 2D (Grid) layout directions

Real-World Use: Combine Flexbox & Grid

Most developers don’t choose one over the other—they combine both!

Examples:

• Use Grid to define the major layout areas (header, main, footer)

• Use Flexbox inside those areas to align items in a row or column

"The more skills we carry, the more flexible we become." — Wise words from Grandpa :)

Try It Yourself: Grid vs Flexbox Example

To get a hands-on feel for the differences, check out this demo: dindindesign.com/p/css-grid-vs-flexbox.html

When you resize the browser:

• Grid keeps rows and columns aligned perfectly

• Flexbox allows flexibility but items might not line up consistently

Image Illustration: Screenshot comparing responsive layouts using Grid vs Flexbox

Let's Build Our First Grid!

Let’s start small with a simple example. Say we have the following HTML:

<div class="container">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
</div>

CSS Setup:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

Explanation:

• display: grid → Activates grid layout

• grid-template-columns: 1fr 2fr → First column takes 1 part, second takes 2

• grid-template-rows: 1fr 1fr → Two equal-height rows

• gap: 10px → Adds spacing between cells without needing margin

Image Illustration: A 2x2 grid layout where one column is twice as wide

Just like that, we’ve created a neat layout with minimal code!

Fun Challenge: Build a Chessboard!

Time to level up! Let’s build an 8x8 chessboard using CSS Grid. This challenge also introduces repeat() and paves the way for Grid Sizing.

HTML Structure:

Already pre-filled with 64 divs:

<div class="chessboard">
  <div class="white"></div>
  <div class="black"></div>
  <!-- 62 more -->
</div>

CSS Styling:

.chessboard {
  display: grid;
  grid-template-columns: repeat(8, 100px);
  grid-template-rows: repeat(8, 100px);
  width: 800px;
}

.white {
  background-color: #f0d9b5;
  width: 100px;
  height: 100px;
}

.black {
  background-color: #b58863;
  width: 100px;
  height: 100px;
}

Image Illustration: A modern chessboard layout with neutral square colors

What this does:

• Creates 8 equal columns and rows

• Defines each square as 100x100px

• Colors them accordingly

If your board stretches across a large screen, you can center it with margin: auto or tweak display styles for polish.

Why Does CSS Grid Matter?

CSS Grid lets us:

• Improve layout consistency

• Reduce unnecessary wrapper divs

• Build responsive layouts without heavy libraries

• Combine with Flexbox for full layout control

For modern web design, mastering Grid is a superpower that makes your pages cleaner, more efficient, and visually awesome.

Trusted source: MDN Web Docs on CSS Grid

Ready for the Next Adventure?

We’ve just scratched the surface of CSS Grid’s power. In the next post, we’ll dive into Grid Sizing—how to control column and row sizes flexibly, proportionally, or automatically.

Grid Sizing - How to Size Columns and Rows

Keep experimenting, keep building. Because as the old saying goes, skills are the only luggage that never weighs you down.

See you in the next post, friends!

If you’ve ever struggled to align elements neatly in CSS—or tried to make a layout look good on both desktop and mobile—Flexbox CSS is your new best friend. Short for "Flexible Box Layout," Flexbox is a layout module in CSS3 that provides an efficient way to distribute space and align items in a container, even when their sizes are dynamic.

In this flexbox tutorial for beginners, we’ll guide you step-by-step through what Flexbox is, why it’s essential for responsive design, and how to use it to build clean, adaptable layouts. By the end of this guide, you’ll be able to use Flexbox confidently to build elements like navigation bars, feature sections, and even a CSS flexbox pricing table example.

Whether you're a self-taught developer, a student, or someone shifting into a front-end career, Flexbox will become one of your most powerful tools in building responsive, user-friendly websites.

Before diving into the code, if you're not yet familiar with CSS fundamentals, check out our CSS basics tutorial on DindinDesign to get up to speed.

Let’s get started by understanding what Flexbox really is and why it matters in modern UI/UX design.

Display: Flex – Making Your Layouts Smarter

The heart of any Flexbox layout begins with one simple line of code:

display: flex;

This declaration transforms a regular HTML element into a CSS flex container, enabling a whole new way of aligning and distributing child elements. Once applied, the element's direct children become flex items—and that's when the magic begins.

What Happens When You Use display: flex

When you apply display: flex to a container, it changes the layout behavior drastically:

• The child elements (flex items) are aligned along a single axis by default.

• Items line up horizontally (row direction by default).

• Default browser rules like display: block or display: inline for children are overridden.

• The container becomes much more adaptive and responsive by nature.

Here's a basic example:

<div class="flex-container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

.flex-container {
  display: flex;
  gap: 1rem; /* Adds space between items */
}

With just these few lines, your three divs will now sit side-by-side, nicely aligned, with consistent spacing. That’s the flexbox basics in action.

Why Flexbox Is a Game-Changer

Before Flexbox, developers relied on float, inline-block, or even position: absolute to create horizontal layouts. These methods often required hacks, clearfixes, and lots of manual tweaking—making maintenance a nightmare.

Flexbox simplifies this by letting you:

• Control alignment vertically and horizontally

• Create responsive layouts with minimal effort

• Avoid weird spacing issues and collapsing margins

Bonus Tip: inline-flex

You can also use display: inline-flex if you want the container to behave like an inline element (taking only as much width as needed). This is useful for inline navigation menus or icon toolbars.

Learn More

If you’re curious about how this works under the hood, check out MDN’s display: flex guide and this excellent CSS-Tricks Flexbox guide.

Next up, we’ll dive into how to control the layout direction using the flex-direction property.

Flex Direction – Controlling the Flow of Flex Items

Now that you’ve turned a container into a CSS flex container using display: flex, the next big concept is understanding flex direction in CSS.

By default, Flexbox arranges items in a row, going from left to right. But what if you want your items to stack vertically, like a sidebar? That’s where the flex-direction property comes in.

.flex-container {
  display: flex;
  flex-direction: column;
}

Available Values for flex-direction

There are four main values you can use:

• row (default): Items flow from left to right.

• row-reverse: Items flow from right to left.

• column: Items stack top to bottom.

• column-reverse: Items stack bottom to top.

Main Axis vs Cross Axis

When you set flex-direction, you’re essentially defining the main axis for your layout:

• If flex-direction: row, the main axis is horizontal.

• If flex-direction: column, the main axis is vertical.

The cross axis is always perpendicular to the main axis. Understanding this helps when you start using other Flexbox properties like justify-content or align-items.

Why This Matters in Layouts

Let’s say you’re building a sidebar or mobile navigation menu—you’ll want items to flow from top to bottom, so flex-direction: column is the way to go. Need a horizontal nav bar? Stick with the default row.

You can also combine this with other properties like gap or flex-basis to fine-tune spacing and sizing along the main axis.

Try It Yourself

<div class="flex-column">
  <div>Box A</div>
  <div>Box B</div>
  <div>Box C</div>
</div>

.flex-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

Now your boxes will appear stacked vertically, with spacing in between.

For more guidance, see MDN's flex-direction docs.

In the next section, we’ll learn how to align and space items using justify-content and align-items.

Flex Layout – Aligning, Wrapping, and Spacing Made Easy

Creating a responsive CSS layout becomes far easier when you master Flexbox. It takes care of many layout challenges that used to require complex hacks. Whether you’re building navigation menus, card grids, or pricing tables, web layout with Flexbox is cleaner and more adaptable.

Controlling Spacing with gap

The gap property makes it easy to add consistent spacing between flex items without needing margin hacks:

.flex-container {
  display: flex;
  gap: 1rem;
}

This works both for horizontal and vertical directions, depending on your flex-direction.

Aligning Items with justify-content

To align items along the main axis, use justify-content:

.flex-container {
  display: flex;
  justify-content: space-between;
}

Available values include:

• flex-start

• flex-end

• center

• space-between

• space-around

• space-evenly

This lets you create elegant, adaptive spacing between items—great for responsive design on business websites.

Aligning Items on the Cross Axis with align-items

Use align-items to control alignment along the cross axis (vertical by default):

.flex-container {
  display: flex;
  align-items: center;
}

This is especially useful when vertically centering elements, a task that used to be tricky in older CSS.

Wrapping with flex-wrap

By default, Flexbox doesn’t wrap items to the next line. You can change this behavior with flex-wrap:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

Now your layout will gracefully wrap onto new lines on smaller screens—perfect for a responsive CSS layout.

Bonus: Rearranging Items with order

Flexbox lets you change the visual order of items without modifying the HTML:

.item-special {
  order: 3;
}

This gives you design freedom without sacrificing semantic structure.

Next, we’ll wrap up with some best practices and a motivational call to keep building and experimenting with Flexbox.

Flex Sizing – How Flex Items Grow, Shrink, and Size Themselves

One of the most powerful features of Flexbox is its ability to control how items grow, shrink, and size themselves inside a container. This is the essence of a truly responsive CSS layout.

Understanding flex sizing in CSS means mastering three key properties:

1. flex-grow

This property tells an item how much it can grow relative to its siblings when there’s extra space in the container.

.item {
  flex-grow: 1;
}

All items with flex-grow: 1 will divide the extra space equally. If one item has flex-grow: 2, it gets twice as much extra space as one with flex-grow: 1.

2. flex-shrink

This controls how much an item shrinks relative to others when space is limited.

.item {
  flex-shrink: 1;
}

If you set flex-shrink: 0, the item won’t shrink at all—even if the layout overflows. That can be handy for sticky UI elements.

3. flex-basis

This sets the initial size of the item before growing or shrinking happens. It behaves like width (or height, depending on direction), but it’s more flexible.

.item {
  flex-basis: 200px;
}

It acts as a starting point for Flexbox to calculate how to distribute space.

Putting It All Together: The flex Shorthand

You can combine all three properties in one line:

.item {
  flex: 1 1 200px; /* grow shrink basis */
}

Or use the most common pattern:

.item {
  flex: 1; /* Equivalent to 1 1 0 */
}

This shorthand is especially helpful when you want items to grow and shrink equally.

Common Flex Sizing Patterns

• Equal-width cards: flex: 1 on all items

• Sidebar and content: flex: 1 on sidebar, flex: 2 on content

• Fixed-size button: flex-shrink: 0; flex-basis: 100px;

A Note on Width and Flex-Basis

If both width and flex-basis are set, ``** wins**. Avoid setting both unless you know what you’re doing.

Learn More

Explore MDN’s flex documentation for the full spec, or revisit our internal tutorial on Flexbox spacing and alignment for more real-world examples.

Next, we’ll wrap things up with some final tips and encouragement for your CSS journey!

Mini Project: Pricing Table with Flexbox

Let’s put everything you’ve learned into action with a hands-on mini project! In this section, we’ll build a modern, responsive CSS pricing table using Flexbox.

This kind of flexbox UI component is common in business websites, SaaS landing pages, and product pricing interfaces—so it’s a great high-impact skill to learn. You’ll walk away with a layout that looks clean, works beautifully on all screen sizes, and can be adapted into real-world projects.

Step 1: Basic HTML Structure

Let’s assume you have a simple HTML setup with three pricing cards:

<div class="pricing-container">
  <div class="pricing-plan">
    <h2 class="plan-title">Basic</h2>
    <p class="plan-price">$9/mo</p>
    <ul class="plan-features">
      <li>1 Website</li>
      <li>Basic Support</li>
    </ul>
    <button>Select</button>
  </div>
  <!-- Repeat for other plans -->
</div>

Step 2: Layout with Flexbox

Apply Flexbox to the container:

.pricing-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
}

.pricing-plan {
  flex: 1;
  max-width: 400px;
  background-color: #f4f4f4;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
}

Now all your pricing plans sit side by side and scale evenly.

Step 3: Make It Responsive

Use a media query to stack the cards vertically on smaller screens:

@media (max-width: 900px) {
  .pricing-container {
    flex-direction: column;
    align-items: center;
  }
}

This is how you create a responsive pricing table layout without needing complex CSS.

Step 4: Styling Details

Add finishing touches like font sizes, colors, and spacing:

.plan-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

.plan-price {
  font-size: 2rem;
  color: #ff6600;
  margin-bottom: 1rem;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin-bottom: 1.5rem;
}

button {
  background-color: #ff6600;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 5px;
  cursor: pointer;
}

Want a refresher on media queries? Read CSS Media Queries Guide from MDN.

Real-World Use Cases

A well-designed pricing table like this is essential for landing pages, online service platforms, and SaaS products. With Flexbox, you can:

• Quickly adapt designs for different screen sizes

• Create UI components that are easy to maintain

• Avoid float-based or grid-heavy code for simple use cases

Want to dive deeper into layout techniques? Check out our guide to HTML & CSS for Landing Pages.

Next, we’ll close with some parting tips and motivation to keep learning CSS!

Tips on Building a Programming Habit

Well done for making it this far! Completing a full Flexbox tutorial is no small feat—you’ve earned a new belt in your front-end journey. Whether you’re aiming for a tech career or building your own websites, keeping a daily coding habit is the key to lasting progress.

Tag Your Coding to an Existing Habit

One simple way to build consistency is to attach learning CSS consistently to a habit you already have. For example:

• After your morning coffee, spend 30 minutes practicing CSS

• After lunch, review one layout concept

• Before bed, tweak your portfolio or revisit a Flexbox section

By tagging your coding time onto something you already do, it becomes easier to stick with.

Keep It Fun and Flexible

Not every day has to be intense. Some days, just reading an article or watching a short video counts. Other days, you’ll build mini-projects like our CSS pricing table. The important part is to keep moving forward—even in small steps.

Track Your Progress

Use a notebook, a habit tracker app, or even a calendar to mark your coding streaks. Seeing your effort add up is incredibly motivating!

Pro tip: Write blog posts or share mini projects on platforms like CodePen or GitHub to document your learning. You’ll thank yourself later.

Stay Connected and Keep Exploring

If you enjoyed this guide, there’s plenty more waiting for you:

• Explore more tutorials on CSS, HTML, and front-end projects

• Subscribe to the Dindin Design for fresh content

• Try a challenge from our Web Projects Series

Final Words

Remember: no one becomes a front-end developer overnight. But with consistency, curiosity, and just 30 minutes a day, you’ll be amazed how far you go.

You’ve got this. Keep going. We’re cheering you on.

Hi everyone!

Today we are going to explore something essential in web development, especially for those of us who want our websites to look great across every kind of screen. That topic is responsiveness. Once we understand the basics of CSS layout, the next important step is learning how to ensure our design adapts beautifully across a wide range of screen sizes — from large desktop monitors to compact mobile phones.

Let us try something fun together. Open any website, then slowly reduce the width of your browser window. Do you notice how the layout adjusts? Perhaps a wide navigation bar becomes a small button, or a row of images stacks vertically. That kind of transformation is exactly what responsive design is all about. It is the practice of making sure that a website remains functional, user-friendly, and visually pleasing, no matter the device used to view it.

To make this happen, CSS gives us some powerful tools and techniques. Let us go through them one by one and see how they work in practice.

Media Queries

Media queries are one of the main features in CSS that help us adapt the design based on screen size. They allow us to apply specific styles only when certain conditions are met. These conditions usually relate to the width of the screen, often called breakpoints.

Here is a basic example:

@media (max-width: 600px) {
  .navbar {
    display: none;
  }
}

This rule hides the navigation bar when the screen is 600 pixels wide or smaller. We can create multiple breakpoints for different devices such as tablets, phones, and desktops. Media queries give us precise control over how our layout behaves on each device.

CSS Grid

If we need a structured layout with rows and columns, CSS Grid is a great solution. It provides complete control over two-dimensional layout design. Here is an example of how we can create two columns and three rows:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 200px 200px;
  gap: 30px;
}

We can even make certain elements span across multiple rows or columns. This is perfect for organizing headers, main content areas, sidebars, and footers in a clean and structured way. Grid is extremely powerful when we want precision in layout alignment.

Flexbox

When the layout goes in a single direction — either horizontal or vertical — Flexbox shines. It is easy to use and helps us build flexible designs that adjust automatically based on space.

Suppose we have a row of boxes and want them to share space equally. Here is how we can do it:

.container {
  display: flex;
}
.card {
  flex: 1;
}

This gives each card equal space. We can also change the proportions:

.card:first-child {
  flex: 2;
}
.card:nth-child(2) {
  flex: 0.5;
}

Flexbox is great for distributing space, aligning content, and adjusting to different screen sizes without too much code.

Bootstrap

Sometimes we want to move faster without writing all the CSS ourselves. That is where Bootstrap becomes useful. It is a powerful CSS framework that provides pre-designed classes for layout, typography, buttons, and more. Bootstrap is based on Flexbox and comes with built-in responsiveness.

For example, here is how we can define columns:

<div class="col-6"></div>
<div class="col-2"></div>
<div class="col-4"></div>

Bootstrap uses a 12-column system. So a col-6 takes half the width of the container. We can also use responsive classes like col-md-6 or col-lg-4 to define how things should appear on medium or large screens. This makes it easy to design layouts that work well everywhere.

Final Thoughts

So friends, those are the four main tools for creating responsive websites:

• Media Queries

• CSS Grid

• Flexbox

• Bootstrap

Each has its own strengths. In many cases, combining them gives the best result. Think of them as tools in a toolbox — use whichever fits the job.

In our upcoming lessons, we will take a closer look at each technique, beginning with media queries, so we can learn how to use them effectively.

While waiting, feel free to open the practice project called 8.2 Responsiveness in VS Code. Try resizing the browser window, adjusting layout styles, and applying different breakpoints. Play with media queries, flexbox rules, and even try a bit of grid.

Let us keep exploring and building amazing things together. See you in the next session!

Hi everyone!

Now that we have explored the display property in CSS, it is time to dive into another foundational concept that has shaped web design for years — the float property. Even though newer layout methods like Flexbox and Grid are now widely preferred, learning how float works still adds a lot of value. It equips us to handle older projects, debug legacy code, or create simple layout tricks quickly.

What Float Does in CSS

The float property allows an element to shift to the left or right inside its container. This movement causes surrounding content — like text or other elements — to wrap around the floated item. Float was inspired by print-style layouts and has been a common technique for aligning images next to paragraphs or creating sidebar layouts.

Despite being somewhat outdated for modern complex layouts, float still has its use cases. Understanding how it works will prepare us for a wider range of situations in web development.

Floating Images Beside Text

Let us walk through a simple example. Suppose we have this HTML:

<img src="cat.jpg" alt="Cute Cat">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla euismod lorem at diam facilisis tincidunt...</p>

And here is the CSS to make it float:

img {
  float: left;
  margin-right: 10px;
}

The result is that the image moves to the left, and the paragraph wraps around it to the right. To float it on the other side, we could use float: right instead.

This method creates a tight visual connection between images and their corresponding text, making it especially useful for articles, profiles, or content-heavy pages.

Using Clear to Fix Layout Flow

Floated elements can sometimes cause problems in layout flow. If the next content block does not account for the float, it might appear beside the floated element instead of below it. For example:

<img src="cat.jpg" alt="Cute Cat">
<p>This is the main paragraph...</p>
<footer>Copyright 2025</footer>

Without any adjustment, the footer may float next to the image. To prevent this, we use the clear property:

footer {
  clear: both;
}

This ensures that the footer drops below the floated elements and restores the expected layout flow. Using clear: both is a simple but powerful way to maintain structure.

Building Columns with Float

We can also create simple side-by-side layouts using float. Take this example:

<div class="cat-block">Cat content goes here</div>
<div class="dog-block">Dog content goes here</div>
<footer>Footer content</footer>

And here is the CSS:

.cat-block {
  float: left;
  width: 45%;
}

.dog-block {
  float: right;
  width: 45%;
}

footer {
  clear: both;
}

This gives us two columns for Cat and Dog content placed side by side. The footer stays underneath both, spanning the entire width.

Illustration suggestion: Display two rectangular blocks labeled Cat and Dog horizontally aligned with some text or images inside. A full-width footer appears below them.

Hands-On Practice with Float and Clear

If we are working on the 8.1 CSS Float project files, here are some steps we can try to solidify what we have learned:

1. Float the images within each content block so that text wraps around them.

2. Apply float: left to the Cat block and float: right to the Dog block.

3. Use clear: both on the footer to ensure proper layout structure.

Doing these exercises will give us practical insight into how float and clear work together in real web layouts.

When to Use Float in Modern CSS

While Flexbox and Grid are now the default choices for layout, float can still be the right tool in some situations:

• Wrapping text around images in blogs or editorial layouts

• Making lightweight layout tweaks without full redesigns

• Working on older websites that were built before modern layout systems

Knowing when and how to use float will help us work efficiently across a broader range of projects.

Final Thoughts

Float has played a major role in the evolution of CSS layout techniques. While we may not rely on it as heavily today, having a good grasp of float and clear gives us a well-rounded understanding of how web design has progressed. It also equips us to handle legacy code or quick layout fixes confidently.

Next, we will dive into Flexbox — a more flexible and powerful system for building modern, responsive designs. Until then, keep practicing and enjoy the process of mastering CSS!

Hi everyone!

In this section, we are going to explore one of the most fundamental and powerful CSS tools — the display property. If we’ve ever worked on web layouts, chances are we’ve already encountered it, even if we didn’t realize its full potential. Now, it’s time to dig deeper and understand how this property shapes the layout of every webpage.

By learning how to use the display property properly, we unlock the ability to control how elements behave in a layout — whether we want them to appear in a row, stack vertically, or hide them from view altogether. The display property is what helps us create flexible, clean, and responsive layouts.

Block and Inline Elements in HTML

Before diving into CSS, let’s start with how elements behave by default in HTML. For instance, when using a <p> tag, we’ll notice that it stretches all the way across the container. That’s because it’s a block-level element.

Now let’s say we want a specific word in that paragraph to have a different style, without breaking the line. That’s where inline elements shine. Here’s a quick example:

<p>Hello, <span>Beautiful</span> World</p>

In this case, the <span> tag doesn’t break the flow — the word “Beautiful” stays on the same line. Inline elements stay in line with surrounding content and only occupy the space their content requires.

Recap:

• Block-level elements (like <div>, <p>, <h1>) always start on a new line and take up the full width.

• Inline elements (like <span>, <strong>, <a>) do not start on a new line and stay within the flow of text.

Three Essential CSS Display Values

CSS offers many display values, but these three are foundational:

1. block

2. inline

3. inline-block

Let’s break them down.

display: block

A block-level element:

• Starts on a new line

• Stretches across the entire width of the parent container

• Can be styled using properties like width, height, margin, and padding

Common examples include <div>, <section>, <article>, and <header>.

display: inline

Inline elements:

• Flow alongside other inline elements

• Ignore properties like width and height

• Only occupy space equal to their content

Elements like <span>, <strong>, and <a> are inline by default.

display: inline-block

This is the best of both worlds:

• Appears inline with other elements

• Supports width, height, margin, and padding

It’s perfect for items like buttons, menus, and navigation links that should sit side-by-side but still need custom dimensions.

Practical Example — Changing Layouts with Display

Let’s say we want to create three square boxes that appear side by side. Here’s the CSS:

.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: lightblue;
  margin: 10px;
}

If the screen is wide enough, the boxes appear in a row. Want them to stack vertically instead? Just change the display value:

.box {
  display: block;
  width: 100%;
}

This small change has a big impact on layout — and that’s exactly the kind of power CSS gives us.

Hiding Elements with CSS

Sometimes we need to temporarily hide elements. That’s where display: none comes in:

.hidden {
  display: none;
}

Unlike visibility: hidden, which only hides the element but leaves its space, display: none removes it entirely from the layout. This is especially useful for:

• Toggling menus

• Form steps

• Mobile navigation

Try It Yourself — Live Demo Playground

Want to practice this yourself? Check out this interactive example: https://css-display.vercel.app/

You’ll be able to:

• Compare block vs inline behavior

• Test inline-block layouts

• Change display styles and observe the results in real-time

Use developer tools in your browser to explore and experiment.

Also, try the mini-challenge in the 8.0 CSS Display project. Your task:

1. Make three boxes display side by side

2. Then stack them vertically

Just by updating one property — the layout changes completely.

Why the Display Property Is So Important

If we’re serious about web design, then mastering the display property is essential. It’s the building block of all layouts. Whether we’re creating a landing page, a portfolio, or an entire web app — understanding display behavior helps us:

• Fix common layout issues

• Manage spacing effectively

• Structure content with clarity

This foundation will also prepare us for more advanced layout systems like Flexbox and Grid, which we’ll explore soon.

So take your time to experiment with different display values. Observe how they behave across devices and browsers. Mastery here means smoother development later.

Keep building and see you in the next section!

Halo teman-teman!

Setelah kemarin kita belajar tentang warna di CSS, kali ini kita akan belajar sesuatu yang tidak kalah serunya, yaitu bagaimana mempercantik tulisan atau teks di halaman website kita dengan CSS.

Kamu tentu pernah melihat tulisan di website yang keren-keren, kan? Ada yang besar, kecil, tebal, tipis, bahkan ada juga yang menggunakan gaya tulisan unik. Nah, semuanya bisa kamu lakukan sendiri loh, dengan CSS!

Mengenal Font dalam CSS

Di CSS, ada banyak cara untuk mengubah tampilan tulisan atau teks. Berikut beberapa hal dasar yang perlu kamu ketahui:

1. Mengubah Ukuran Teks (font-size)

Ketika membuat website, kamu pasti ingin beberapa teks tampil lebih besar, seperti judul, dan beberapa teks lain lebih kecil, seperti isi paragraf. Di CSS, kita pakai yang namanya font-size untuk mengubah ukuran teks.

Contoh penulisannya begini:

h1 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

Kalau kamu tulis seperti itu, judul (h1) akan menjadi lebih besar daripada paragraf (p).

Ukuran dalam Pixel (px) dan Point (pt)

Kamu mungkin penasah nih, apa bedanya px dan pt?

• Pixel (px): Ini yang paling sering dipakai di website. Ukurannya sangat kecil, sekitar 0,26 mm.

• Point (pt): Ini sedikit lebih besar dari pixel, sekitar 0,35 mm. Biasanya dipakai dalam dokumen seperti di Microsoft Word.

Misalnya, ukuran font di Word yang sering kamu pakai seperti 12, 14, atau 16, sebenarnya itu pakai satuan point.

Ukuran Relatif: em dan rem

Selain px dan pt, ada ukuran lain yang disebut em dan rem. Ini unik, karena ukurannya tergantung pada ukuran font lainnya.

• em: Tergantung ukuran teks dari elemen induknya.

• rem: Tergantung pada ukuran font di elemen paling utama (biasanya elemen HTML).

Contoh pemakaiannya begini:

html {
    font-size: 16px; /* ukuran dasar */
}

h2 {
    font-size: 2rem; /* 2 kali ukuran dasar = 32px */
}

Kalau ukuran dasar HTML berubah, otomatis h2 juga ikut berubah.

Apa Bedanya em dan rem?

Kalau kamu menggunakan em, ukuran teks akan bergantung pada ukuran elemen induknya. Tapi kalau pakai rem, ukurannya bergantung pada elemen HTML yang paling atas. Jadi, rem biasanya lebih mudah dipakai karena tidak bingung dengan elemen induk lainnya.

Membuat Teks Tebal dengan Font-weight

Nah, kalau kamu ingin tulisan jadi lebih tebal atau tipis, kita gunakan font-weight. Ada beberapa cara untuk menggunakannya:

p {
    font-weight: bold; /* teks menjadi tebal */
}

h1 {
    font-weight: 900; /* teks menjadi sangat tebal */
}

Nilainya bisa pakai angka dari 100 sampai 900, makin tinggi makin tebal.

Memilih Jenis Huruf dengan Font-family

Pasti kamu pernah lihat ada teks dengan gaya tulisan yang keren seperti di poster atau di majalah online, kan? Di CSS, kamu bisa menentukan gaya tulisan yang ingin kamu gunakan dengan font-family.

Cara Menggunakan Font-family

Kamu bisa memilih jenis huruf seperti Arial, Helvetica, atau Times New Roman. Begini contoh penggunaannya:

h1 {
    font-family: "Times New Roman", serif;
}

p {
    font-family: Arial, sans-serif;
}

Kenapa ada dua nama? Itu supaya jika font pertama tidak tersedia, browser akan menampilkan font cadangan yang mirip jenisnya.

Jenis Huruf Gratis dari Google Fonts

Kalau kamu ingin menggunakan jenis huruf yang lebih keren lagi, kamu bisa kunjungi fonts.google.com. Di sana ada banyak sekali jenis font keren yang gratis.

Cara pakainya:

1. Pilih font favoritmu di Google Fonts.

2. Salin kode <link> yang disediakan.

3. Tempelkan di bagian <head> HTML-mu.

Contoh pemakaiannya begini:

<head>
    <link href="link-dari-google-font" rel="stylesheet">
</head>

<style>
h1 {
    font-family: 'Nama Font', sans-serif;
}
</style>

Sekarang teks kamu bisa tampil keren dengan jenis huruf yang dipilih sendiri!

Merapikan Teks dengan Text-align

Nah, selain ukuran dan jenis huruf, CSS juga bisa mengatur posisi tulisan loh, misalnya kiri, tengah, atau kanan.

Kita gunakan text-align seperti ini:

h1 {
    text-align: center; /* teks di tengah */
}

p {
    text-align: right; /* teks rata kanan */
}

Kalau ingin kembali ke posisi biasa, pakai left.

Praktik Langsung Yuk!

Coba sekarang kamu buat sendiri contoh sederhana seperti ini di komputer atau laptopmu:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Latihan CSS Font</title>
    <style>
        html {
            font-size: 18px; /* ukuran dasar */
        }
        h1 {
            font-family: 'Arial', sans-serif;
            font-size: 2rem; /* dua kali ukuran dasar */
            font-weight: 700;
            text-align: center;
            color: coral;
        }
        p {
            font-family: 'Times New Roman', serif;
            font-size: 1rem;
            font-weight: normal;
            text-align: justify;
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Belajar Font di CSS</h1>
    <p>
        Hari ini aku belajar cara mengubah ukuran, gaya, dan posisi teks menggunakan CSS. Ternyata gampang banget dan seru!
    </p>
</body>
</html>

Coba simpan dan buka hasilnya di browser, pasti tampil keren!

Mengapa Penting Mengatur Teks?

Mengatur teks dengan baik sangat penting, karena:

• Membantu pengunjung nyaman membaca.

• Tampilan website menjadi lebih menarik.

• Memudahkan pembaca memahami isi website kamu.

Tips Tambahan dalam Memilih Font

• Jangan terlalu banyak jenis font dalam satu halaman.

• Pilih font yang mudah dibaca.

• Gunakan ukuran font yang cukup besar supaya jelas terbaca.

Sekarang kamu sudah bisa mempercantik tampilan teks dengan CSS. Coba terus berlatih dan bereksperimen dengan berbagai jenis font, ukuran, dan warna yang kamu sukai.

Kalau masih bingung, jangan khawatir. Kamu bisa coba-coba atau tanyakan pada guru atau temanmu.

Semoga artikel ini bermanfaat ya, sampai jumpa di pembahasan seru lainnya!

Selamat belajar!

Halo teman-teman! Bagaimana kabarnya? Pada artikel sebelumnya kita sudah membahas tentang Mengenal CSS Selector (Cara Mengatur Tampilan Website dengan Tepat). Di sana, kita belajar bagaimana menargetkan Element tertentu di dalam HTML menggunakan CSS Selector. Teknik ini penting supaya kita bisa mengatur tampilan setiap Element website sesuai keinginan.

Nah, kali ini kita akan melanjutkan pembahasan ke topik yang tidak kalah seru, yaitu CSS Colours atau dalam bahasa Indonesia sering juga disebut warna CSS. Walau kedengarannya sederhana, penguasaan warna di CSS sangatlah berguna untuk membuat tampilan website menjadi lebih menarik. Jika sebelumnya kita hanya sempat menyinggung sedikit soal pengaturan warna di CSS, sekarang kita akan mendalaminya hingga tuntas!

Jika kamu siap, mari kita mulai petualangan warna kita di dalam dunia CSS!

Halo teman-teman, apa kabar kalian? Jika kalian punya blog atau website dan ingin banget meningkatkan penghasilan lewat Google AdSense, kalian berada di tempat yang tepat. Dalam artikel yang sangat panjang ini, kita akan kupas tuntas gimana caranya menaikkan Cost Per Click (CPC) dan Click-Through Rate (CTR), dua hal penting yang sangat memengaruhi besaran uang yang bisa kalian dapatkan dari iklan di blog.

Kita bakal bahas strategi-strategi jitu supaya blog kalian makin menarik di mata pengiklan. Dengan begitu, nilai klik (CPC) bisa melonjak, dan persentase pengunjung yang mengklik iklan (CTR) juga ikut naik. Kita akan bedah kenapa kedua hal ini krusial, gimana mengoptimalkan konten, cara memilih topik yang pas, sampai gimana menempatkan iklan dengan taktik yang tepat. Nggak ketinggalan, kita juga akan kupas soal SEO—karena kalau blog kalian gampang ditemukan di mesin pencari, jumlah pengunjung pasti meningkat. Lebih banyak pengunjung = lebih besar peluang klik = pendapatan blog yang makin mantap!

Kenapa artikel ini penting? Soalnya banyak banget blogger pemula yang pusing kenapa pendapatan AdSense mereka nggak meroket seperti harapan. Bisa saja topik blog kurang diminati pengiklan, atau penempatan iklannya kurang tepat, atau pengunjung yang datang memang bukan target yang diincar pengiklan. Semua pertanyaan ini akan kita jawab dengan bahasa yang simpel dan ramah, jadi santai aja, siapin camilan, dan mari kita melangkah bareng-bareng.

Catatan Penting: Tenang, di sini kita nggak akan menyebutkan rumus teknis atau formula yang ribet. Intinya, kalian akan tetap dapat esensi penting soal cara menaikkan CPC dan CTR, tanpa perlu pusing dengan angka-angka yang bikin migrain. Yuk, kita langsung jalan!

Di artikel ini, kita punya 20 bahasan utama, mulai dari dasar-dasar Google AdSense sampai strategi lanjutan untuk meningkatkan CPC, CTR, serta membangun traffic yang stabil. Kita juga akan bahas pentingnya menjaga kualitas, menghindari pelanggaran, dan kenapa strategi jangka panjang jauh lebih berguna daripada cara-cara instan. Nanti di akhir, semoga kalian punya gambaran lengkap buat bikin blog kalian lebih “moncer” dalam soal periklanan.

Oke, siap? Mari kita mulai!

Hello friends, how are you doing? If you own a blog or website and want to earn more revenue through Google AdSense, you’ve come to the right place. In this comprehensive article, we’re going to explore a variety of methods to increase your Cost Per Click (CPC) and Click-Through Rate (CTR), two crucial metrics that greatly influence how much you earn from ads on your blog.

We will dig into how to make your blog more appealing to advertisers so that the monetary value of each ad click (CPC) goes up, and the percentage of people who click on your ads (CTR) also rises. We’ll discuss why these two factors matter, how to optimize your content, strategies for choosing the right topics, and how to place ads strategically. We’ll also highlight the importance of SEO so that your blog becomes easier for people to find through search engines. With increased visibility in search results, you can attract more visitors—and with more visitors, your opportunities for higher ad clicks multiply, which ultimately boosts your blog income.

Why is this article so important? Many beginner bloggers are confused about why their Google AdSense income doesn’t grow as they expect. Perhaps their chosen topic isn’t in high demand among advertisers, or maybe their ad placement is not ideal, or the visitors aren’t aligned with what advertisers want. We’ll address these concerns in a simple, straightforward way. So get comfortable, grab some snacks, and let’s go step by step!

Important Note: We won’t delve into complicated formulas here. Don’t worry, you will still get all the essential information needed to improve your CPC and CTR, without headaches from too many numbers. Let’s keep it simple but thorough!

Below, you’ll find 20 sections covering everything from basic AdSense concepts up to advanced strategies for boosting both CPC and CTR. We’ll also explore how to build long-term blog traffic, keep readers engaged, and maintain ethical standards to avoid any penalty from Google. By the end of this article, you’ll have a well-rounded understanding of how to refine your AdSense strategy for better earnings.

Feel free to revisit specific sections as you implement these techniques on your own blog. Let’s begin!

Halo, Teman-Teman!

Belajar pemrograman itu menantang, ya? Selain mempelajari kode, seringkali kita juga harus menghadapi gangguan yang muncul, baik dari lingkungan sekitar maupun teknologi. Nah, kali ini saya akan berbagi tips mengatasi gangguan agar kamu bisa lebih fokus dan produktif saat belajar.

Mengapa Gangguan Menghambat Belajar?

Bayangkan ini: Kamu sedang fokus menulis kode, lalu tiba-tiba notifikasi di HP berbunyi. Kamu melihat pesan itu sebentar, tapi saat kembali ke pekerjaan, kamu merasa kehilangan fokus.

Ternyata, menurut penelitian, hanya satu menit gangguan bisa membuat kita butuh hingga 25 menit untuk kembali ke tingkat fokus semula. Jadi, gangguan kecil sekalipun punya dampak besar.

Tips Mengatasi Gangguan Saat Belajar Pemrograman

1. Simpan HP di Tempat Tersembunyi

HP adalah salah satu sumber gangguan terbesar. Untuk menghindarinya:

• Aktifkan mode pesawat.
• Simpan HP di laci atau tempat yang tidak terlihat.
• Gunakan aplikasi pemblokir notifikasi jika perlu.

Dengan begitu, kamu tidak akan tergoda untuk memeriksa HP setiap kali ada notifikasi.

2. Ciptakan Lingkungan Belajar yang Tenang

Kadang gangguan datang dari sekitar, seperti suara berisik atau orang yang sering mengajak bicara. Solusinya:

• Cari ruangan khusus untuk belajar.
• Beri tahu orang di rumah bahwa kamu butuh waktu untuk fokus.
• Gunakan earphone atau headphone untuk mengurangi kebisingan.

3. Pilih Waktu yang Tepat

Jika sulit mencari ketenangan, coba belajar di waktu tertentu:

• Pagi hari saat suasana masih tenang.
• Malam hari ketika aktivitas rumah mulai reda.

Menentukan waktu belajar yang tepat bisa meningkatkan konsentrasi secara signifikan.

4. Hilangkan Godaan Kecil

Ada banyak godaan lain yang mungkin mengganggu, seperti:

• Media sosial.
• Keinginan untuk membuka video hiburan.
• Kegiatan kecil seperti ngemil tanpa henti.

Untuk mengatasi ini, buatlah aturan sederhana, misalnya:

• Bekerja 25 menit tanpa gangguan, lalu istirahat 5 menit (metode Pomodoro).
• Hanya membuka media sosial setelah menyelesaikan target belajar.

Apa Manfaatnya?

Ketika gangguan berkurang, kamu akan:

1. Belajar lebih cepat: Karena tidak harus terus-menerus "mengulang fokus."
2. Meningkatkan kualitas belajar: Dengan konsentrasi penuh, pemahamanmu terhadap materi jadi lebih baik.
3. Merasa lebih puas: Menyelesaikan tugas tanpa gangguan memberikan rasa pencapaian yang menyenangkan.

Kesimpulan

Gangguan kecil bisa sangat menghambat proses belajar. Dengan mengurangi gangguan seperti notifikasi HP, suara bising, atau godaan lainnya, kamu bisa belajar pemrograman dengan lebih produktif dan efisien.

Cobalah tips di atas, dan lihat bagaimana fokusmu meningkat. Selamat belajar, dan jangan lupa terus berlatih! Sampai jumpa di artikel berikutnya. 

Halo, Teman-Teman!

Kali ini kita akan membuat sebuah proyek website sederhana yang membantu kita belajar nama-nama warna dalam bahasa asing, contohnya bahasa Spanyol. Proyek ini memanfaatkan HTML dan CSS yang sudah kita pelajari sebelumnya. Harapannya, sambil belajar cara menata tampilan situs, kita juga bisa menambah kosakata bahasa Spanyol. Yuk, kita langsung mulai!

Apa yang Akan Kita Buat?

Kita akan membuat sebuah website dengan daftar warna. Setiap warna akan ditampilkan dengan teks berwarna dan sebuah gambar kotak yang merepresentasikan warna tersebut. Sebagai contoh:

• Kata “Rojo” akan tampil dengan teks berwarna merah dan dilengkapi kotak berwarna merah.
• Kata “Azul” akan tampil dengan teks berwarna biru dan dilengkapi kotak berwarna biru.

Tujuan utama dari proyek ini adalah menciptakan tampilan web yang sederhana namun menarik, sekaligus berfungsi sebagai alat bantu untuk menghafal kosakata bahasa Spanyol terkait warna.

Persiapan dan Struktur Proyek

1. Buat Folder Proyek
   Pertama, siapkan sebuah folder khusus untuk proyek ini. Di dalamnya, kita akan menyimpan dua file penting: index.html dan style.css. Pastikan kamu menempatkan keduanya dalam lokasi yang mudah diakses di komputer.

2. Persiapkan File HTML (index.html)
   File inilah yang akan menjadi “kerangka” dari website kita. Di dalam file ini, kita membuat tag HTML dasar seperti <html>, <head>, dan <body>. Lalu, kita juga akan menambahkan:

   • <h1> untuk judul halaman, misalnya “Belajar Warna dalam Bahasa Spanyol”.
   • <h2> untuk menampilkan nama tiap warna.
   • <img> untuk menampilkan gambar kotak berwarna.

   Contohnya dapat dilihat di bawah ini:

   <!DOCTYPE html>
       <html lang="id">
       <head>
           <link rel="stylesheet" href="style.css">
           <title>Belajar Warna</title>
       </head>
       <body>
           <h1>Belajar Warna dalam Bahasa Spanyol</h1>
       
           <h2 id="red" class="color-title">Rojo</h2>
           <img src="red.jpg" alt="Kotak Merah">
       
           <h2 id="blue" class="color-title">Azul</h2>
           <img src="blue.jpg" alt="Kotak Biru">
       
           <!-- Kamu bisa menambahkan warna lainnya, misalnya Verde (hijau), Amarillo (kuning), dan seterusnya -->
       </body>
       </html>
       

3. Buat File CSS (style.css)
   File CSS digunakan untuk mengatur tampilan atau desain halaman. Berikut beberapa langkah yang bisa kamu lakukan:

   • Pengaturan Latar Belakang Halaman
     Pastikan file CSS sudah tersambung dengan benar. Caranya, masukkan kode sederhana seperti di bawah ini di awal file style.css:

     body {
             background-color: lightgray;
         }
         

     Jika di browser latar belakang halaman berubah menjadi abu-abu, artinya file CSS sudah terhubung dengan baik.

   • Memberi Warna pada Teks
     Kita akan menggunakan ID Selector untuk mewarnai teks setiap nama warna. Contoh:

     #red {
             color: red;
         }
         
         #blue {
             color: blue;
         }
         
         /* Tambahkan ID untuk warna lain, misalnya #green untuk 'Verde' */
         

     Dengan cara ini, teks “Rojo” akan otomatis berwarna merah, sedangkan teks “Azul” akan otomatis berwarna biru.

   • Pengaturan Font-Weight
     Kita mungkin ingin membuat tampilan teks tidak terlalu tebal. Kamu bisa menggunakan Class Selector seperti berikut:

     .color-title {
             font-weight: normal;
         }
         

     Hasilnya, semua elemen <h2> yang memiliki class “color-title” akan memiliki ketebalan huruf yang lebih ringan.

   • Penyesuaian Ukuran Gambar
     Supaya tampilan gambar kotak warna terlihat seragam, atur lebar dan tinggi gambar menggunakan Element Selector:

     img {
             width: 200px;
             height: 200px;
             display: block;
             margin: 10px auto;
         }
         

     Dengan begitu, setiap kotak akan berukuran 200x200 piksel dan berada di tengah (dengan margin: 10px auto;).

Menambahkan Warna dan Variasi

Agar website ini makin seru, cobalah menambahkan warna lain. Misalnya:

• Verde (Hijau)
• Amarillo (Kuning)
• Negro (Hitam)
• Blanco (Putih)

Setelah menambahkan <h2> dan <img> untuk masing-masing warna di index.html, jangan lupa menambah ID baru di style.css, misalnya:

#green {
        color: green;
    }
    
    #yellow {
        color: yellow;
    }
    
    /* Dan seterusnya */
    

Hal ini akan membuat website semakin kaya dan membantu kita mengenali lebih banyak kosakata bahasa Spanyol.

Hasil Akhir

Setelah semua langkah diterapkan, website kita akan memiliki ciri-ciri sebagai berikut:

1. Teks nama warna akan muncul dengan warna sesuai artinya.
2. Font lebih ringan dan terkesan rapi.
3. Gambar kotak untuk setiap warna akan berukuran seragam 200x200 piksel.

Melihat hasil akhirnya, kita bisa sekaligus belajar mengenali warna dan kosakata baru. Dengan terus menambahkan variasi warna, tampilan website akan semakin komprehensif dan edukatif.

Proyek sederhana ini memadukan keseruan belajar HTML dan CSS dengan mempelajari bahasa Spanyol. Kamu juga bisa mengaplikasikan konsep yang sama untuk bahasa lain, atau bahkan menambahkan fitur interaktif seperti kuis warna menggunakan JavaScript. Jangan lupa untuk terus bereksperimen dan menyesuaikan desain agar lebih menarik. Semoga proyek ini bermanfaat dan menambah semangat belajar kamu.

Selamat mencoba, dan kita akan berjumpa lagi di artikel seru selanjutnya!

Halo, Teman-Teman!

Pada artikel kali ini, kita akan membahas CSS Selector, yaitu cara untuk memilih elemen HTML mana yang ingin kita atur tampilannya menggunakan CSS. Dengan memahami CSS Selector, kamu bisa mengatur warna, ukuran, atau tata letak elemen di website dengan lebih mudah.

Apa Itu CSS Selector?

CSS Selector adalah bagian dari CSS yang digunakan untuk "menargetkan" elemen HTML tertentu agar gaya (style) bisa diterapkan pada elemen tersebut. Selector bekerja dengan cara membaca HTML dan memilih elemen yang sesuai, kemudian menerapkan aturan CSS yang kamu tulis.

Berikut ini adalah beberapa jenis CSS Selector yang sering digunakan:

1. Element Selector

Element Selector digunakan untuk menargetkan semua elemen dengan nama tag tertentu.

Contoh:

<h1>Judul</h1>
<h2>Subjudul</h2>

h1 {
    color: blue;
}

Hasilnya, semua elemen <h1> di halaman akan berubah menjadi biru.

2. Class Selector

Class Selector digunakan untuk menargetkan elemen-elemen dengan atribut class tertentu. Class dapat digunakan pada banyak elemen sekaligus.

Contoh:

<h1 class="judul-biru">Judul</h1>
<p class="judul-biru">Paragraf</p>

.judul-biru {
    color: blue;
}

Hasilnya, elemen <h1> dan <p> yang memiliki class="judul-biru" akan berubah menjadi biru.

3. ID Selector

ID Selector digunakan untuk menargetkan elemen dengan atribut id. ID bersifat unik, hanya boleh digunakan pada satu elemen per halaman.

Contoh:

<h1 id="judul-utama">Judul</h1>

#judul-utama {
    color: red;
}

Hasilnya, elemen <h1> dengan id="judul-utama" akan berubah menjadi merah.

4. Attribute Selector

Attribute Selector digunakan untuk menargetkan elemen berdasarkan atribut tertentu, seperti draggable atau href.

Contoh:

<p draggable="true">Bisa diseret</p>
<p draggable="false">Tidak bisa diseret</p>

p[draggable="true"] {
    color: green;
}

Hasilnya, hanya paragraf dengan draggable="true" yang berubah menjadi hijau.

5. Universal Selector

Universal Selector digunakan untuk menargetkan semua elemen dalam halaman HTML.

Contoh:

<h1>Judul</h1>
<p>Paragraf</p>

* {
    text-align: center;
}

Hasilnya, semua elemen akan diratakan ke tengah.

Latihan: Gunakan CSS Selector

1. Buat file HTML sederhana dengan beberapa elemen seperti <h1>, <p>, atau <div>.
2. Tambahkan class, id, atau atribut lainnya pada elemen-elemen tersebut.
3. Tulis aturan CSS untuk masing-masing selector di file CSS terpisah.
4. Lihat bagaimana selector bekerja untuk menargetkan elemen tertentu.

Kesimpulan

CSS Selector adalah alat penting untuk mengatur tampilan elemen HTML. Dengan memahami cara kerja element, class, ID, attribute, dan universal selector, kamu bisa mengatur desain website dengan lebih efisien dan terstruktur.

Di artikel berikutnya, kita akan membahas CSS Specificity, yaitu cara menentukan prioritas jika ada beberapa aturan CSS yang saling bertabrakan. Selamat mencoba, dan sampai jumpa! 

Halo, Teman-Teman!

Kali ini kita akan belajar tentang 3 cara menambahkan CSS ke HTML. CSS adalah cara terbaik untuk membuat website tampak menarik dengan warna, tata letak, dan font yang keren. Yuk, kita bahas cara menambahkannya ke dalam HTML!

Apa Itu CSS?

CSS adalah singkatan dari Cascading Style Sheets, yang digunakan untuk mengatur tampilan website seperti warna, tata letak, dan animasi. Dengan CSS, kita bisa memisahkan desain dari konten HTML, sehingga kode menjadi lebih rapi dan mudah dikelola.

Ada 3 cara utama untuk menambahkan CSS ke HTML:

1. Inline CSS
2. Internal CSS
3. External CSS

Setiap cara memiliki kegunaan yang berbeda. Berikut adalah penjelasan lengkapnya.

1. Inline CSS

Apa itu Inline CSS?
Inline CSS berarti menambahkan gaya langsung di elemen HTML menggunakan atribut style. Ini cocok untuk perubahan cepat pada satu elemen saja.

Contoh:

<h1 style="color: blue;">Halo, teman-teman!</h1>

Kelebihan:

• Mudah digunakan untuk mengubah elemen tertentu.

Kekurangan:

• Tidak efisien untuk mengatur banyak elemen.
• Membuat kode HTML terlihat berantakan.

2. Internal CSS

Apa itu Internal CSS?
Internal CSS ditulis di dalam tag <style> yang berada di bagian <head> pada dokumen HTML. Cara ini cocok untuk satu halaman website.

Contoh:

<!DOCTYPE html>
<html lang="id">
<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1>Halo, teman-teman!</h1>
</body>
</html>

Kelebihan:

• Semua gaya terpusat di satu tempat (di tag <style>).
• Cocok untuk halaman tunggal.

Kekurangan:

• Tidak efisien untuk website dengan banyak halaman.

3. External CSS

Apa itu External CSS?
External CSS ditulis di file terpisah dengan ekstensi .css, seperti style.css. File ini dihubungkan ke HTML menggunakan tag <link>.

Contoh:

<!-- File HTML -->
<!DOCTYPE html>
<html lang="id">
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Halo, teman-teman!</h1>
</body>
</html>

/* File style.css */
h1 {
    color: green;
}

Kelebihan:

• File CSS dapat digunakan di banyak halaman website.
• Mempermudah pengelolaan dan pembaruan desain.

Kekurangan:

• Membutuhkan pengaturan file tambahan.

Kapan Menggunakan Masing-Masing Cara?

1. Inline CSS:
   Gunakan hanya untuk perubahan kecil pada satu elemen.

2. Internal CSS:
   Cocok untuk proyek kecil atau halaman tunggal.

3. External CSS:
   Pilihan terbaik untuk proyek besar dengan banyak halaman. Ini juga merupakan standar di dunia pengembangan web.

Latihan: Tambahkan CSS ke HTML

Coba praktekkan 3 cara menambahkan CSS di atas. Buat file HTML sederhana, lalu tambahkan gaya menggunakan inline, internal, dan external CSS. Amati perbedaannya!

Kesimpulan

Menambahkan CSS ke HTML bisa dilakukan dengan 3 cara: inline, internal, dan external. Setiap cara memiliki kelebihan dan kekurangan, tergantung kebutuhan proyekmu. Di artikel berikutnya, kita akan belajar lebih dalam tentang selector CSS untuk menargetkan elemen tertentu dengan lebih fleksibel.

Selamat mencoba, dan sampai jumpa di artikel selanjutnya!