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

  • Daniel• 240

    @Flashdaniel

    Posted

    Nice work. I like to give you a few pointers that will benefit you.

    1. Value more schematic HTML like article, header etc. than div. I see you used it a lot in your code.
    2. When using <img> make sure you add meaningful description of the image with the alt attribute. Can only leave alt empty when the image is just for presentation like when used to display icons. HAPPY CODING.

    Marked as helpful

    0
  • micfrazer• 60

    @micfrazer

    Submitted

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

    I'm proud of myself for finding resources where I got stuck and correcting errors along the way.

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

    I was having issues with the footer; I made the position absolute. Other minor syntax errors were caught.

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

    I'd like suggestions for the positioning of the footer. If I don't use absolute, the footer moves to the right of the social links box OR on it. How can I more specifically adjust my CSS to move the footer to center just below the box?

    Social Links Profile - flex, position, styling

    2

    Daniel• 240

    @Flashdaniel

    Posted

    Great work. You solution look good. I like to add to what @danielmrz-dev just said.

    Your footer is outside the body tag. So Include it in the body tag the try applying @danielmrz-dev tip😌.

    1
  • P
    nekefer• 200

    @nekefer

    Submitted

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

    I am proud of how I use display grid.

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

    I struggle with postion of body and his height.

    four card components

    1

    Daniel• 240

    @Flashdaniel

    Posted

    Nice work. But I like to point out that you worked harder in your CSS.

    1. There was no need for position property in your CSS code. body was already properly positioned by the browser. Your struggle was as a result of the position: absolute.

    2. Learn to make proper use of inherited properties in CSS, for less code and avoid duplication.

    3. You can learn to make proper use of responsive units (like em, rem, %) in font-size, padding, width and margin. It helps to keep your site responsive if Users chose to resize their browser windows or change browser font size

    You can apply full height to the <body> by doing this

    body {
  height: 100vh;
}

    Or

    html {
  height: 100%;
}
body {
 height: 100%;
}

    Marked as helpful

    0
  • Daniel• 240

    @Flashdaniel

    Posted

    Nice work. I like to point a few things:

    1. Use headings h1, h2 ... h6 orderly, not h2 then h2 again like in your code.
    2. box-sizing property is not inherited, so adding it to the body element only affects the body. if your thought was to all the elements. Do this
    *,
*::before,
*::after {
  box-sizing: border-box;
}

    You can make your site more responsive by changing the .parent { grid-template-columns: 1fr; } to .parent { grid-template-columns: repeat(auto-fill, minmax( your, 1fr); }.

    Learn to make use of the repeat() function, instead of grid-template-columns: 1fr 1fr 1fr; Do grid-template-columns: repeat(3, 1fr);. And don't use grid-template-rows if it's not necessary like in your case, allow Auto-placement in grid to make that decision for you.

    Marked as helpful

    1
  • María López• 240

    @oppahero

    Submitted

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

    Instead of using the media query to change the columns of the grid template, I want it to be a dynamic grid.

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

    Initially I made a dynamic grid assigning it to the card grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) and it worked well

    However, when I set max-width max-width: 600px; to the card it stopped working correctly

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

    • Html semantic
    • Grid

    How can I make a dynamic grid without using media queries grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) , but make the container have a maximum width

    Product preview card using CSS flex and grid

    1

    Daniel• 240

    @Flashdaniel

    Posted

    Great solution Maria. I Cloned your repo and checked it out myself. i found out that the problem is not the max-width on the container, but the flexbox algin-items property on main used in centering the card. Remove it and you have a dynamic grid.

    main {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */
}
    0
  • P
    ljmanayon• 90

    @ljmanayon

    Submitted

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

    • Learned more about semantic html, list and table elements

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

    • I'm having a hard time styling the table element. I had to read the documentation and read some codes of other developers

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

    • I'd like to use bootstrap, but haven't fully grasp the idea. Kinda overwhelming for me.

    Responsive Recipe Page using Flexbox

    1

    Daniel• 240

    @Flashdaniel

    Posted

    Nice work! I like to point out that using of vh and vw can cause on expected behavior in your code. i am guessing that is the reason you don't have spacing at the top and bottom of your page.

    When next you want to increase the height of you page make use of this code:

    html,
