Creating a Responsive Web Page Header Using HTML and CSS

Introduction

• Tutorial on creating a web page header section using HTML, CSS, and JavaScript.
• Features include a navigation bar, animated text, buttons, and a gradient background.

Key Features of the Web Page

• Navigation Bar:
  • Contains a logo, menu links, and a button.
  • Sticky (fixed) navigation that remains at the top on scrolling.
• Responsive Design:
  • Adjusts layout for mobile devices.
• Animated Text:
  • Text animation for visual appeal.
• Toggle Menu:
  • Smooth animation for showing/hiding menu links on mobile.

File Structure

• Files created:
  • index.html
  • style.css
  • Folder for images and icons.

HTML Structure

1. Basic HTML structure with meta tags, title, and link to CSS.
2. Create navigation bar using <nav> tag.
3. Add logo and menu links within <ul> and <li> tags.
4. Create a button with class navBTN.

Example HTML Snippet

<nav>
  <img src="images/SL_logo.png" class="logo">
  <ul>
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
  <button class="navBTN">Get Started</button>
</nav>

CSS Styling

• Added global selectors for margin, padding, and font family.
• Navigation bar styles:
  • position: fixed;, display: flex;, align-items: center;, etc.
  • Styled buttons and links for better presentation.

Example CSS Snippet

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

JavaScript for Toggle Menu

• Simple JavaScript to handle menu toggle on smaller screens.
• Function toggleMenu that adds/removes a class to display/hide menu links.

Example JavaScript Snippet

function toggleMenu() {
  let menuLinks = document.getElementById('menuLinks');
  menuLinks.classList.toggle('showMenu');
}

Media Queries for Responsiveness

• Used media queries to adjust styles for screens smaller than 600 pixels.
• Hides the original button and shows a menu icon in mobile view.

Example Media Query

@media only screen and (max-width: 600px) {
  nav ul {
    position: absolute;
    width: 100%;
    display: none;
  }
  .menuIcon {
    display: block;
  }
}

Final Touches

• Added animations to the header text using CSS keyframes.
• Ensured the layout is visually appealing and functional on both desktop and mobile views.

Conclusion

• Completed a responsive web page header using HTML, CSS, and JavaScript.
• Encouraged viewers to ask questions and subscribe for more tutorials.