Ruchita1010 / sign-up-form

Sign-Up Form for TheOdinProject

Home Page:https://ruchita1010.github.io/sign-up-form/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Sign Up Form

A fully responsive sign up form created using HTML and CSS!

Learnings

  • Some cool Emmet abbreviations: Remove Tag, Wrap with abbreviation, Evaluate Math Expressions, Go to Matching pair, Tag Balancing

  • The accent-color CSS property which sets the accent color for user-interface controls generated by some elements.

  • Organizing Form Elements: fieldset and legend

  • Button types: submit, reset, generic

  • How to Align multiline text fields[eg: textarea] with their labels (use vertical-align:top ๐Ÿ˜‰)

  • Difference between <input> type button and the equivalent <button> element

  • Imp note: For buttons that are used within a form for different purposes other than submitting the data, the type attribute should always be specified to avoid unwanted effects of submitting a form.

  • Input type -> file (for allowing multiple files to be selected, add the multiple attribute)

  • More advanced CSS selectors [Finally, understood pseudo classes and pseudo selectors ๐Ÿ˜‚]

  • Custom properties aka CSS variables

  • CSS functions: calc(), min(), max(), and clamp()

  • About white-space property and text-overflow: ellipsis

  • @font-face rule

Preview

image

Demo

๐Ÿ‘‰ Live Demo

About

Sign-Up Form for TheOdinProject

https://ruchita1010.github.io/sign-up-form/


Languages

Language:HTML 50.3%Language:CSS 49.7%