DEV Community

AB
AB

Posted on

TIL - Html and CSS

#html #css #webdev #frontend

Why HTML and CSS Are Still the Building Blocks of the Web

It's easy to get caught up in the excitement of powerful back-end languages like Ruby, Python, and Node.js (JavaScript). With so much focus on frameworks like Ruby on Rails or React, it can be tempting to overlook the foundational languages of the web: HTML and CSS. However, regardless of whether you're working with the LAMP stack or the modern MERN stack, a strong understanding of these two is non-negotiable. Without them, even the most sophisticated back-end logic would have no face for users to interact with.

Think of it this way: HTML provides the structure, the skeleton of your web page. It defines the content, headings, paragraphs, and buttons. On its own, a web page is functional but visually plain and unengaging.

A Simple HTML Structure

<div class="card">
  <h3>My Post Title</h3>
  <p>This is the content of my amazing blog post.</p>
  <button>Read More</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Here's what that code looks like with just raw HTML:

Image of card element with no style

This is where CSS comes in. It's the style, the design, the personality of your website. CSS takes that raw HTML structure and transforms it from a simple document into a visually appealing and intuitive user interface. By adding a few lines of CSS, we can completely change the look and feel, making the same HTML content feel polished and professional.

Adding CSS to Bring it to Life

.card {
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 24px;
  background-color: #ffffff;
  max-width: 300px;
  margin: 20px;
  transition: transform 0.3s ease-in-out;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.card h3 {
  color: #333;
}

.card p {
  color: #666;
}

.card button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
Enter fullscreen mode Exit fullscreen mode

And here's the dramatic difference that a little bit of CSS makes:

Image of card element with css style added to it

The simple HTML div is now a visually appealing "card" with a subtle shadow, rounded corners, and a hover effect that makes it feel interactive. The button has a clean style and a smooth color transition. This small example demonstrates how CSS empowers us to create a rich and engaging experience for the user, turning a functional component into a delightful one. No matter what your back-end stack is, mastering HTML and CSS is the key to building a front-end that people love to use.

Top comments (0)