Html & CSS Recap - Part 2

Hello Everyone, so we are here to regain some superpowers in CSS

Moving forward with adding CSS to our HTML which we created in the 1st part Html & CSS Part 1

if you haven't done the 1st part yet? don't worry

this is what we have achieved till now 👉 Codesandbox Link

text text and some images 🤔? that's what we can see in part 1

Thumb of the rule to remember: always first write your HTML part before styling your web app, website.

Enough talk now let's begin with styling 🥳

CSS Setup

• first, we need to link our index.css with index.html
• add <link rel="stylesheet" href="index.css" /> before closing </head> tag.
• after linking our CSS with index.html we can begin with styling part

Reset

• Browsers have some pre-defined margin&padding applied on DOM nodes (user agent stylesheet)
• To handle that we can write our own reset CSS or use the existing reset CSS template.
• Image Overflow due to variable size can be reset to 100% width of their container.

/* reset css */
body {
  margin: 0;
  padding: 0;
  text-align: center;
}

img {
  width: 100%;
}

Header Styling

....

header {
  background-image: url("https://images.unsplash.com/photo-1507992781348-310259076fe0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80");
  background-position: center;
  background-size: cover;
  padding: 16px;
  height: 50vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}

• Hmm 🙄, that's a lot of CSS for the header section, let's decode it one-by-one
• Header is a container that contains the title and paragraph text
• To center the inner content we have used the Header component as a flexbox
• we have used some background properties to display a responsive(flexible) background image🤩

Can you find out which CSS concepts are used in the above CSS block? 🤔 if not will mention at the end of the header section

Styling for child elements (title and text)

....

header .title {
  background-color: #1d3557;
  font-size: 32px;
  margin-bottom: 0;
}

header .text {
  background-color: #457b9d;
  font-size: 18px;
}

header > * {
  padding: 12px;
  border-radius: 10px;
  max-width: 350px;
}

• header > * selector select and style every element (* means ALL) where the parent is a <header>element
• Keypoint to note here is we have separated the common properties used for title and text following the DRY principle (Don't Repeat Yourself).
• whereas unique properties like different background colors are applied separately using the parent .class selector
• max-width plays an important role in the responsiveness of text here, at max it will expand 350px and at minimum screen size, it will adjust accordingly. (how amazing! right ?)

So many Concepts right?

• so were you able to map the CSS concepts?
• 1) Inheritance - color, color: white is inherited from the parent element (header) to child elements title and text
• 2) DRY - parent > * select all child element of header tag
• 3) Flexbox - for header container
• 4) Resources to learn more about this terms DRY, Inheritance, Flexbox

Let's have a quick check with the given Figma design

• header looks great! Time to move further

Main Section Styling

....

/* main section */

.main {
  display: flex;
  padding: 32px;
  background-color: rgba(241, 250, 238, 1);
  flex-direction: column;
}

• we are going to follow a flex-column layout for the main section.
• the above CSS properties will be general styling for the main section
• bg-color as given in the Figma design.

We have divided the Main section into two rows **main-title and activities**

.... 

.main-title {
  font-size: 24px;
}

.activities {
  display: flex;
  justify-content: space-around;
  align-items: start;
  flex-wrap: wrap;
}

• flexbox really comes in handy for the small component as well as bigger components.
• So done with the superficial layout of Main, let's deep dive into individual activity component

....

.activity {
  max-width: 250px;
  padding: 16px;
  margin: 8px 0;
}

.activity-img {
  width: 150px;
  border-radius: 50%;
  aspect-ratio: 1/1;
}

.activity-img:hover {
  transform: scale(1.1);
  transition: transform 200ms;
}

• max-width will limit the size of activity component when the screen size expands.
• padding, margin for adding some space around components to have a symmetry.
• Interesting part to note here is :hover psedo class which will be visible on a certain state of element
• In our case when we hover over image transform property will increase the size of image and transition will give a delay of 200ms in applying that effect so that it will looks like animation (moving 60fps).
• Resources for hover, transform, transition

Whoo! here we complete our 2nd component and moving forward to build the last peice of this webpage.

Contact Section Styling

....

/* Contact Section */

.contact {
  padding: 8px;
  margin: 16px 0;
}

• .contact is an container section that has some padding for space above and top of card.

Card Styling

....

.card {
  display: flex;
  justify-content: space-around;
  margin: 0 auto;
  border: 1px solid;
  max-width: 400px;
  padding: 8px;
  border-radius: 10px;
  border-bottom: 4px solid black;
  background: rgba(168, 218, 220, 1);
}

.card-img {
  width: 120px;
  border-radius: 10px;
}

.card-content {
  padding: 16px;
  max-width: 250px;
}

• We divided our card into two columns .card-img and .card-content
• .card contains general layout property using flexbox.

So that's complete our last piece of the puzzle.

Final Result we achieved following this article:

Summary of Hometown Homepage

• we covered a lot in HTML & CSS
• Most of the time we just need a recap of some basic concepts
• Building projects is the best way to regain and retain superpowers (skills) in web development
• Feel free to add comments on what you learn from this article
• Feel free to select your theme, images, and text content for this project ( can build for your Hometown ? )
• So now it's your turn to build and explore the concepts like flexbox, transform, transition, etc which you got to know in this article

Let's break the tutorial loop and regain the powers of HTML & CSS by building stuff.

Thank You 💖 Hare Krishna 🙏