Hi there,
this is my solution for the fylo dark landing page.
I had some trouble with the error message on the email validation, but i think it worked out good in the end. The only thing is, the page shouldn't reload, when the input is empty, but i couldn't figure out how to stop this from happening.
If you have any suggestions for improvement, please let me know.
Hi, nice work!
To stop the page from refreshing, you have to prevent the default behaviour on form submission.
Try adding this JS:
const form = document.querySelector('form');
form.addEventListener('submit', event => {
event.preventDefault();
});
I think I did really good on this project. I had a very hard time trying to put dots inside the zeros and am not sure how to do it. Also, never figured out how to add colors to the dollar images on the right side of the app. This was my first time using Javascript but I feel like maybe I could have had a better solution with that. But out of all of this, the most important I want to know is how to make this compatible with mobile devices(which I know requires media screen with CSS). Any suggestions??
The 'dots inside the zeros' are a feature of the Space Mono font family. It looks like you are using the Roboto font family which does not have the dots.
Why not just use the character '$' and then you can apply the color property?
You should try building the page for mobile first. The mobile design is usually much simpler than the desktop design so it makes sense to start with that. You then apply media queries when you have more viewport space to work with.
Is there any better ways than just using divs for wrapping elements to use flexbox and make it semantic within components like this card? I'd appreciate to learn about.
Remember to use <p> elements for blocks of text. <div>s and <span>s aren't semantic elements, they are just used to separate elements for styling purposes.
For example, your .description element can be a <p>. And the .price element can be a <p> also in my opinion:
<p class="price">
<strong>Annual Plan</strong>
<span>$59.99/year</span>
</p>
Hi! Any suggestions for improvement would be very appreciated.
Try to use the semantically correct HTML elements.
For the .container you could use a <main> element instead of a <div> and your .cards could all be <section> elements instead of <div>s.
Also you have used <p> elements for your .card-headings, but these are headings, so why not use <h2>?
I don't have a mac device so I can't see safari issues. I add a prefix but I don't know if it works. Write a comment if you see Safari issues, please :)
Hey, I checked your page in Safari. There is a lot of extra space above the <h1> and on larger screens the text content starts to disappear from the bottom of the .text-box.
For some reason, removing align-items: center; from .card fixed the issue but I couldn't figure out why.
to add the review stars I used this code:
.review::before {
content: url(./images/icon-star.svg) " "url(./images/icon-star.svg) " "url(./images/icon-star.svg) " "url(./images/icon-star.svg) " "url(./images/icon-star.svg);
margin: 0px 30px 0px 20px;
}
I added a string with 4 blank spaces to space the stars, any suggestions as to how I could get the desired effect with a property or something? Thanks in advance!
How about this:
.review::before {
content: url(./images/icon-star.svg)
url(./images/icon-star.svg)
url(./images/icon-star.svg)
url(./images/icon-star.svg)
url(./images/icon-star.svg);
margin: 0px 30px 0px 20px;
display: inline-flex;
gap: .25rem;
}
You can use the gap property to increase/decrease the space between the stars as you wish.
This project brought me closer to the end of the JUNIOR level. There's only one project left and a couple of days till the end of the year. Which means that I'm so very close to achieving my goal of finishing every challenge in this JUNIOR level. Not a lot to say about this project, the only challenge I had was the pattern image, but it wasn't much of a challenge at the end of the day. One more challenge and I can call it a year!
If you have any suggestions, feel free to leave them in the comments' section 👨🏻💻 Cheers 👾
This is really nice. I like how the elements come in from the sides as you scroll down. I really need to learn how that works.
Hello, everyone! This is my first solution for this challenge after I stopped learning web development for a year. So, here are what I'm confused at:
Thank you!
Hey, well done on this challenge, it looks quite tricky.
The contact button doesn't stay focused because of href="#contact". I think this is linking to something which doesn't exist on the page which is removing focus from the link itself. If you change the attribute to href="#" it will fix the problem. I did notice that you have duplicated every property for the :hover and :focus styles. I think you can remove them all except color and background-color, since these are the only properties that actually change?
I think the problem you're having is getting the text to stay at the bottom of the container? You could use grid to fix this. On .content-with-cherry change display: block; to display: grid;. Remove align-items: center; and add align-content: end;. Add some padding-bottom so the text isn't sticking to the bottom. Then do the same with .content-with-orange.
I have solved this challenge with the most optimized code possible. If you think it can be improved, I will be happy to receive recommendations to improve it. Give me feedback if you like it, thanks you!
Hey, well done on this challenge, it's a very nice solution.
For your card icons, you have declared background-repeat: no-repeat; and background-position: right; on each one. Instead you could add those to your .card-icon class and remove them from the individual classes which will save you 10 lines of code.
Also you can remove width: 100%; from .card-icon because it will take the full width of the parent by default, and text-align: end; doesn't appear to do anything so that can be removed too.
Got some problems with z-index property. For some reason I can't make the mobile pattern sink under the heading and the button of the intro section (hero). You can see this by sizing the window to approximately 400px wide. Any advice? Thank you in advance.
Hey, I tried this and it fixed the issue:
.hero-content {
isolation: isolate;
z-index: 1;
}
Does it look good? Any tips and tricks for responsive UI with less code?
This looks pretty good. I would perhaps try to simplify the HTML as there seem to be some unnecessary elements.
Maybe something like this:
<main>
/* Card 1 */
<section>
<h2></h2>
<p></p>
<a></a>
</section>
/* Card 2 */
<section>
<h2></h2>
<p></p>
<a></a>
</section>
/* Card 3 */
<section>
<h2></h2>
<p></p>
<a></a>
</section>
</main>
And the images are just for decoration so they can be added using a ::before pseudo-element on each <section>, instead of an HTML element.
Questions, comments and feedback highly appreciated! This was a fun foray for me, I wanted to code this project in react and try some new things. I kinda deviated from the original design but it's mostly there!
