{"id":19957357,"url":"https://github.com/opencodechicago/html-css_fundamentals_part3","last_synced_at":"2025-05-03T21:30:33.347Z","repository":{"id":255938538,"uuid":"850490811","full_name":"OpenCodeChicago/HTML-CSS_fundamentals_part3","owner":"OpenCodeChicago","description":"This repository covers creating and styling forms using HTML5 and CSS3. It includes various input types like text fields, checkboxes, and radio buttons, along with basic HTML5 validation and form styling techniques to improve user experience.","archived":false,"fork":false,"pushed_at":"2024-09-24T02:43:33.000Z","size":2242,"stargazers_count":3,"open_issues_count":0,"forks_count":5,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-05-02T03:43:48.060Z","etag":null,"topics":["css","css-flexbox","css3","front-end-development","frontend","frontend-mentor","html","html5","software-engineering","ux-ui-design","webdev","webdevelopment"],"latest_commit_sha":null,"homepage":"https://opencodechicago.github.io/HTML-CSS_fundamentals_part3/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OpenCodeChicago.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-08-31T23:25:33.000Z","updated_at":"2024-09-24T02:43:35.000Z","dependencies_parsed_at":"2024-09-08T01:24:50.558Z","dependency_job_id":"a1035f42-5896-4416-a23f-51d9b50abe7e","html_url":"https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part3","commit_stats":null,"previous_names":["opencodechicago/html-css_fundamentals_part3"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenCodeChicago%2FHTML-CSS_fundamentals_part3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenCodeChicago%2FHTML-CSS_fundamentals_part3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenCodeChicago%2FHTML-CSS_fundamentals_part3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OpenCodeChicago%2FHTML-CSS_fundamentals_part3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OpenCodeChicago","download_url":"https://codeload.github.com/OpenCodeChicago/HTML-CSS_fundamentals_part3/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252259297,"owners_count":21719658,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-flexbox","css3","front-end-development","frontend","frontend-mentor","html","html5","software-engineering","ux-ui-design","webdev","webdevelopment"],"created_at":"2024-11-13T01:37:40.363Z","updated_at":"2025-05-03T21:30:32.134Z","avatar_url":"https://github.com/OpenCodeChicago.png","language":"CSS","readme":"# HTML/CSS Fundamentals: Forms and Inputs\n\n[![GitHub last commit](https://img.shields.io/github/last-commit/OpenCodeChicago/HTML-CSS_fundamentals_part2)](https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2/commits/main)\n[![GitHub license](https://img.shields.io/github/license/OpenCodeChicago/HTML-CSS_fundamentals_part2)](https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part2/blob/main/LICENSE)\n\n\u003e This repository expands on **HTML** and **CSS** fundamentals, with a particular focus on **forms** and various input types such as **text fields**, **checkboxes**, **radio buttons**, and more. You'll learn how to build accessible and user-friendly forms for the web, as well as how to style them using CSS.\n\n---\n\n## What We Covered\n\nIn this lesson, we explored the following key concepts:\n\n- **HTML5 Form Elements**:\n  - **Text inputs** (`\u003cinput type=\"text\"\u003e`, `\u003cinput type=\"email\"\u003e`, etc.)\n  - **Radio buttons** and **Checkboxes**\n  - **Select boxes** (`\u003cselect\u003e`) and **Textareas**\n  - **Buttons** (`\u003cbutton\u003e`, `\u003cinput type=\"submit\"\u003e`, etc.)\n- **Form Structure**:\n  - Building semantic, accessible forms with **`\u003cform\u003e`** tags.\n- **Basic Form Validation**:\n  - Using built-in HTML5 validation attributes like `required`, `pattern`, `minlength`, etc.\n  - Applying **placeholder text**, **labeling inputs**, and ensuring **accessibility**.\n- **Styling Forms**:\n  - Customizing form appearance with **CSS**: borders, padding, margin, hover, focus.\n\n---\n\n## Getting Started\n\nTo explore the content of this repository:\n\n1. **Clone the Repository**: \n   ```bash\n   git clone https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part3.git\n   ```\n2. **Open the Project**:\n   Open the `index.html` file in your browser to see the basic structure and styling in action.\n3. **Edit and Experiment**:\n   Modify the HTML and CSS files to see how changes affect the appearance and structure of the web page.\n\n---\n\n## Folder Structure\n\nThis repository follows the folder structure below:\n- **`index.html`**: This is the main HTML file where the content and structure of the web page are defined.\n- **`styles.css`**: This external CSS file is used for styling the HTML elements.\n\n---\n\n## What's Next\n\nAs we continue to dive deeper into **`HTML`** and **`CSS`**, the next lesson will cover::\n- **Colors**: Exploring color theory, including color schemes and how to apply colors effectively using CSS.\n- **Image Optimization**: Understanding techniques to optimize images for faster loading times and better performance on the web.\n\n\n**Stay tuned as we build on these foundational skills and move toward more advanced concepts in web development.**\n\n## Languages and Tools:\n\n\u003cdiv align=\"center\"\u003e\n\n\u003ca href=\"https://en.wikipedia.org/wiki/HTML5\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/html5-original-wordmark.svg\" alt=\"HTML5\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://www.w3schools.com/css/\" target=\"_blank\"\u003e\u003cimg style=\"margin: 10px\" src=\"https://profilinator.rishav.dev/skills-assets/css3-original-wordmark.svg\" alt=\"CSS3\" height=\"50\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://git-scm.com/\" target=\"_blank\" rel=\"noreferrer\"\u003e\n\u003cimg src=\"https://www.vectorlogo.zone/logos/git-scm/git-scm-icon.svg\" alt=\"git\" width=\"40\" height=\"40\"/\u003e\u003c/a\u003e\n\n\u003c/div\u003e\n\n---\n\n## Issues\n\nIf you encounter any issues or have suggestions for improvements, please let us know by [opening an issue](https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part3/issues) on GitHub.\n\n## License\n\nThis repository is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.\n\n## Feedback\n\nYour feedback is valuable to us! If you have any thoughts on how we can improve, please [submit feedback](https://github.com/OpenCodeChicago/HTML-CSS_fundamentals_part3/issues) or contact us directly.\n\n## Contact Us\n\nFor any questions, suggestions, or further discussion, feel free to reach out to us:\n\n\u003cdiv align=\"center\"\u003e\n\u003ca href=\"https://www.youtube.com/@AlexSmaginDev\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/youtube-%23FF0000.svg?\u0026style=for-the-badge\u0026logo=youtube\u0026logoColor=white\" alt=\"YouTube\" style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://linkedin.com/in/alex-smagin29\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/linkedin-%231E77B5.svg?\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white alt=linkedin style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://discord.gg/t6MGsCqdFX\" target=\"_blank\"\u003e\n\u003cimg src=\"https://img.shields.io/badge/discord-%237289DA.svg?\u0026style=for-the-badge\u0026logo=discord\u0026logoColor=white\" alt=\"Discord\" style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://stackoverflow.com/users/22484161/alex-smagin\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/stackoverflow-%23F28032.svg?\u0026style=for-the-badge\u0026logo=stackoverflow\u0026logoColor=white alt=stackoverflow style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://dribbble.com/Alexandrbig1\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/dribbble-%23E45285.svg?\u0026style=for-the-badge\u0026logo=dribbble\u0026logoColor=white alt=dribbble style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://www.behance.net/a1126\" target=\"_blank\"\u003e\n\u003cimg src=https://img.shields.io/badge/behance-%23191919.svg?\u0026style=for-the-badge\u0026logo=behance\u0026logoColor=white alt=behance style=\"margin-bottom: 5px;\" /\u003e\n\u003c/a\u003e\n\n\u003c/div\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopencodechicago%2Fhtml-css_fundamentals_part3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopencodechicago%2Fhtml-css_fundamentals_part3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopencodechicago%2Fhtml-css_fundamentals_part3/lists"}