finished base apparel challenge
This commit is contained in:
parent
4995e1c9e4
commit
700f54052c
|
|
@ -32,25 +32,17 @@ Users should be able to:
|
|||
|
||||
### Screenshot
|
||||
|
||||
|
||||
|
||||
Add a screenshot of your solution. The easiest way to do this is to use Firefox to view your project, right-click the page and select "Take a Screenshot". You can choose either a full-height screenshot or a cropped one based on how long the page is. If it's very long, it might be best to crop it.
|
||||
|
||||
Alternatively, you can use a tool like [FireShot](https://getfireshot.com/) to take the screenshot. FireShot has a free option, so you don't need to purchase it.
|
||||
|
||||
Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above.
|
||||
|
||||
**Note: Delete this note and the paragraphs above when you add your screenshot. If you prefer not to add a screenshot, feel free to remove this entire section.**
|
||||
|
||||
|
||||
|
||||
### Links
|
||||
|
||||
- Solution URL: [Add solution URL here](https://your-solution-url.com)
|
||||
- Live Site URL: [Add live site URL here](https://your-live-site-url.com)
|
||||
- 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
|
||||
|
|
@ -58,31 +50,23 @@ Then crop/optimize/edit your image however you like, add it to your project, and
|
|||
- Flexbox
|
||||
- CSS Grid
|
||||
- Mobile-first workflow
|
||||
- [React](https://reactjs.org/) - JS library
|
||||
- [Next.js](https://nextjs.org/) - React framework
|
||||
- [Styled Components](https://styled-components.com/) - For styles
|
||||
|
||||
**Note: These are just examples. Delete this note and replace the list above with your own choices**
|
||||
|
||||
### 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.
|
||||
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
|
||||
|
||||
Use this section to outline areas that you want to continue focusing on in future projects. These could be concepts you're still not completely comfortable with or techniques you found useful that you want to refine and perfect.
|
||||
|
||||
**Note: Delete this note and the content within this section and replace with your own plans for 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
|
||||
|
||||
- [Example resource 1](https://www.example.com) - This helped me for XYZ reason. I really liked this pattern and will use it going forward.
|
||||
- [Example resource 2](https://www.example.com) - This is an amazing article which helped me finally understand XYZ. I'd recommend it to anyone still learning this concept.
|
||||
|
||||
**Note: Delete this note and replace the list above with resources that helped you during the challenge. These could come in handy for anyone viewing your solution or for yourself when you look back on this project in the future.**
|
||||
- [Stackoverflow Visually Hidden answer](https://stackoverflow.com/a/71349645) - I found this useful for doing adding the label but making it visually hidden.
|
||||
|
||||
## Author
|
||||
|
||||
|
|
@ -93,34 +77,3 @@ Use this section to outline areas that you want to continue focusing on in futur
|
|||
## Acknowledgments
|
||||
|
||||
My thanks to Julio Cinquina on the FEM Slack for correcting my misunderstanding of the `:has` pseudo-class.
|
||||
|
||||
Initial HTML
|
||||
```html
|
||||
<main>
|
||||
<header>
|
||||
<picture>
|
||||
<img src="images/logo.svg" alt="Logo of Base Apparel. Hollow round circle with the text Base Apparel beside it">
|
||||
</picture>
|
||||
</header>
|
||||
|
||||
<picture>
|
||||
<source srcset="images/hero-desktop.jpg" media="(min-width: 1000px">
|
||||
<img src="images/hero-mobile.jpg"
|
||||
alt="Hero image of a young lady holding her arm up showing some jewelry on her wrist. The lady stands in front of a bush">
|
||||
</picture>
|
||||
|
||||
<h1></h1>
|
||||
<p></p>
|
||||
|
||||
<form action="submit">
|
||||
<label class="visually-hidden" for="email">Email input field</label>
|
||||
<input placeholder="Email Address" type="email" name="email" id="email">
|
||||
<button type="submit"><img src="" alt=""></button>
|
||||
|
||||
</form>
|
||||
</main>
|
||||
|
||||
```
|
||||
|
||||
visually hidden https://stackoverflow.com/a/71349645
|
||||
|
||||
|
|
|
|||
|
|
@ -151,6 +151,7 @@ main {
|
|||
font-weight: var(--fw-field);
|
||||
padding: 0.625rem 0 0.625rem var(--adjustment-left-field-and-error);
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
background: inherit;
|
||||
width: 100%;
|
||||
color: var(--col-neutral-dark-grayish-red);
|
||||
|
|
@ -196,7 +197,6 @@ main {
|
|||
opacity: 0;
|
||||
height: 100%;
|
||||
align-self: center;
|
||||
/* width: */
|
||||
}
|
||||
|
||||
.error-hidden {
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 488 KiB |
|
|
@ -29,6 +29,18 @@
|
|||
"title": "Newbie",
|
||||
"cssClass": "frontEndMentorChallenges",
|
||||
"challenges": [
|
||||
{
|
||||
"title": "BASE Apparel Coming Soon Page",
|
||||
"url": "/FrontendMentor/newbie/base-apparel-coming-soon/",
|
||||
"description": "",
|
||||
"techUsed": [
|
||||
"html5",
|
||||
"css3",
|
||||
"js"
|
||||
],
|
||||
"screenshotURL": "/FrontendMentor/newbie/base-apparel/screenshots/desktop.png",
|
||||
"screenshotAltText": "Base Apparel Coming Soon page Challenge from FrontendMentor"
|
||||
},
|
||||
{
|
||||
"title": "NFT preview card component",
|
||||
"url": "/FrontendMentor/newbie/nft-preview-card-component/",
|
||||
|
|
|
|||
Loading…
Reference in New Issue