CSS Programming Fundamentals | Web Development

Introduction

In this lab, we will be exploring the fundamentals of CSS programming. The purpose of this lab is to help you gain a solid understanding of CSS syntax, selectors, properties, and values. By completing this lab, you will be able to style HTML elements and create visually appealing web pages.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/DynamicStylingGroup(["`Dynamic Styling`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/DynamicStylingGroup -.-> css/transitions("`Transitions`") css/DynamicStylingGroup -.-> css/transformations("`Transformations`") css/IntermediateStylingGroup -.-> css/pseudo_classes("`Pseudo-classes`") subgraph Lab Skills css/selectors -.-> lab-35206{{"`CSS Fundamentals for Web Styling`"}} css/margin_and_padding -.-> lab-35206{{"`CSS Fundamentals for Web Styling`"}} css/borders -.-> lab-35206{{"`CSS Fundamentals for Web Styling`"}} css/width_and_height -.-> lab-35206{{"`CSS Fundamentals for Web Styling`"}} css/display_property -.-> lab-35206{{"`CSS Fundamentals for Web Styling`"}} css/flexbox -.-> lab-35206{{"`CSS Fundamentals for Web Styling`"}} css/backgrounds -.-> lab-35206{{"`CSS Fundamentals for Web Styling`"}} css/transitions -.-> lab-35206{{"`CSS Fundamentals for Web Styling`"}} css/transformations -.-> lab-35206{{"`CSS Fundamentals for Web Styling`"}} css/pseudo_classes -.-> lab-35206{{"`CSS Fundamentals for Web Styling`"}} end

Hamburger Button

index.html and style.css have already been provided in the VM.

To create a hamburger menu that transitions to a cross button on hover, follow these steps:

Use a .hamburger-menu container div which contains the top, bottom, and middle bars.
Set the container to display: flex with flex-flow: column wrap.
Add distance between the bars using justify-content: space-between.
Use transform: rotate() to rotate the top and bottom bars by 45 degrees and opacity: 0 to fade the middle bar on hover.
Use transform-origin: left so that the bars rotate around the left point.

Here's the corresponding HTML code:

<div class="hamburger-menu">
  <div class="bar top"></div>
  <div class="bar middle"></div>
  <div class="bar bottom"></div>
</div>

And here's the CSS code:

.hamburger-menu {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
}

.hamburger-menu .bar {
  height: 5px;
  background: black;
  border-radius: 5px;
  margin: 3px 0px;
  transform-origin: left;
  transition: all 0.5s;
}

.hamburger-menu:hover .top {
  transform: rotate(45deg);
}

.hamburger-menu:hover .middle {
  opacity: 0;
}

.hamburger-menu:hover .bottom {
  transform: rotate(-45deg);
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Hamburger Button lab. You can practice more labs in LabEx to improve your skills.

CSS Fundamentals for Web Styling

Introduction

Skills Graph

Hamburger Button

Summary

Other CSS Tutorials you may like