Skip to content
OverviewSolutions
13
Comments
12
P
lynx232
@lynx232

All comments

  • P
    lynx232•190
    @lynx232Posted 2 months ago

    Does the solution include semantic HTML?

    • Yes!

    Is it accessible, and what improvements could be made?

    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! 🍻

    0
  • P
    lynx232•190
    @lynx232Posted 2 months ago

    Does the solution include semantic HTML?

    • Yes!

    Is it accessible, and what improvements could be made?

    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! 🍻

    1
  • P
    lynx232•190
    @lynx232Posted 3 months ago

    Does the solution include semantic HTML?

    • Yes it does!

    Is it accessible, and what improvements could be made?

    • It is! Few suggestions:
    1. 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;
    2. 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:
    1. Define the width for the hero__title element so that it will continue to look good even on widescreen displays;
    2. Define the size for the hero__title element for 320px wide displays so that it will look better;
    3. Define the position of the hero__image element depending on the screen sizes;
    4. 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! 🍻

    0
  • P
    Pablo Yuri•180
    @pylopesSubmitted 4 months ago
    What 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

    Workit landing page

    1
    P
    lynx232•190
    @lynx232Posted 3 months ago

    Does the solution include semantic HTML?

    • Yes it does!

    Is it accessible, and what improvements could be made?

    • It is! Few suggestions:
    1. 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;
    2. 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:
    1. Define the width for the h1 element so that it will continue to look good even on widescreen displays;
    2. In order to center the img element i suggest trying the following properties display: block, margins: auto;
    3. 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:
    1. 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;
    2. 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);
    3. 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! 🍻

    1
  • P
    Mario Graf-Schantl•540
    @mariosearchteamSubmitted 4 months ago
    What 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.

    Workit Landing Page with HTML and SCSS

    #sass/scss
    1
    P
    lynx232•190
    @lynx232Posted 3 months ago

    Does 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:

    1. 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;
    2. 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);
    3. 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! 🍻

    0
  • P
    lynx232•190
    @lynx232Posted 3 months ago

    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!

    0
  • DV-AN•100
    @AV-DNSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I’ve learned to create cards much faster, align items, and so on, but I’m still struggling with image manipulation, as well as learning to use the tag.

    What challenges did you encounter, and how did you overcome them?

    In images, I didn’t know the `` tag existed to switch images when the screen size changes. But I had problems making the site responsive for mobile screens, so that part is quite wrong, including the size of the card and the image as well.

    What specific areas of your project would you like help with?

    I’d like to know the best tutorials for CSS. I’m looking to review the content from scratch, especially about image manipulation and how to make a website more responsive.

    Product preview card

    1
    P
    lynx232•190
    @lynx232Posted 4 months ago

    "Does the solution include semantic HTML?"

    • Yes it does!

    "Is it accessible, and what improvements could be made?"

    • It is.

    "Does the layout look good on a range of screen sizes?"

    • No. As you are aware, anything bellow 768px doesn't look quite right.

    "Is the code well-structured, readable, and reusable?

    • It is. If I could make a suggestion anyway, even though this is more of a personal preference, use commentaries to categorize portions of your code.

    "Does the solution differ considerably from the design?"

    • No. Good job!

    Now, there's not much I can tell you to help you on your journey, since I'm a beginner myself, still here are a few things to consider:

    1. Good use of the reset, but I suggest you use a more modern one such as A Modern CSS Reset;
    2. Good use of css variables to define the colors you used;
    3. In order to fix the mobile breakpoint I suggest you use justify-flex-direction: column for mobile and flex-direction: row for desktop inside .container. Also I suggest you remove all padding for this class in order for the image to fit completely.
    4. If you don't want all the corners of a box(in your case image) to be rounded, or otherwise to be(see your product image for mobile breakpoint - left corners) you can use border-bottom/upper-left/right-radius to modify only the corners you desire;
    5. For mobile I suggest you use the margins function to modify the .container such that it will resemble the reference photo more;
    6. This one is very minor but it's good to know anyways - you could have also made "Perfume" uppercase by using the text-transform: uppercase" function in css.

    Overall I wish I could be of more use but I am just a beginner myself. Still, I think you did a very good job overall and while I think we both have a lot more to learn, I have to say that your code is the best I've seen so far here.

    Best of luck on your journey!

    0
  • José Mama•240
    @codesByJoseSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    most proud of my use of the forEach method and finally understanding its use case. also i figured out how to make the background take a background image and also plain color.. crazy.. something i almost didnt know.. and it feels good

    What challenges did you encounter, and how did you overcome them?

    parameters for the foreach was a lil issue but cheers to figuring it out !

    responsive faq page

    2
    P
    lynx232•190
    @lynx232Posted 6 months ago

    "Does the solution include semantic HTML?"

    No.

    1. <div> classes don't count as semantic html. In the future make use of tags such as <header>, <main>, <footer>, <h1> through <h6> to define different titles in the page(like your did for the FAQ) while also keeping that the numbers refer to a hierarchy(so <h1> should best be used once just once, meanwhile <h2> for exemple should be used multiple times for titles of the same importance);

    2. I suggest using <summary>(semantic) for the different titles instead of <div>;

    3. Keep in mind that empty classes such as <div> have no meaning to screen readers.

    "Is it accessible, and what improvements could be made?"

    Not quite. Start attributing classes to your elements(ex: <h1 class=''the name you feel is most fitting'">. Also you can use a naming scheme for subclasses such as <main class=''name of your choice'"> <h1 class=''name of your choice__h1 name of choice'").

    "Does the layout look good on a range of screen sizes?" No.

    1. Make use of media queries for a broader range of screens. For ultrawide make use of background: top repeat-x" so the svg file will stretch along the whole page;
    2. Adjust the font size, padding etc. to better reflect the reference photos provided in the rar file;
    3. Switch from pixel units to em/rem, vw/vh units so you'll have an easier time adjusting for different screen sizes.

    "Is the code well-structured, readable, and reusable?"

    While it is readable and to a certain degree reusable, try to use comments to delimitate different elements of the page in the future(ex: /Paragraphs/).

    "Does the solution differ considerably from the design?"

    Not by much. Just modify the padding down for the body element in css and increase the size of the card.

    Even though you still have a ways to go you should still be applauded for your effort as this is no simple endeavor. My advice is to learn more about html and css in general and to not get fooled by "miraculous" 1h crash courses which promise you to teach you everything there is to know. Make constant effort to improve, don't chase shortcuts and you will surely master web development.

    Best of luck on your journey!

    Marked as helpful
    0
  • Begli Amanov•80
    @begli-amanovSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Better structure

    • With the next project I will try to identify all similarities and differences between the elements and try to style them in a single rule, where possible. It could reduce the amount of editing of css file in a long way. After I've made my last commit, I've deleted another 25-30 unused lines of code.
    What challenges did you encounter, and how did you overcome them?

    There was different challenges I've encountered and all of them was funny to overcome. For example:

    • Creating borders for the table without setting its border-collapse set to collapse property. It does not work then.

    • When I used line-indent on the list-item text within this item is getting moved to the given direction, however the next line of the text starts a bit left from the first line. I've tried several properties, but the only way I've achieved desired results was setting padding-left: 1rem on element. Jap, so easy.

    • On the desktop and mobile version the image is looks differently. Mobile uses the full width of the page, where desktop version encloses it within a parent element and applies border-radius on it and so on. Solution I've used here is two different images with display properties set to hidden when needs one, and revealing it when it needs.

    Overall it was very interesting challenge to overcome

    What specific areas of your project would you like help with?

    Always excited about writing semantic HTML and CSS classes naming conventions. I will welcome any feedback regarding these.

    Mobile first approach created Recipe-Page

    1
    P
    lynx232•190
    @lynx232Posted 6 months ago

    "Does the solution include semantic HTML?" It does. But I would suggest to avoid empty tags such as <div> as much as possible in the future as they don't leave much room for interpretation for screen readers.

    "Is it accessible, and what improvements could be made?" It is.

    "Does the layout look good on a range of screen sizes?" Excluding ultrawide monitors(where the card stretches out width wise) it does.

    "Is the code well-structured, readable, and reusable?" Yes. Good use of comments for categorizing in the css file.

    "Does the solution differ considerably from the design?" Nope. Almost spot on... Good job!

    Marked as helpful
    1
  • Rafi Rachmawan•210
    @rafirachmawanSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    i will deepen my knowledge in the frontend field

    What challenges did you encounter, and how did you overcome them?

    The design form is difficult because in this project I can't see the detailed design of the figure

    What specific areas of your project would you like help with?

    maybe from a frontend perspective, even though I'm not a professional yet

    Html,Css,TailwindCSS

    2
    P
    lynx232•190
    @lynx232Posted 6 months ago

    "Does the solution include semantic HTML?" No. Next time instead of <div> elements which have no meaning to screen readers go by modern standards and use elements such as <main> for the card itself, <p> for the paragraphs, <nav>, <button> for the the links etc. Also, within a <footer> element add the "challenge by Frontend mentor"... contained in index.html found in the zip file provided.

    "Is it accessible, and what improvements could be made?" Make use of a <link> element that links to a css file. Also, implement your styling in the css file. The html file should be used only for structuring the page, meanwhile the css file should be used for styling. Think of the html file as containing the foundation of a house, it's walls, it's support pillars etc., while the css file contains the type of paint used, the floor's material, the roof's color etc.

    "Does the layout look good on a range of screen sizes?" No. In a css file you should use different techniques such as setting the font size to an em unit(the em unit is equivalent to whatever size is set by default on the used browser), using a width for the container of 100%(so that it will resize according to the browser), media queries so you can set some different rules depending on the screen size etc. It's also a good idea to implement some variables in order to avoid repetition and to keep everything more organized.

    "Is the code well-structured, readable, and reusable?". See question #1.

    "Does the solution differ considerably from the design?" It does. Next time use the font found in the style guide. Import it in the css file. And try to use the colors provided. Also the links don't change color as they are hovered over, so use functions in css next time.

    It is a great thing that you embarked on this journey, you will find that even though it requires hard work and patience it can be very rewarding. I suggest that you continue on this path, but my advice is to focus more on studying in order to become more skillful at this, be it by reading the documentation of css, html, watching youtube coursers of simply google-ing whenever necessary.

    Also, I recommend the following sites for honing your skills: "https://flexboxfroggy.com/" - a game for teaching you about css flexboxes; "https://cssgridgarden.com/"- a game for teaching you about css grids; "https://validator.w3.org/" - a platform for checking if your html file is up to modern standards; "https://jigsaw.w3.org/css-validator/" - a platform for checking if your css file is up to modern standards.

    Best of luck on your journey!

    Marked as helpful
    0
  • Mirela Oliveira•40
    @MichyOliveiraSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Conseguir termianr em um curto tempo.

    What challenges did you encounter, and how did you overcome them?

    Com os tamanhos dos textos e tamanho da caixa de conteudo, para ficarem responsivos e no centro.

    What specific areas of your project would you like help with?

    Em como posso melhorar tamanho de textos e titulos, e como deixar a caixa de conteudo no centor sem prejudicar o quem tem dentro.

    Blog Card - HTML/CSS

    1
    P
    lynx232•190
    @lynx232Posted 6 months ago

    "Does the solution include semantic HTML?" Yes.

    "Is it accessible, and what improvements could be made?" Try to name the classes in english in the future.

    "Does the layout look good on a range of screen sizes?" The layout is way too big in 4k, try to limit it's width to 450px. Also use other measurement units in the future, for good practice, such as vh, vw, em, rem.

    "Is the code well-structured, readable, and reusable?" Yes. As far as I can tell.. :)).

    "Does the solution differ considerably from the design?" Yes. The card is too wide compared to the reference photo.

    0
  • P
    lynx232•190
    @lynx232Posted 6 months ago

    "Does the solution include semantic HTML?" Replace the div elements with semantic elements such as "<figure>"

    "Is it accessible, and what improvements could be made?" Places the css file in its own folder, such as "css" folder(for good practice sake). Add a background shadow to the "main" element in css.

    "Is the code well-structured, readable, and reusable?" Yes.

    "Does the solution differ considerably from the design?" No. Good job!

    1