https://github.com/salvillalon45/theodinproject-htmlforms

[The Odin Project: HTML & CSS] - Project: HTML Forms
https://github.com/salvillalon45/theodinproject-htmlforms

css3 html5 netify

Last synced: 11 months ago
JSON representation

[The Odin Project: HTML & CSS] - Project: HTML Forms

• Host: GitHub
• URL: https://github.com/salvillalon45/theodinproject-htmlforms
• Owner: salvillalon45
• Created: 2022-01-05T18:37:18.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-06T01:42:20.000Z (over 4 years ago)
• Last Synced: 2025-02-21T23:31:38.700Z (over 1 year ago)
• Topics: css3, html5, netify
• Language: HTML
• Homepage: https://odin-htmlforms-sv.netlify.app
• Size: 10.7 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


[The Odin Project: HTML & CSS] - Project: HTML Forms 



## Intro

-   The project is to practice forms by building Intuit's Sign Up Page

-   You can find more on the project here: [The Odin Project - HTML Forms](https://www.theodinproject.com/paths/full-stack-javascript/courses/html-and-css/lessons/html-forms)

### 📗 Fonts used

-   [Montserrat](https://fonts.google.com/specimen/Montserrat?query=Montserrat)

### 🎨 Color Reference

|  Color            |  Hex                                                                 |

| ----------------- | -------------------------------------------------------------------- |

| Grey              |  ![#eceef1](https://via.placeholder.com/10/eceef1?text=+) `#eceef1`  |

| Dark Grey         | ![#8f8f8f](https://via.placeholder.com/10/8f8f8f?text=+) `#8f8f8f`   |

| Blue              |  ![#0077c5](https://via.placeholder.com/10/0077c5?text=+) `#0077c5`  |

| Darker Grey       | ![#5d5360](https://via.placeholder.com/10/5d5360?text=+) `#5d5360`   |

| Grey Border       | ![#c7c7c7](https://via.placeholder.com/10/c7c7c7?text=+) `#c7c7c7`   |

| Grey Input Border |  ![#c6c7cc](https://via.placeholder.com/10/c6c7cc?text=+) `#c6c7cc`  |

| Button Border     |  ![#4c4c4c](https://via.placeholder.com/10/4c4c4c?text=+) `#4c4c4c`  |

## Overall

### What I Learned

-   I really like this project since it help clarify how forms are properly used. I learned about the `legend, fieldset` tags. Also how the nested `input` tags inside label. This allows us to not have to use for on `labels` and id on `inputs`

-   [I had questions on what is inline-block and this guide helped](https://www.digitalocean.com/community/tutorials/css-display-inline-vs-inline-block#:~:text=Compared%20to%20display%3A%20inline%2C%20the,%3A%20inline%2Dblock%20they%20are)

-   Also the form tag changes when it is used in React. I noticed that in React we can either use Controlled or Uncontrolled forms. Also I noticed that in React we do not use `action` or `method` as attributes on the form tag. Instead, we handle it in the `onSubmit` function

    -   [More on Controlled and Uncontrolled Components](https://daveceddia.com/react-forms/)

-   [I got curious to see Form Data is send to backend and I came across this guide](https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data). I like how it explains how to use the network tab! I found that really helpful

-   [This was a great explaining for building forms. I like how it showed us all the potential things we can use a in a form](https://learn.shayhowe.com/html-css/building-forms/)

## Next Steps

-   Continue using semantic tags to properly organize the website

-   Master knowing the differences between inline, inline-block, block and how padding and margin work on them

-   Continue practicing using good forms handling

## Technologies:

-   HTML

-   CSS

-   Netlify