Skip to content
OverviewSolutions
24
Comments
14
DanielK
@DanK1368

All comments

  • DanielK•440
    @DanK1368Posted over 2 years ago

    Hello,

    You can use another div as the parent element of your current navbar, and give it a position absolute. Give it a width and height of 100% to cover the whole viewport.

    1
  • Byron•2,290
    @byronbyronSubmitted over 2 years ago

    Hello ladies and gentlemen! Here's my fantastic version of the Intro section with dropdown navigation. I've build this lovely design using Tailwind and Alpine.js and it was rather easy. I hope you enjoy looking at it! Feel free to leave a little red heart for my work, thanks! ❤️

    Intro section with dropdown navigation using Tailwind and Alpine.js

    2
    DanielK•440
    @DanK1368Posted over 2 years ago

    Hi Byron, nice work. I uploaded the challenge the other day and for some reason when viewing the site on my cellphone I can scroll beyond the content. I have overflow set to hidden though. The same occurs when viewing the site in the browser using the responsive window and setting the touch simulation to enabled. When its disabled though, it works as intended. Hope you can have a look :) I used react and styled components for mine

    0
  • DanielK•440
    @DanK1368Submitted over 2 years ago

    Hi guys, Since I'm practicing React as my first framework and recently familiarized myself with styled components I wanted to put that into practice with this challenge.

    I'm hoping to hear some feedback on what I could have improved on/written more efficiently. :)

    Responsive Dropdown Navigation using REACT & Styled Components

    3
    DanielK•440
    @DanK1368Posted over 2 years ago

    I also just realized, that when viewing the site on mobile you can scroll beyond the content ( right and down ) . I'm not sure why that is..

    0
  • DanielK•440
    @DanK1368Posted over 2 years ago

    Hi Leonel,

    You have to apply the top borders to your illustration image. border-radius: 10px 10px 0px 0px; Then it should work.

    Also to get rid of the Accessibility issues you have to wrap your content in a <main> tag. The order summary text should be an <h1> Tag.

    Hope this helps a little.

    Happy Coding

    Marked as helpful
    1
  • DanielK•440
    @DanK1368Posted over 2 years ago

    Nice one, it is also responsive.

    I would suggest adding a box shadow on the sign up button to make it stand out more. You should also add the hover state for that, to make it more interactive.

    0
  • Luis•20
    @lnaranjocSubmitted over 2 years ago

    Hello Guys, This is my second challenge. I have been coding for about 3 months. At the beginning of this challenge I struggled with the layout. Then I found some info about CSS flex and decided to give it a go. It did the job I guess, although I didn't manage to complete the last part of the challenge as smoothly as I wanted. I mean the "stats" bit: I created two flex divs, as I understand two of them are necessary because numbers and text are to be styled in a different way. So I thought it'd be easier like this. The problem came when I had to align the margins (left margins) for both numbers and text. To get this done I had to manually change margins (h2's and h3's), and I wonder if there's a quicker and more efficient technique to align these numbers and text elements.

    On the other hand I also struggled a bit with the fonts: for instance I had to reduce or increase the pixel size of some fonts to make the design closer to the solution. I don't know if this is OK, or I should have used different elements to display de text. In the style guide it says that the font size should be 15px, but if I applied that size, some text would be bolder than the solution, or bigger, or smaller... I would really appreciate any advice on this.

    Finally, I didn't even try to get the responsive mobile version done. I checked the W3 Schools article https://www.w3schools.com/css/css3_flexbox_responsive.asp but it seems a bit complicated. I guess there's no easy way or shortcut to make the challenge responsive is it? Do you recommend any tutorial for beginners regarding this?

    Thank you very much in advance for your feedback friends!

    Luis

    stats-preview-card-component

    3
    DanielK•440
    @DanK1368Posted over 2 years ago

    As stated above already, you need to make use of the flex-box properties such as justify-content, and align-items in combination with display: flex. By doing so, there's no need to to give all your different headings margins. I suggest you watch this recent video from Traversy Media on flexbox, you'll be more comfortable on using it afterwards. Flexbox video

    0
  • Lorenzo Franco•480
    @LfrancosSubmitted over 2 years ago

    I'm really happy that I was able to create this : )

    Since I started this journey, I've always been very intrigued by API. I still don't understand them in a deep way but hopefully by working more with them I'll be able to understand them better.

    What I'm feeling right now is that an API is the documentation of the different links to the JSON files. (I may be really wrong)

    If any of you has an easy way of putting what it is in an easy way, I would really appreciate it : )

    Thank you!

    Advice generator app solution

    1
    DanielK•440
    @DanK1368Posted over 2 years ago

    Hi Lorenzo

    Great work on this challenge. I've completed this one the other day too. Not sure if you tried to open it with firefox, but you will notice that it isn't working. It works just fine in chrome though. I've had a similar issue, and it turns out that the requests made to get an advice are being cached in firefox. So to get around that you add the following:

    const data = await fetch(' https://api.adviceslip.com/advice', { cache: 'no-cache' } , );

    It should then also work in firefox. :)

    Marked as helpful
    0
  • DanielK•440
    @DanK1368Submitted over 2 years ago

    Hi guys, appreciate any comments or suggestions regarding either the HTML/SCSS or JS file. Anything that can be written better/more efficiently?

    Also, for some reason if I run the site on Firefox and click the button it doesn't seem to update the advice after clicking the second time. In Chrome I can update it without any problems. Anything I am missing here?

    Hope to hear from you. Thanks!! :)

    Advice Generator App using HTML5/SASS/vanillaJS

    1
    DanielK•440
    @DanK1368Posted over 2 years ago

    So thanks to the Frontend Mentor community I was able to finally fix the problem in firefox. The site should be working as intended now :)

    0
  • LiBee•370
    @Li-BeeSubmitted almost 3 years ago

    This is the first true responsive design I have done for desktop, tablet and mobile - so would appreciate opinions on what needs to be improved or best practice principles which need to be applied?

    One thing i did not is the layout does look different on laptops - what is the usual breakpoint people use for laptop media queries?

    All feedback welcome.

    Responsive pod landing page using Flexbox, CSS Grid

    2
    DanielK•440
    @DanK1368Posted almost 3 years ago

    I just uploaded the same challenge this morning. It was fun, and i think you did a good job.

    To get rid of the issues in the report you should update the alt attributes for the images in case they cannot be displayed.

    I also noticed that when viewing your page on my mobile phone, the image of the host is almost gone. I would adjust the opacity of the overlaying color for the image to come out more.

    I usually start around 960px to above 1000px to do the layout for the laptop. However, I think its generally better to adjust the layout as soon as there is enough space for the content to fit for the desktop version. Once the layout starts to look awkward as you grow the window you should add changes, i think it will make the overall transition look nicer too. :)

    Marked as helpful
    1
  • Jesus Rebeitte•110
    @RebeitteSubmitted almost 3 years ago

    I have one question:

    I learned that I can give a fixed font-size to the document html using Font-size: 62.5% to have 10px and use rems. However some people says that is not correct because the percentage is not the same for all browsers.

    My doubt is: What is better to use, px or %?

    3 columns challenger solution

    2
    DanielK•440
    @DanK1368Posted almost 3 years ago

    Hey..i usually apply a font size of 62.5% for the whole project. It's just a bit easier to calculate as 1rem will equal to 10px. Without setting this percentage it will be 1rem=16px.

    You generally want to avoid using px for setting widths and heights, as it will not be responsive to the size of the screen. Unless you really want it to be fixed then you can use px. It depends on what you want to achieve. :)

    0
  • Ngoc Tran•40
    @tranngocteam79Submitted almost 3 years ago

    Hi guys, Could you guy please take a look and give me some feedback? I have just learned HTML & CSS for 2 months.

    HTML CSS

    2
    DanielK•440
    @DanK1368Posted almost 3 years ago

    It looks good :)

    I have one suggestion. I would add a border-radius to the hover effect of the image, the same one that you applied to the image itself. It will look nicer.

    Marked as helpful
    1
  • DanielK•440
    @DanK1368Posted almost 3 years ago

    Hey, good job on creating the site.

    In order to get rid of HTML issue, you need to apply proper HTML5 semantics. Wrap your entire content in a main tag. You can also then apply the following to center everything:

    main { display: grid; place-content: center; }

    You also need to use an <H1> tag. Wrap your text in your .heading class in an <h1> tag, and it will solve the other issue. I also noticed that you do not wrap your other text within your div containers in any <p> tag. You should do that as well. It will assist the screen readers.

    Hope this helps :)

    1