Codeable - HTML & CSS Essentials

This is my first project of Codeable. Codeable is a peruvian bootcamp of full stack web development.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

• Make a separate HTML guide in 3 large parts: Typography, Elements and Blocks.

• The 3 parts will be on different pages and you can access each one from a sidebar.

• Also, each section should have a small sample of HTML code.

• It has no responsive design (for now)

Screenshot

Links

• Solution Link
• Live Site Link

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid

What I learned

I learned how to write html label as text inside another html tag.

<code class="code_line identation">
  <span class="code_line--tag">&lt;button</span>
  <span class="code_line--attribute">class=</span
  ><span class="code_line--value">&quot;button button--success&quot;</span
  ><span class="code_line--tag">&gt;</span>Apply now<span class="code_line--tag"
    >&lt;&sol;button&gt;</span
  >
</code>

Continued development

Now I will continue with another Codeable project.

Useful resources

I used the guides found on Codeable website. Only that.

Author

• Codeable - Codeable
• Twitter - @heraldofortuna

Acknowledgments

To Diego, Wences and Deyvi, my mentors.