P
@wiceldric75
Latest solutions
Order summary component main
PSubmitted 5 months agoStill feel like I haven't been able to master implementing .svg images using "background". Case in point, my page doesn't look exactly the same as the design files on all display sizes.
Skilled E-learning landing page
PSubmitted 6 months agoI didn't figure out how to change the color of the bottom button to look like it should when hovered over.
Workit-landing-page
PSubmitted 6 months agoThis time the code turned out to be quite messy this time.
I would really appreciate some help in regards to code optimization; I would also be really grateful if someone could teach me how to better label my elements.
Latest comments
- P@lynx232
Does the solution include semantic HTML?
- Yes!
Is it accessible, and what improvements could be made?
- It is! Still, I suggest you use a predefined modern reset, it makes your job easier. I prefer A Modern CSS Reset - Josh W Comeau;
Does the layout look good on a range of screen sizes?
- Yes! Great job on making Hero image look good on every range of screens!
Is the code well-structured, readable, and reusable?
- Yes! I like the use of comments for organizing your code.
- For good practice I suggest that in the future you start your code with mobile first design in mind.
Does the solution differ considerably from the design?
- It doesn't!
Great job on this project. I would also like to ask to review as many solutions on this website as possible, so that we could all continue to improve, also please encourage other to do the same.
Best of luck on your journey! 🍻
- P@pylopesP@lynx232
Does the solution include semantic HTML?
- Yes!
Is it accessible, and what improvements could be made?
- It is! Still, I suggest you use a predefined modern reset, it makes your job easier. I prefer A Modern CSS Reset - Josh W Comeau;
Does the layout look good on a range of screen sizes?
- Yes! Great job on making div.hero-img look good on every range of screens!
Is the code well-structured, readable, and reusable?
- Yes! I like the use of comments for organizing your code.
Does the solution differ considerably from the design?
- It doesn't, except for logo at the bottom, you should make it the same size as the one at the top. Other than that it looks great!
- Also, the color on hover for the bottom button doesn't resemble the design file(if you find a solution to this problem, please let me know, as I also don't have a fix for this as of now)
Great job on this project. I would also like to ask to review as many solutions on this website as possible, so that we could all continue to improve, also please encourage other to do the same.
Best of luck on your journey! 🍻
- P@welpmozWhat specific areas of your project would you like help with?
Any improvements or suggestions will be appreciated!
P@lynx232Does the solution include semantic HTML?
- Yes it does!
Is it accessible, and what improvements could be made?
- It is! Few suggestions:
- I think it is better to use font @font-face instead of @import when fonts are provided in the zip file. That is because you when using @font-face you no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer;
- Use a predefined modern reset, it makes your job easier. I prefer A Modern CSS Reset - Josh W Comeau;
Does the layout look good on a range of screen sizes?
- It does. Here are a few more suggestions:
- Define the width for the hero__title element so that it will continue to look good even on widescreen displays;
- Define the size for the hero__title element for 320px wide displays so that it will look better;
- Define the position of the hero__image element depending on the screen sizes;
- Define the width and height of div.founder, so that it will look good on all displays;
Is the code well-structured, readable, and reusable?
- Yes.
Does the solution differ considerably from the design?
- It doesn't. Only thing noticeable is that the bullets points should be nested in an element that has a light purple background color.
I want to end this by telling you that you did a great job on your project, and I wish you good luck further down this path. Lastly, I would like to ask to review as many solutions on this website as possible, so that we could all continue to improve, and that you will ask the same of others.
Once again, best of luck on your journey! 🍻
- P@pylopesWhat are you most proud of, and what would you do differently next time?
My knowledge of element positioning needs refining
What specific areas of your project would you like help with?I want to keep the elements in the right place, even on different screen sizes. I think I might have made a mistake in how I used the sizes, but I learned a lot from this first full-page project
P@lynx232Does the solution include semantic HTML?
- Yes it does!
Is it accessible, and what improvements could be made?
- It is! Few suggestions:
- I think it is better to use font @font-face instead of @import when fonts are provided in the zip file. That is because you when using @font-face you no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer;
- Use a predefined modern reset, it makes your job easier. I prefer A Modern CSS Reset - Josh W Comeau;
Does the layout look good on a range of screen sizes?
- Not quite... :)). Here are a few suggestions:
- Define the width for the h1 element so that it will continue to look good even on widescreen displays;
- In order to center the img element i suggest trying the following properties display: block, margins: auto;
- Define the width and height of section.founder, so that it will look good on all desktop displays;
Is the code well-structured, readable, and reusable?
- Yup, very clean.
Does the solution differ considerably from the design?
- No, except for the background curves.(truth be told this is the part that I found to be the most difficult in the whole challenge).
So, the solution I found is as follows:
- You need to separate the background into 2 different elements(actually 3, but the 3rd is nested in the 2nd); what i did was:
- nest all the elements found in the part of the page with a dark purple background into a header element, and everything else I nested in a main element. Now, within the main element i further nested everything found in the light purple part of the page into a section element;
- next, I used the clip-path: ellipse(200% 100% at 50% 0); property for both header and section elements(this looks best for mobile view, for other screen sizes you will have to modify the first value);
- now, you probably have noticed that using this property while the phone img element is nested in the header will cause it to clip, I solved this problem by doing the following:
-
The img element is taken out of header and nested only in body; header and section will be set as position: relative, while img will be set as position: absolute; header and section will be set as z-index: 1 while img will be set as z-index: 2(bigger value so it will overlap them);
-
Lastly, use different positioning properties in order the arrange these elements as needed.
-
One last thing, use the filter(within :hover) property to change the colors of the social media icons
I want to end this by telling you that you did a great job on your project, and I wish you good luck further down this path. Lastly, I would like to ask to review as many solutions on this website as possible, so that we could all continue to improve, and that you will ask the same of others.
Once again, best of luck on your journey! 🍻
- P@mariosearchteamWhat are you most proud of, and what would you do differently next time?
I´m not too happy with this one. I underestimated the complexity of the details like the background curve and the changes between the screen sizes.
Next time i would try to take more time planning instead of jumping right into it.
What specific areas of your project would you like help with?I didn´t found a solution for the background curves. I could have made an image myself and use it, but i guess the idea is to use what we have in the starting data.
Next problem was the spacing between the sections, i couldn´t use margins because of the different background colors and switched to paddings instead. This works, but im not sure if this is a "clean" solution.
P@lynx232Does the solution include semantic HTML?
- Yup. Nice use of proper tags instead of just defining everything as a div;
Is it accessible, and what improvements could be made?
- I would suggest adding a footer where you credit yourself as well as frondendmentor;
- I think it is better to use font @font-face instead of @import when fonts are provided in the zip file. That is because you when using @font-face you no longer have to adhere to a particular set of "web safe" fonts that the user has pre-installed on their computer;
- Use a predefined modern reset, it makes your job easier. I prefer A Modern CSS Reset - Josh W Comeau;
Does the layout look good on a range of screen sizes? -It does. Great job!
Is the code well-structured, readable, and reusable? -It is!
Does the solution differ considerably from the design? No, except for the background curves.(truth be told this is the part that I also found most difficult in the whole challenge).
So, the solution I found is as follows: You need to separate the background into 2 different elements(actually 3, but the 3rd is nested in the 2nd); what i did was:
- nest all the elements found in the part of the page with a dark purple background into a header element, and everything else I nested in a main element. Now, within the main element i further nested everything found in the light purple part of the page into a section element;
- next, I used the clip-path: ellipse(200% 100% at 50% 0); property for both header and section elements(this looks best for mobile view, for other screen sizes you will have to modify the first value);
- now, you probably have noticed that using this property while the phone img element is nested in the header will cause it to clip, I solved this problem by doing the following:
- The img element is taken out of header and nested only in body;
- header and section will be set as position: relative, while img will be set as position: absolute;
- header and section will be set as z-index: 1 while img will be set as z-index: 2(bigger value so it will overlap them);
- Lastly, use different positioning properties in order the arrange these elements as needed.
I want to end this by telling you that you did a great job on your project, and I wish you good luck further down this path. Lastly, I would like to ask to review as many solutions on this website as possible, so that we could all continue to improve, and that you will ask the same of others.
Once again, best of luck on your journey! 🍻
- @Adnan0-IMP@lynx232
I would love to give you some feedback but as of right now I haven't learned any JavaScript, so I can't help you... sorry.
Best of luck in your future endeavors!
