Skip to content
OverviewSolutions
23
Comments
20
Irina Lagutina
@FoxMalder-coder

All comments

  • P
    Kiara•220
    @Kiara523
    What are you most proud of, and what would you do differently next time?

    I'm getting better at organizing the work flow. There is always room for improvement.

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

    It was fun to style the ul and ol. It was a bit challenging to figure out how to make space between the dots and the list item. I've found a very useful resource at "css-tricks.com" website.

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

    I'd like to implement my code with more responsiveness without having to write long media queries. I know that using a clamp() function could help. Any suggestion on other technics that I can study to implement responsiveness are welcome! FEEDBACKS on how to organize the css file better so it is more readable and also I'd like feedbacks on naming classes...are mine too generic?

    Pure HTML5 and CSS Recipe page

    1
    Irina Lagutina•640
    @FoxMalder-coder
    1. You already have just ONE media query) But it's not mobile-first approach.
    2. I suggest to set basic text attribute to body, then you don't need text class.
    3. You can use BEM naming. Or in little case (like this) one-two word class name page-title, subtitle (ingredient, instruction, nutrition) --- h2__prep isn't good. You don't need new class for item which pay same role and looks same just because it is inside new section...
    Marked as helpful
  • Gigantisk•40
    @Gigantisk
    What are you most proud of, and what would you do differently next time?

    Most of the page.

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

    Create a table and separate line.

    Research how to do it on internet.

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

    Some advice for better accessibility on different device, or any other advice for table.

    Recipe Page - HTML - CSS

    3
    Irina Lagutina•640
    @FoxMalder-coder
    1. There is a easier way to deal with rem. a) your need set font: size: 62.5% to html --- rem will be 10px; b) set initial (if so) value to body font-size: 1.6rem --- 16px for text-elements and then c) use any rem values inside your's css --- like 240px is 24rem - no hard calculation)))
    2. To make adaptive layout use max-width instead of width (image, table and container). Also don't forget to make images display: block
    Marked as helpful
  • Ahmad Wafa•170
    @Ahmad-Wafa
    What are you most proud of, and what would you do differently next time?

    I am exited that I am doing the challenges in a beautiful way and using different tools .

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

    I had a problem aligning the text to the left for all the elements

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

    How can I make my Landing page very responsive page for all sizes . ?

    Responsive Landing Page Using Pure HTML & CSS

    #pure-css
    2
    Irina Lagutina•640
    @FoxMalder-coder

    Hi! You just need to change (width: 570px) to (max-width: 570px) for main element in media query (min-width: 401px)

    Marked as helpful
  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! It's a cool idea - 'Hide info' button!

  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! Then I use installed local tailwind for work, and then (on live site) use output.css file no error in HTML issues appeared.

  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! To make picture grow-up correctly use object-fit: cover and overflow: hidden. For positioning you could try: first 60% (wrap picture in div with width: 60%) and second 40% (left part), then set span left: 60%... It's not exactly numbers, just for example.

  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! Your slider changes only pictures not text. Logo on desktop is stretched. And also I'v suggest to use some transitional layout between 375px and 1440px

  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! To make grid row the same height use grid-template-rows: 1fr 1fr or repeat(2, 1fr). Also I'v suggest to use some intermediate grid between small screen and desktop, and center content on large screen. About js - first cut styling from js to css (h6.daily, h6.weekly, h6.monthly have same styling for passive state and active state - use one class for passive, for example, selector, and another one for active, for exemple, selectorActive; and then just toggle class in js). Another thing is that your doing the same in all three function - try to pass value (daily, monthly, weekly) inside just one function. p.s. strange to see camelCase in html...

    Marked as helpful
  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! Thanks for your feedback! I've see some little things on your's :) About design:

    • on desktop menu items have normal font-weight;
    • orange border on active thumbs not opacue;
    • in lightbox cross has white color in normal state; About functionality - if you use localsrotage on adding item first you need to check whatever this item allready in cart. If so, just correct quantity not adding another one.
  • Irina Lagutina•640
    @FoxMalder-coder

    One of posible solution is:

    1. Reset margin on body. Make it min-height: 100vh.
    2. Set just padding-top to main. Any other margin exept margin-right: auto and margin-left: auto set to 0 or not install at all. The other one:
    3. The same. And make body flex with center align and justify.
    4. Set all margin and padding for main to 0.
  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! But this toddler is not driven by user... What exactly your want to code in JS? If you want user to be able to control this bar you need something like this... [MDN] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output) The basic idea: in html we have 3 element - progress with id (for example #space) with some value, 2 tags (span or whatever) with id (for example #used and #reserved, now it 815 and 185). In JS we find #space, take it value and write to #used and to #reserved (return 1000 - value). If you want to play with it, you need to add event listener to #space (to change #used and #reserved). Progress tag is hard to stylize. But change the digits on the page according to progress value is not so hard. I hope I'am no confused you)))

    Marked as helpful
  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! Page is not adaptive under 830px... And on desktop better limit content width by "max-width: 1110px"

    Marked as helpful
  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! You need to change "height: 90vh" to "min-height" and add some padding-bottom to body. And you haven't any grid... It's grid challenge, try some - it's funny and powerfull)))

    Marked as helpful
  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! The cards could be positioned by using "order: number". "number" can have positive or negative value. To put the quotation mark (use the full properties): first set background-color, then set background-image (don't forget you need path like ../images/), background-position and background-repeat. Sometimes we need background-size also but not this case - here size is 100% of origin so we didn't need to correct it.

    Marked as helpful
  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! I have some suggestion... You need to add some padding on the screens less the desktop size. Also it's really the bad practice to use <br> tag.

  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! Try to think of content like just 1 grid - not 3 like in your case. All articles are grid cells. Use grid-column (or grid-row) properties to make them take more then one cell. For examlpe, grid-column-end: span 2 - make article take two column width. Yor can use another grid for article's content of course.

    Marked as helpful
  • Irina Lagutina•640
    @FoxMalder-coder

    Bayma, you are really complicate all) This challenge mostly about grid-layout. It could be done whith only one grid and media queries. Try for tablet 3-column grid, and for desktop 4-column grid. Every article is a grid cell. Some article takes two rows, some two columns. Think in that way, and good luck!

    Marked as helpful
  • Irina Lagutina•640
    @FoxMalder-coder

    Hi! I think "lead" or "intro" will be good names. Your BEM is not bad, but some things could be improved. For example, review-card__info and review-card__info-2 is not really informative. I think it's better call them review-card__author, review-card__author-name, review-card__author-photo and so one... And for review-card__content I suggest review-card__text.

    Marked as helpful