Skip to content
OverviewSolutions
19
Comments
15
P
webdevbynight
@webdevbynight

All comments

  • webdevbynight•410
    @webdevbynightPosted 24 days ago

    Some feedback:

    • beware of relative paths starting with /: they start from the website root and, as you host your challenge on GitHub Pages, where it is hosted in a directory, the images do not appear (start the relative paths with ./ to resolve the problem);
    • some elements from the design are missing: the “ in the purple card background and the box shadows for some cards;
    • the grid container should have a maximum width for it does not stretch too much on very wide screens like a 27-inch one;
    • you should avoid using the height property to set the height of blocks containing and instead use min-height: if the contents are long enough, they can overflow when a fixed height is used for their container;
    • when using grid-template-areas, try to give the areas more semantic names (imagine testimonials change with different names);
    • when naming a class, for the same reason as above, use class with semantics in mind (I am talking about the classes named following the names of the people leaving a testimonial).

    I hope this feedback helps you.

    1
  • AymaneOnline•330
    @AymaneOnlineSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I've already done this challenge before, but as it was included in the Learning path of Frontend Mentor I've done it again. I'm happy with the time that it took me to complete this challenge compared to the last time, and also the small accessibility adjustments that I've done like role="presentation" on images that have decorative puposes.

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

    I've encountered some styling issues with the rating buttons as I gave them some padding and also some width and height plus some gap in the parent which made the card bigger than the. The solution was to get rid of the gap and the padding and instead keep the width and height and add justify-content: space-between in the ``.

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

    I would appreciate any feedback. 👍

    interactive-rating-component-main

    1
    webdevbynight•410
    @webdevbynightPosted 26 days ago

    Some feedback:

    • when applying display: none; to an input element, this element will not be rendered by screen readers at all (if you want it to be visually hidden, you can use your .visually-hidden class);
    • about your .visually-hidden class, the clip property is deprecated and you should use the clip-path property instead (I let you check it on MDN for further information about it);
    • the hover effect on the labels should also be available when using the keyboard, so that a user unable to use a mouse can see which option is being chosen when the focus is on the radio buttons, provided they are not hidden with display: none (try to apply the CSS declarations within the &:hover rule to a rule with a selector like input:focus + .radio-check);
    • since you used an empty alt attribute to your decorative image, you do not need to add role="presentation";
    • you should avoid using pixels to set font sizes (this video on YouTube explains why).

    I hope this feedback helps you.

    Marked as helpful
    0
  • Nikita Vologdin•470
    @NikitaVologdinSubmitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    I paid a lot of attention to details. Results can display numbers with up to 8 digits without breaking the layout. The app displays error messages according to validation results. I believe JS is written according to best practices and is easily scalable. I have tried to use pure functions as much as possible.

    Tip calculator app

    2
    webdevbynight•410
    @webdevbynightPosted about 1 month ago

    Some feedback:

    • the reset button is displayed with the colours foreseen by the design for the state when it is disabled (this button has three states in terms of design: disabled, enabled and hovered);
    • when I forget to choose a tip percentage, the error message “Can’t be null” is displayed, but when I correct the error, the error message does not disappear;
    • when clicking on the reset button, not everything is reset: the tip percentage button I chose is still checked, for example (by the way, to implement a reset button, you can just use the input element with the type="reset" attribute and let the form behave as it does when resetting, just adding a listener to the reset event to reset the amounts calculated to $0.00);
    • to improve the accessibility of the form when there are invalid inputs, you should have a look at ARIA (this article from Smashing Magazine can help you);
    • the two icons used to decorate the two main fields of the form do not need an alternative description, since they are decorative (by the way, they can be displayed as background images in CSS);
    • since you used TypeScript, you should avoid using the any type: the any type tells TypeScript not to check the variable, which can be pretty unsafe;
    • the as <type> statement in TypeScript can help, but should be used quite carefully, since it is a kind of hack: for example, instead of declaring const form = document.getElementById("form") as HTMLFormElement;, you can do this: const form = document.getElementById("form"); if (form) { /* Here the instructions where form is typed as the non-null type infered by TypeScript */ }, or this (in case you want to later use properties and methods that are specific to a form element): const form: HTMLFormElement | null = document.getElementById("form"); if (form) { /* Here the instructions where form is typed as HTMLFormElement */ };
    • when using TypeScript, in your .gitignore file, you should add a line to ignore any .js files generated by the TS transpilation.

    I hope this feedback helps you.

    Marked as helpful
    0
  • shpokas-io•150
    @shpokas-ioSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    Most proud that i`ve made almost pixel perfect responsive dashboard, using SCSS btw it is my first usage with it and i freaking loved it

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

    Challange one , when i fetch data from data.json for some reason i`ve got error, by inspecting it for some reason data.json file reads like html i did some digging using chatgpt but couldnt find solution , path of file is not a problem (I THINK XD) PLEASE help me with this someone

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

    Data.json reads as html document for some reason

    Time-tracking-dashboard | Pixel perfect | Responsive | Sass

    1
    webdevbynight•410
    @webdevbynightPosted about 1 month ago

    To try to resolve your bug with the loading of data.json, since, when previewing your page, the console tells it failed to load the resource and the server responded with a 404 status, you should try to contact the support at Netlify or to check if Netlify accepts JSON files and API fetching with relative URLs.

    When fetching JSON data, you should check if the response returned by the Fetch API does not include a 404 status or a ok property set to false before returning the response, like this:

    fetch("./js/data.json")
  .then((response) => {
    if (!response.ok || response.status !== 200) throw new Error(`Status error: ${response.status}`);
    return response.json();
  })
  .catch((error) => console.error(error.message));

    By the way, if it is fine to use .then() and .catch() methods, you can use async/await (have a look at my solution to see how to use).

    I hope this helps you.

    0
  • AymaneOnline•330
    @AymaneOnlineSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm mainly proud of the JavaScript part of the challenge. I'll try next time to do the styling faster because it took me quite some time.

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

    For the styling, what I can remember is that I was trying to figure out how to make the "subscribe" button positioned in the bottom of any mobile device. (by using margin-top: auto).

    Another problem that I've encountered is about CSS Specificity, where I needed to increase the specificity of the .hidden class using display: none !important; to prevent display: none to be overridden by something like display: flex.

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

    I need someone to tell me of the JavaScript code is good enough. The code works but I need to know if it does have any flaws and/or could be optimized.

    newsletter-sign-up-with-success-message-main

    1
    webdevbynight•410
    @webdevbynightPosted about 1 month ago

    Here is some feedback about your JavaScript code, as you asked for:

    • if you use querySelector() with just an ID as an argument, it is better to use getElementById();
    • once you selected an element with querySelector(), you can reach any descendent element starting directly from this element: for example, once you did const signUp = document.querySelector('.sign-up');, you can reach the element with the .error-message class doing const errorMessage = signUp.querySelector('.error-message');, which is better for performances;
    • you can simplify your regular expression using just [a-z] to target letters and adding the i flag (to make the regex case-insensitive);
    • on line 21, you do not need the second part of the statement, since an empty string does not match the regular expression against which it is tested;
    • finally, think of the FormData API to retrieve the fields values submitted.

    I hope this feeback helps you.

    Marked as helpful
    1
  • webdevbynight•410
    @webdevbynightPosted 2 months ago

    Some feedback:

    • the shadow of the component is not similar to the one in the design (the $box-shadow-3 variable is most similar) and you forgot to add the shadow to the tooltip showing the links where to share;
    • you should avoid declaring inline styles: declare them within stylesheets (inline styles cannot be cached by browsers);
    • the first image (the drawers) is a decorative one and its alt attribute should be left blank (alt="") and the value of the alt attribute of the avatar should be something like “Michelle Appleton’s avatar”;
    • you should clean your React repo, since you do not use the accordion components (dead code should be avoided);
    • your SCSS is well organised, but a bit too much for this challenge: since there is only one component, you do not need to split into so many directories (by the way, I am not sure I manage to maintain your SCSS so that easily).

    I hope this feedback helps you.

    Marked as helpful
    0
  • Xqgoji•120
    @JhinDanzoSubmitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    first time using sass for writing CSS

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

    responsiveness i want try to use relative values next time instead of px, as i was advised it is better for responcive designes

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

    any advise will be appreciated

    Meet landing page, html, css (sass)

    1
    webdevbynight•410
    @webdevbynightPosted 3 months ago

    Some feedback:

    • since all the images (except the logo) are cosmetic, you should try to serve them as background images in CSS (except for the gallery in the middle);
    • the logo should be inserted into a h1 element;
    • since the buttons are actually links, they should be tagged as a elements instead of button;
    • even though you use SCSS, you can now use custom properties to define variables in most cases;
    • on the line 312 of your SCSS, when using grid-template-*, you should use repeat() when two or more sibling rows or columns have the same size: in other words, you should declare grid-template-columns: repeat(2, 1fr); instead of grid-template-columns: 1fr 1fr;;
    • you should avoid using pixels to define font sizes (here is a video explaining why);
    • to display the circled numbers and the line above, you can generate pseudo-elements and use CSS counters (it is a bit challenging, but pleasant).

    I hope this feedback helps you.

    Marked as helpful
    0
  • webdevbynight•410
    @webdevbynightPosted 3 months ago

    Some feedback:

    • you should enhance the semantics of your HTML, by using h1-h6 elements to tag headings, the article element to tag each card and the blockquote element to tag the testimonial text (since it is a quoted text);
    • when using @font-face, you can use the WOFF2 format, which compresses TrueType and OpenType fonts (if you want to know how to convert a .ttf file to .woff2, check this article);
    • when declaring areas for a grid layout, it is better to use names with semantics in mind: instead of using the first names of the testimonials, use names such as “first” or “last” and, by the way, you can leave some areas unnamed, by using the null token (.);
    • even though you used relative units to define font sizes, you used pixels to reset the default font size (_settings.scss, line 26): remember you should always avoid using pixels to define font sizes;
    • even though you use SCSS, now you can replace Sass variables by custom properties in most cases.

    I hope this feedback helps you.

    0
  • Rubens Carvalho•80
    @RubensTMSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Na proxima vez nao faria nada diferente, pelo contrario, faria totalmente igual.

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

    Nenhum desafio

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

    Nenhuma

    Usei o flexbox

    1
    webdevbynight•410
    @webdevbynightPosted 3 months ago

    Some feedback:

    • you should better organise your projects by grouping your stylesheets into a folder, the images used into another one;
    • when using several images as background images, think of grouping them into a single one, in other words think of image sprites (check this page on MDN);
    • in your HTML, you defined the language used with lang="pt-br" in the html root element, but since the page is in English, and not in Brazilian Portuguese, you should write lang="en";
    • you should enhance the semantics of the HTML, by using the header element to wrap the page header;
    • you should group the two sibling h1s on the header into one;
    • for each section in the main part of the page, you should use h2 instead of h1: it is generally not recommended to have multiple h1s in a single page;
    • when defining font sizes, avoid using pixels and use relative units instead such as rem (here is a video explaining why);
    • since you used Sass, you could have refactored the CSS rules to declare the top borders of each box (in Sass, you can do it using the @each rule).

    I hope this feedback helps you.

    0
  • webdevbynight•410
    @webdevbynightPosted 3 months ago

    Some feedback:

    • the repository of your solution is not available;
    • when using h1 to h6, make sure the hierarchy between level headings is relevant and avoid using a h4 before a h1, for example;
    • on mobile and on Safari, the rounded corners of the image do not appear (maybe a bug, because they appear on Firefox and Chrome);
    • on desktop and on Safari, the way you use flexbox makes vertical margins too high compared to the design (maybe a bug, because on Firefox and Chrome, the margins are as expected);
    • when testing your front-end development, test your CSS on several browsers to make sure no bugs are left, including on Safari (if possible);
    • when defining font sizes, you should avoid doing it in pixels (like on line 75 of your stylesheet) : here is a video explaining why.

    I hope this feedback helps you.

    0
  • webdevbynight•410
    @webdevbynightPosted 3 months ago

    My feedback about your solution:

    • you should enhance the semantics of your HTML, by using elements such as main (to wrap the main content of the page), article (to wrap the whole recipe content) and section (to wrap the section about the preparation, at least);
    • “Preparation time” is a header and should be, therefore, tagged as a h2 rather than a b element;
    • if you use a table for tabular data, you should be aware of the th element and the scope attribute to make the table more accessible to screen reader users (by the way, the data concerned can be tagged as a definition list, with dl, dt and dd);
    • beware of text-indent: this property only indents the first line, so it is not appropriate for li elements (use margins or paddings instead);
    • on your reset stylesheet, avoid using pixels for font size, even to reset the default one (here is a video telling why);
    • even though you use SCSS, now you can replace Sass variables by custom properties in most cases.

    I hope this feedback helps you.

    0
  • webdevbynight•410
    @webdevbynightPosted 4 months ago

    Some feedback:

    • the design file shows that the links texts are permanently bold, not only when hovered;
    • you should enhance the semantics of your HTML: the attribution footer should be wraped by the footer element, the main content should be within the main element and the card should be tagged as an article or section element (don’t hesitate over having a look at the HTML elements reference on MDN);
    • you should use relative units for font sizes such as em or rem: when using pixels to set font sizes, I am afraid this can lead to accessibility issues with users needing to be able to zoom texts in (by the way, you can define all dimensions, widths, paddings, margins, gaps… by using relative units: the design will get more elastic);
    • when possible, avoid using fixed heights: if you need to set a height, to use min-height is preferable;
    • if you want the whole container to occupy the whole height of the viewport, think of min-height: 100 dvh (check for relative length units based on viewport if you do not know what such a unit stands for);
    • even if Sass is a great tool, you do not need to use Sass variables any more to define colour values, since CSS has custom properties;
    • on main.scss, line 41, just declare font-weight: bold if you want to use the bold weight of the font (since there is only one font used, declared previously, you do not need to use font-family again).

    I hope this feedback helps you.

    Marked as helpful
    1