body {
  height: 100%;
}

    Always remove unused codes to keep you work clean. You can checkout this link by Dixita Ganatra to help you understand more on how and when to properly use responsive units ( like px, rem, em ). Great work ljmanayon,

    1
  • Goldeenrock• 50

    @OrnellaSablic

    Submitted

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

    I am very satisfied with the final result because I think it looks very similar to the original design.

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

    It's the first time I combine the use of grid and flexbox and use the grid documentation specifically to center the main container.

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

    Any suggestion is welcome!

    Social Links Profile

    1

    Daniel• 240

    @Flashdaniel

    Posted

    Nice work! But you forgot to add space (margin or padding) at the edges of the page. You also forgot to change the color of the social link on hover and used white instead.

    I see you mixed fixed units and responsive units in your code. Always use Responsive units on places like font size, padding, margin, width, and fixed units on border width. You can check out this link on Dixita Ganatra to learn more on how to use them.

    0
  • agsendo• 10

    @agsendo

    Submitted

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

    In this project I mostly used the margins and padding to match it to the design. In the future I would focus more on other techniques of centering the elements.

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

    I tried a few methods to keep the footer at the bottom. Finally, I implemented the absolute position.

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

    I would appreciate some feedback on placing the footer, as well as best practices for centering elements on the screen, eg. div.

    QR code component

    2

    Daniel• 240

    @Flashdaniel

    Posted

    Great work agsendo. You can also use Grid to center elements and also push the footer at the bottom of the page.

    Make use of responsive units like em and rem for font size, padding, margin, and width, and use px for places like border, and border-radius. Users can increase their browser font size or zoom their screen and you will want you site to look good and responsive in that case. Read more about responsive unit a post by Dixinta Ganatra

    0
  • Daniel• 240

    @Flashdaniel

    Posted

    Hi Satyam. Great work. There are few places I like to point out. You should not pust texts on <div> and <span>, because they are used for grouping element not for texts. Put your text in the right element tags like <p> element tag can help in responsive design. Also you should know that screen readers don't read texts on <div> and <span>.

    Make use of semantic HTML <time> tag when working with time not <p> tag. It include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.

    In your Stylesheet don't add both max-width and width at a time. Is either you are using one not the two or you can use min-width and max-width. When added Line height I saw that you forgot to add the unit. I recommend using responsive units like rem, em when working with font-size, margin, padding, width and use px when working with border and border radius . If responsive units was used In the project, you wouldn't need to use media query. Overall You solution is great!

    0
  • P
    AbdulMalik• 50

    @frontendprof

    Submitted

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

    Next time I am planning to host fonts locally.

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

    Since it is small project, I have not faced a difficult issue yet.

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

    Any idea to improve my project is appreciated, since it is my first project after long time. If I find any idea helpful, I try to incorporate them in my next projects.

    Qr code challenge

    2

    Daniel• 240

    @Flashdaniel

    Posted

    Great work AbdulMalk! I like you solution. I learned something new reading your code. I just want to point out that I don't use flexbox or Grid in my code on till I really have to use them. Great power comes with great responsibility. Also I saw you didn't make use of inheritance in CSS. It can help reduce code and make it cleaner. Nice work.

    Marked as helpful

    0
  • wey song• 130

    @teuthix

    Submitted

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

    I was most proud of figuring out how to get the qr code centered in the middle of the page. I think it gave me a better understanding of justify-content versus align-items and how to use them.

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

    Figuring out how to center the qr code vertically was challenging. It involved some googling and rereading how flexboxes work.

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

    If any of my code doesn't follow best practices, I would love to know how to improve my code in that way.

    QR code site using flexbox

    2

    Daniel• 240

    @Flashdaniel

    Posted

    Hi, Wey! Great work. Going through your project code I saw that you used a media query. I think it was not necessary if you had used responsive length units (eg. rem, em ). You should also avoid using responsive units like percent (%) in places like border and border-radius. instead, use fixed units. take a look at my version of the same solution on Github account to see how I achieve mobile and desktop design with just the use of responsive units. All the same, I think you did great work. Check out this link https://medium.com/@dixita0607/css-units-for-font-size-px-em-rem-79f7e592bb97 to get a better understanding of responsive unit.

    Marked as helpful

    0
  • Shivam• 520

    @shivjoshi1996

    Submitted

    Hi everyone,

    I used React (currently learning) to build this app. I found it quite challenging due to being new to React and not knowing how to do certain things that I know how to do in vanilla JavaScript.

    A few questions that would really help me out:

    1. What is the best way to show which button has been selected? I thought about storing something in the state of the "tip selection" component, but I'm not sure what I should be storing, and how I would dynamically change the colour based on which button has been stored in state (would I change the prop of the selected button somehow?)

    2. Any improvements in how I have organized my React code would be great, primarily the way I am utilizing components and props (I know my styled-component and JS code looks quite messy in the calculator component).

    3. I also got ESLint errors "JSX Props should not use functions", but I'm not sure how else I would achieve this functionality without sending some of the functions down to child components. Any ideas on how I could avoid this error?

    4. I didn't get around to adding the error states, opting to try to conduct validation in the input fields instead. If I were to add error states, would I simply use state to check if the input is valid (turning state to either true or false), and then use a conditional in the JSX to display the error message if state says the input is invalid?

    Any other comments would also be appreciated!

    Tip Calculator App using React, Styled Components, Grid, Mobile-First

    2

    Daniel• 240

    @Flashdaniel

    Posted

    Hi Shivam! I love your react app it's amazing, congrats. How I track buttons clicked or selected in react is by given them a selected prop attribute with an index number and use a condition statement to check the button click then I do whatever I want to do to have that button clicked or selected. There are other better ways of doing it but this is my own solution. here is a link to my Github page where I implemented it and I hope it helps you. https://github.com/Flashdaniel/my-portfolio-reactjs/blob/main/src/components/ui/Header.js

    Your code is nicely formatted but I recommend adding prettier code formatting. it helps you and other people that want to download or clone your code in the future

    For Error handling you write: const [error, setError] = useState(false); Validate the input and setError (true) if there is an error. then u can write in JSX, a condition statement to display a message based on what error is. I hope this was helpful

    Marked as helpful

    1