HTML & CSS Fundamentals

This repository documents my learning journey through HTML and CSS, starting with my initial studies at HyperionDev and now continuing with the intensive 100Devs bootcamp. It serves as a public archive of my notes, projects, and progress.

---

🎯 Purpose of This Repository

This repository is a living document of my web development education. Its primary goals are to:

• Track Progress: Chronicle my learning from HyperionDev and the 100Devs curriculum.
• Showcase Projects: Display practical HTML & CSS work inspired by courses and personal challenges.
• Reinforce Learning: Act as a reference for best practices in semantic HTML, modular CSS, and accessibility.
• Foster Collaboration: Invite feedback and contributions from the 100Devs community and other developers.

📚 Learning Notes & Key Takeaways

I believe in learning in public. Here are my structured notes from the foundational courses that have shaped this repository.

• HTML & CSS Advanced

  • Notes from the Advanced HTML & CSS reading about Media Quries to create flexible, responsive designs.
  • [➡️ View Notes ](Advanced HTML & CSS)

• Developing Stylish Websites

  • Takeaways from Shay Howe's "Learn to Code HTML & CSS", focusing on building a complete website from scratch.
  • ➡️ View Notes: building-your-first-website.md

• Learn Layouts

  • "Learning Layouts",tutorial, covering the box model, positioning, and Flexbox.
  • ➡️ View Notes: HTML Layout-Notes

🛠️ Core Concepts & Contents

This repository contains guides and practical examples covering the following areas:

Category	Topics Covered
Typography	Font properties, text alignment, web-safe fonts, and embedding custom fonts.
Backgrounds & Gradients	Solid colors, images, linear/radial gradients, and multiple backgrounds.
Structure & Layout	Lists, media embedding (images, audio, video), accessible forms, and data tables.
Best Practices	Semantic HTML, modular CSS, organized syntax, and maintainable code.
Accessibility	alt attributes, ARIA roles, proper form labeling, and other accessibility features.
Responsive Design	Examples optimized for various devices, inspired by modern frameworks.

Code Example: Styled Navigation Menu

Here is a sample of a styled navigation menu from the repository, inspired by Shay Howe's lessons.

<nav class="navigation">
  <ul>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Settings</a></li>
    <li><a href="#">Notifications</a></li>
    <li><a href="#">Logout</a></li>
  </ul>
</nav>

.navigation ul {
  font: bold 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}
.navigation li {
  display: inline-block;
}
.navigation a {
  background: linear-gradient(#49708f, #293f50);
  border-right: 1px solid rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 12px 20px;
  text-decoration: none;
}

🤝 Contributions & Community

Feedback and collaboration are welcome! In the spirit of the 100Devs community, feel free to open an issue or submit a pull request for suggestions, bug fixes, or enhancements.

🙏 Acknowledgments

• 100Devs: For an inspiring, supportive, and community-driven learning environment.
• Shay Howe: For a clear and structured HTML/CSS course that perfectly complements my bootcamp learning.
• The Open-Source Community: For the wealth of incredible resources that make this journey possible.

---

🔗 Resources & Tools

Click to view the full list of learning resources, tools, and inspiration

HTML & CSS Learning

• 100Devs Official Website: Community-driven bootcamp.
• Shay Howe’s Learn to Code HTML & CSS: Beginner-friendly course.
• MDN Web Docs: Comprehensive HTML and CSS documentation.
• HTML Dog: Beginner-friendly tutorials.
• Opera Dev: Developer resources.
• DevDocs: Quick reference for web technologies.

Design Inspiration

• Dribbble: Creative design ideas.
• Premium Pixels: Free design resources.

Frameworks & Style Guides

• Web Style Guide: Principles for effective web design.
• Bootstrap: Responsive framework for rapid development.
• Foundation: Flexible framework for responsive sites.
• Skeleton: Lightweight CSS framework.
• Google HTML/CSS Style Guide: Best practices for clean code.
• GitHub Style Guide: Code styling standards.

Icons

• Helveticons: Premium icon sets.
• Yusuke Kamiyamane Icons: Free icons.
• Pictos: Vector icon sets.
• The Noun Project: Extensive icon library.
• Ionicons: Free, scalable icons.
• Silk Icons: Classic icon set.
• Picons: Premium icons for web design.

Miscellaneous

• Colour Lovers: Color palettes and inspiration.
• ColorHexa: Color information and tools.
• Modernizr: Feature detection for browser compatibility.
• jQuery: JavaScript library for DOM manipulation.
• Google Hosted Libraries: CDN for common libraries.
• Copy Paste Character: Special characters for web design.

Contributions

I welcome feedback and collaboration from the 100Devs community and other developers! Please open an issue or submit a pull request for suggestions, bug fixes, or enhancements, especially for accessibility or cross-browser compatibility. Let’s build together, keeping with the 100Devs spirit of kindness and community.

Acknowledgments

• HyperionDev: Starting my journey forward into a new skillset.
• 100Devs: For an inspiring, supportive learning environment and community-driven curriculum.
• Shay Howe: For a clear and structured HTML/CSS course that complements my bootcamp learning.
• Open-Source Community: For the wealth of resources that fuel this project.

Key Citations

• 100Devs Official Website
• Shay Howe’s Learn to Code HTML & CSS

Explore the repository for detailed guides and code samples, and follow my journey as I grow as a web developer!