Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • P
    webdevbynight• 240

    @webdevbynight

    Posted

    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
  • P
    Xqgoji• 120

    @JhinDanzo

    Submitted

    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

    P
    webdevbynight• 240

    @webdevbynight

    Posted

    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.

    0
  • P
    webdevbynight• 240

    @webdevbynight

    Posted

    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

    @RubensTM

    Submitted

    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

    P
    webdevbynight• 240

    @webdevbynight

    Posted

    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
  • P
    webdevbynight• 240

    @webdevbynight

    Posted

    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
  • P
    webdevbynight• 240

    @webdevbynight

    Posted

    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
  • P
    webdevbynight• 240

    @webdevbynight

    Posted

    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
  • Wuffskyarts• 60

    @Wuffskyarts

    Submitted

    What are you most proud of, and what would you do differently next time?

    Going into this project, I felt more confident as the previous project was similar. This one ran a bit more smoothly, but I had to be super careful about my div styles. The figma file really helped!

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

    My biggest challenge was the padding, with multiple div's and styles. The way I overcame this challenge was using the inspector tool to see which parts of my CSS are influencing each style inside each div.

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

    I'd love to know if there are any areas I could optimize my CSS. I feel some of my styles could be assigned to the body variable. I'd also like to know if there's another more optimized way of coding this card.

    blog-preview-card-main-HTML-CSS

    1

    P
    webdevbynight• 240

    @webdevbynight

    Posted

    Some feedback:

    • you should better organise your code by grouping images and stylesheets (and scripts when doing JavaScript) into dedicated subdirectories, just like that:
    Your project
├── index.html
├── css/
|   └── styles.css
├── images/
|   ├── some-image.svg
|   └── another-image.webp
└── js/
    └── script.js

    ;

    • when declaring font families, you do not need quotes if the font name does not contain any spaces (for example: font-family: Figtree;) and, by the way, since Figtree is not a serif font, the generic font to declare is sans-serif;
    • you should avoid pixels to declare font sizes and instead use relative units such as rem for accessibility purposes;
    • you should try to use relative units for paddings, margins and dimensions for the design to be elastic;
    • the text-align: start declaration is useless, since start is the initial (or default) value of the text-align property, same for flex-direction: row, since row is flex-direction initial value: do not hesitate over checking the initial values of each CSS property on MDN;
    • the justify-content: start is not needed here;
    • when using ampersands (&) within a text, it is better to code it with the appropriate HTML entity (&), since & is a special character in HTML (and XML) with which any HTML (and XML) entity starts;
    • to improve the semantics of your HTML, you should learn about the article element and the time element.

    Marked as helpful

    1
  • spoyodevelop• 20

    @spoyodevelop

    Submitted

    What are you most proud of, and what would you do differently next time?

    most of them are breeze, i was not sure i can make this sassy component by my own, still it looks bit off but it looks sassy too.

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

    first thing was looking proper line height and letter spacing and most typography stuff. hard to fine tune just look like preview one. second thing that i was really struggled without even noticing my problem was properly set my background cover up all the viewport height and width, i achieved this with manually setting vw, vh to 100.

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

    proper typography management and proper way of doing center a div.

    QR component solution

    1

    P
    webdevbynight• 240

    @webdevbynight

    Posted

    Some feedback:

    • the class="paragraph" is useless, since you do not use it on your CSS;
    • for the letter-spacing, you can use relative units instead of px;
    • to declare colours with alpha channel, the rgba() function is legacy: you can use rgb() instead, like this: rgb(0 0 0 / 0.4).

    The way you centered the div is good. If you want to know all the possible solutions to center a div, check this complete guide on CSS Tricks.

    1
  • Danielle Aranda• 20

    @DLMedeiro

    Submitted

    Looking for input on how others would style the "$29 per month" piece.

    Currently I have a H3 with 2 spans, the appearance is close, but this solution doesn't feel right and I wasn't able to center the "per month" portion.

    Thanks!

    Price Grid Gomponent using CSS Grid

    2

    P
    webdevbynight• 240

    @webdevbynight

    Posted

    Hello,

    Flexbox can be used, but you can also leave the span elements displayed inline, in which case you just use the vertical-align property on the first span to center it vertically. In other words:

    #money {
  vertical-align: middle;
}

    If you want to look further about vertical centering in CSS, just look at this resource on CSS Tricks.

    0