@lynx232
@codesByJose
Submitted
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 !
"Does the solution include semantic HTML?"
No.
<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);
I suggest using <summary>(semantic) for the different titles instead of <div>;
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.
"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
@begli-amanov
Submitted
What are you most proud of, and what would you do differently next time?
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.
"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
@rafirachmawan
Submitted
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
"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
@MichyOliveira
Submitted
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.
"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.
@abhi-zero
Submitted
"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!
