rmcg.dev/projects/FrontendMentor/newbie/base-apparel-coming-soon/README.md

# Frontend Mentor - Base Apparel coming soon page solution

This is a solution to the [Base Apparel coming soon page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/base-apparel-coming-soon-page-5d46b47f8db8a7063f9331a0). Frontend Mentor challenges help you improve your coding skills by building realistic projects.

## Table of contents

- [Overview](#overview)
  - [The challenge](#the-challenge)
  - [Screenshot](#screenshot)
  - [Links](#links)
- [My process](#my-process)
  - [Built with](#built-with)
  - [What I learned](#what-i-learned)
  - [Continued development](#continued-development)
  - [Useful resources](#useful-resources)
- [Author](#author)
- [Acknowledgments](#acknowledgments)

**Note: Delete this note and update the table of contents based on what sections you keep.**

## Overview

### The challenge

Users should be able to:

- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Receive an error message when the `form` is submitted if:
  - The `input` field is empty
  - The email address is not formatted correctly

### Screenshot


![Mobile](screenshots/mobile.png)

![Desktop](screenshots/desktop.png)
### Links

- Solution URL: [on GitHub](https://github.com/tarasis/tarasis.github.io/tree/main/projects/FrontendMentor/newbie/base-apparel-coming-soon)
- Live Site URL: [on GitHub Pages](http://tarasis.github.io/FrontendMentor/newbie/base-apparel-coming-soon)

## My process

### Built with

- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow

### What I learned

The <picture> element is a container only. The <img> element is the main part describing its contents. <source> only describes different sources. So the alt remains the same for all of them regardless of the source.

https://stackoverflow.com/a/48207973

I learned that I'm not good at handling input fields with a button and an error image.


### Continued development

I want to go through other peoples solutions for how the handled the input and the adjacent button and error image. I'm sure there is a better solution than mine, particularly because mine limits the size of the input field more than it should.

### Useful resources

- [Stackoverflow Visually Hidden answer](https://stackoverflow.com/a/71349645) - I found this useful for doing adding the label but making it visually hidden.

## Author

- Website - [Robert McGovern Blog](https://tarasis.net)
- Frontend Mentor - [@tarasis](https://www.frontendmentor.io/profile/tarasis)
- Twitter - [@tarasis](https://www.twitter.com/tarasis)

## Acknowledgments

My thanks to Julio Cinquina on the FEM Slack for correcting my misunderstanding of the `:has` pseudo-class.
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`# Frontend Mentor - Base Apparel coming soon page solution`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
temp submit to ask for help 2022-10-19 20:22:49 +02:00			`This is a solution to the [Base Apparel coming soon page challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/base-apparel-coming-soon-page-5d46b47f8db8a7063f9331a0). Frontend Mentor challenges help you improve your coding skills by building realistic projects.`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`## Table of contents`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`- [Overview](#overview)`
			`- [The challenge](#the-challenge)`
			`- [Screenshot](#screenshot)`
			`- [Links](#links)`
			`- [My process](#my-process)`
			`- [Built with](#built-with)`
			`- [What I learned](#what-i-learned)`
			`- [Continued development](#continued-development)`
			`- [Useful resources](#useful-resources)`
			`- [Author](#author)`
			`- [Acknowledgments](#acknowledgments)`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`Note: Delete this note and update the table of contents based on what sections you keep.`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`## Overview`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`### The challenge`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`Users should be able to:`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
			`- View the optimal layout for the site depending on their device's screen size`
			`- See hover states for all interactive elements on the page`
			- Receive an error message when the `form` is submitted if:
			- The `input` field is empty
			`- The email address is not formatted correctly`

added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`### Screenshot`


finished base apparel challenge 2022-10-20 18:11:52 +02:00			`![Mobile](screenshots/mobile.png)`
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00
finished base apparel challenge 2022-10-20 18:11:52 +02:00			`![Desktop](screenshots/desktop.png)`
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`### Links`

finished base apparel challenge 2022-10-20 18:11:52 +02:00			`- Solution URL: [on GitHub](https://github.com/tarasis/tarasis.github.io/tree/main/projects/FrontendMentor/newbie/base-apparel-coming-soon)`
			`- Live Site URL: [on GitHub Pages](http://tarasis.github.io/FrontendMentor/newbie/base-apparel-coming-soon)`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`## My process`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`### Built with`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`- Semantic HTML5 markup`
			`- CSS custom properties`
			`- Flexbox`
			`- CSS Grid`
			`- Mobile-first workflow`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`### What I learned`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
finished base apparel challenge 2022-10-20 18:11:52 +02:00			`The <picture> element is a container only. The <img> element is the main part describing its contents. <source> only describes different sources. So the alt remains the same for all of them regardless of the source.`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
temp submit to ask for help 2022-10-19 20:22:49 +02:00			`https://stackoverflow.com/a/48207973`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
finished base apparel challenge 2022-10-20 18:11:52 +02:00			`I learned that I'm not good at handling input fields with a button and an error image.`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00

finished base apparel challenge 2022-10-20 18:11:52 +02:00			`### Continued development`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
finished base apparel challenge 2022-10-20 18:11:52 +02:00			`I want to go through other peoples solutions for how the handled the input and the adjacent button and error image. I'm sure there is a better solution than mine, particularly because mine limits the size of the input field more than it should.`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`### Useful resources`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
finished base apparel challenge 2022-10-20 18:11:52 +02:00			`- [Stackoverflow Visually Hidden answer](https://stackoverflow.com/a/71349645) - I found this useful for doing adding the label but making it visually hidden.`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`## Author`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
near finished state, must redo submit button positioning and add the error icon 2022-10-20 00:05:01 +02:00			`- Website - [Robert McGovern Blog](https://tarasis.net)`
			`- Frontend Mentor - [@tarasis](https://www.frontendmentor.io/profile/tarasis)`
			`- Twitter - [@tarasis](https://www.twitter.com/tarasis)`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
added advice-generator-app challenge and beginning of base apparel 2022-10-04 11:19:15 +02:00			`## Acknowledgments`
added base files for the remaining newbiew projects I have 2022-09-07 11:53:05 +02:00
finished base apparel challenge 2022-10-20 18:11:52 +02:00			My thanks to Julio Cinquina on the FEM Slack for correcting my misunderstanding of the `:has` pseudo-class.