updated readme and datafile to point to project properly

This commit is contained in:
Robert McGovern 2022-09-08 15:04:11 +01:00
parent 02123ff338
commit d9b756807b
7 changed files with 37 additions and 63 deletions

View File

@ -16,9 +16,6 @@ This is a solution to the [Pod request access landing page challenge on Frontend
- [Continued development](#continued-development) - [Continued development](#continued-development)
- [Useful resources](#useful-resources) - [Useful resources](#useful-resources)
- [Author](#author) - [Author](#author)
- [Acknowledgments](#acknowledgments)
**Note: Delete this note and update the table of contents based on what sections you keep.**
## Overview ## Overview
@ -34,20 +31,22 @@ Users should be able to:
### Screenshot ### Screenshot
![](./screenshot.jpg) Here are the screenshots for the complete project. First is the mobile version running at 375x667
![mobile](./screenshots/mobile.png)
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. Then the tablet version 768x1024
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. ![tablet](./screenshots/tablet.png)
Then crop/optimize/edit your image however you like, add it to your project, and update the file path in the image above. Then the desktop version, first without the error state and then with the error state
**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.** ![tablet](./screenshots/desktop.png)
![tablet](./screenshots/desktop_with_error.png)
### Links ### Links
- Solution URL: [Add solution URL here](https://github.com/tarasis/tarasis.github.io/tree/main/projects/FrontendMentor/newbie/pod-request-access-landing-page) - Solution URL: [Github](https://github.com/tarasis/tarasis.github.io/tree/main/projects/FrontendMentor/newbie/pod-request-access-landing-page)
- Live Site URL: [Add live site URL here](https://tarasis.github.io/FrontendMentor/newbie/pod-request-access-landing-page) - Live Site URL: [Github.io](https://tarasis.github.io/FrontendMentor/newbie/pod-request-access-landing-page)
## My process ## My process
@ -56,49 +55,29 @@ Then crop/optimize/edit your image however you like, add it to your project, and
- Semantic HTML5 markup - Semantic HTML5 markup
- CSS custom properties - CSS custom properties
- Flexbox - Flexbox
- CSS Grid
- Mobile-first workflow - Mobile-first workflow
### What I learned ### What I learned
The approach to this was more difficult than any of the Frontend Mentor challenges that I had approached so far. Basically till now I've only approached the newbie free projects (although with a mixture of access to the figma design file). The approach to this was more difficult than any of the Frontend Mentor challenges that I had approached so far. Basically till now I've only approached the newbie free projects (sometimes working with the figma design file and sometimes not).
Now I have to think about Mobile, Tablet, and Desktop; rather than just Mobile and Desktop. Now I have to think about Mobile, Tablet, and Desktop; rather than just Mobile and Desktop.
Also interesting was working without a style guide document + figma doc. This time I just had the figma document, so I had to make more notes for myself. Interesting particularly because it wasn't clear from the design section what weights of Chivo I needed. Also interesting was working without a style guide document + figma doc. This time I just had the figma document, so I had to make more notes for myself. Interesting particularly because it wasn't clear from the design section what weights of Chivo I needed.
To see how you can add code snippets, see below: I ended up using fixed values for position between the three version with I concede is problematic.
```html I tried to use properties a lot so that I can just change the values in the `:root` for each media section. I got a little sloppy towards the end and haven't moved all the values I can into properties. I find that using properties leads to a cleaner CSS file and easier cognitive load.
<h1>Some HTML code I'm proud of</h1>
```
```css
.proud-of-this-css {
color: papayawhip;
}
```
```js
const proudOfThisFunc = () => {
console.log('🎉')
}
```
If you want more help with writing markdown, we'd recommend checking out [The Markdown Guide](https://www.markdownguide.org/) to learn more. For email validation I simply used a pattern set on the input field, and then a combination of `:invalid`, `:valid` and `:placeholder-shown` to affect whether the formatting error is show; rather than taking a JavaScript approach. This does mean I have only implemented one of the two error states. (Honestly I had missed there was a second till I was working on this readme)
**Note: Delete this note and the content within this section and replace with your own learnings.**
### Continued development ### 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. Focus on improving positioning when dealing with three different formats.
**Note: Delete this note and the content within this section and replace with your own plans for continued development.**
### Useful resources ### 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. - [Codepen showing CSS pattern matching & errors](https://codepen.io/jh3y/pen/yLKMOBm) - Found this method of handling error handling for input fields.
- [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.**
## Author ## Author
@ -106,9 +85,3 @@ Use this section to outline areas that you want to continue focusing on in futur
- Portfolio - [Robert McGovern Portfolio](https://rmcg.dev) - Portfolio - [Robert McGovern Portfolio](https://rmcg.dev)
- Frontend Mentor - [@tarasis](https://www.frontendmentor.io/profile/tarasis) - Frontend Mentor - [@tarasis](https://www.frontendmentor.io/profile/tarasis)
- Twitter - [@tarasis](https://www.twitter.com/tarasis) - Twitter - [@tarasis](https://www.twitter.com/tarasis)
## Acknowledgments
This is where you can give a hat tip to anyone who helped you out on this project. Perhaps you worked in a team or got some inspiration from someone else's solution. This is the perfect place to give them some credit.
**Note: Delete this note and edit this section's content as necessary. If you completed this challenge by yourself, feel free to delete this section entirely.**

View File

@ -55,7 +55,9 @@ input {
--logos-height-17px: 1.0625rem; --logos-height-17px: 1.0625rem;
--logos-height-29px: 1.8125rem; --logos-height-29px: 1.8125rem;
--border-radius-28px: 28px; --border-radius: 28px;
--title-margin-bottom: 1rem;
/* Variables for Elements */ /* Variables for Elements */
--fs-title: var(--fs-26px); --fs-title: var(--fs-26px);
@ -137,7 +139,7 @@ main {
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 1rem; margin-bottom: var(--title-margin-bottom);
font-weight: normal; font-weight: normal;
} }
@ -184,7 +186,7 @@ main {
.email-form__field { .email-form__field {
width: 100%; width: 100%;
border-radius: 28px; border-radius: var(--border-radius);
background-color: var(--col-dark-blue); background-color: var(--col-dark-blue);
padding: 0.5625rem 0; padding: 0.5625rem 0;
color: var(--col-lighter-blue); color: var(--col-lighter-blue);
@ -199,7 +201,7 @@ main {
.email-form__button-submit { .email-form__button-submit {
width: 100%; width: 100%;
border-radius: 28px; border-radius: var(--border-radius);
background-color: var(--col-lime-green); background-color: var(--col-lime-green);
padding: 0.5625rem 0; padding: 0.5625rem 0;
color: var(--col-darker-blue); color: var(--col-darker-blue);
@ -235,6 +237,8 @@ main {
--lh-blurb: var(--lh-28px); --lh-blurb: var(--lh-28px);
--logos-height: var(--logos-height-29px); --logos-height: var(--logos-height-29px);
--title-margin-bottom: 2rem;
} }
body { body {
@ -248,8 +252,8 @@ main {
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
margin-top: 50px; margin-top: 3.125rem;
margin-left: 39px; margin-left: 2.4375rem;
} }
main { main {
@ -257,12 +261,11 @@ main {
width: 39.6875rem; width: 39.6875rem;
height: 31.875rem; height: 31.875rem;
padding-top: 5.75rem; padding-top: 5.75rem;
margin-left: 39px; margin-left: 2.4375rem;
} }
.title { .title {
width: 25ch; width: 25ch;
margin-bottom: 2rem;
} }
.blurb { .blurb {
@ -278,7 +281,7 @@ main {
.email-form { .email-form {
order: 4; order: 4;
margin-bottom: 64px; margin-bottom: 4rem;
position: relative; position: relative;
} }
@ -295,7 +298,7 @@ main {
} }
.email-warning { .email-warning {
bottom: 20px; bottom: 1.25rem;
padding-left: 2rem; padding-left: 2rem;
} }
@ -304,7 +307,7 @@ main {
position: absolute; position: absolute;
bottom: 0px; bottom: 0px;
left: 30px; left: 1.875rem;
} }
main::before { main::before {
@ -323,6 +326,8 @@ main {
--fs-title: var(--fs-52px); --fs-title: var(--fs-52px);
--lh-title: var(--lh-62px); --lh-title: var(--lh-62px);
--title-margin-bottom: 1.5rem;
} }
body { body {
@ -330,22 +335,18 @@ main {
} }
header { header {
margin-top: 102px; margin-top: 6.375rem;
margin-left: 165px; margin-left: 10.3125rem;
} }
main { main {
padding-top: 5.5rem; padding-top: 5.5rem;
margin-left: 10.3125rem; margin-left: 10.3125rem;
width: 724px; width: 45.25rem;
}
.title {
margin-bottom: 1.5rem;
} }
.dots-image { .dots-image {
bottom: 78px; bottom: 4.875rem;
right: 0px; right: 0px;
left: unset; left: unset;
} }

Binary file not shown.

After

Width:  |  Height:  |  Size: 533 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 535 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 172 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 327 KiB

View File

@ -13,13 +13,13 @@
"challenges": [ "challenges": [
{ {
"title": "Pod Request Access Landing Page", "title": "Pod Request Access Landing Page",
"url": "/FrontendMentor/newbie/pod-request-landing-page/", "url": "/FrontendMentor/newbie/pod-request-access-landing-page/",
"description": "", "description": "",
"techUsed": [ "techUsed": [
"html5", "html5",
"css3" "css3"
], ],
"screenshotURL": "/FrontendMentor/newbie/pod-request-landing-page/screenshots/desktop.png", "screenshotURL": "/FrontendMentor/newbie/pod-request-access-landing-page/screenshots/mobile.png",
"screenshotAltText": "Pod Request Landing Page Challenge from FrontendMentor" "screenshotAltText": "Pod Request Landing Page Challenge from FrontendMentor"
}, },
{ {