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
Log in with GitHub
OverviewSolutions0Comments515

All comments

  • 👾 Ekaterine Mitagvaria 👾• 7,640

    @catherineisonline

    Submitted

    Hello, Frontend Mentor community! This is my solution to the Fylo dark theme landing page.

    I appreciate all the feedback you left that helped me to improve this project. Due to the fact that I published this project very long ago, I am no longer updating it and changing its status to Public Archive on my Github.

    You are free to download or use the code for reference in your projects, but I no longer update it or accept any feedback.

    Thank you

    Fylo dark theme landing page

    6

    Hexer• 3,680

    @Phalcin

    Posted

    Wow, good job. i want to ask what you use to make your design exactly like the original one, I mean in measurements and everything?

    1
  • Hexer• 3,680

    @Phalcin

    Posted

    • Great work, In these instances i wouldn't recommend you to use media queries because the design can be responsive on their own in these cases.

    • I think if you want to know more about media queries you should search on youtube and watch some tutorials about them.

    • Also use rems instead of px this also helps in responsiveness.

    I hope this helps. You can also check out my solution to see how i did it.

    Marked as helpful

    0
  • Vanza Setia• 27,855

    @vanzasetia

    Submitted

    Hello Everyone! 👋

    Finally, I completed another PREMIUM challenge! 🎉

    It was a challenge where I needed to play around with the background images. They were tricky! I also improved my old Regular Expression from the Base Apparel challenge. I had written everything that I learned in the README file. So feel free to check it out! (and give feedback on it 😄)

    Now for the questions:

    • I added alternative text for the Spotify, Apple Podcast, Google Podcasts, and Pocket Casts logos. However, the paragraph above the form element has mentioned all the platforms. I'm not sure that they are decorative or informative images. So, what do you think about it?
    • If you try using a screen reader on my website, can you understand the page content?
    • Can you navigate this website comfortably using your keyboard?

    Any questions on the technique that I'm using are welcome! 😁

    Also, if you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! 😀

    Thanks!

    Pod Request Access Landing Page | HTML CSS Sass JS (Regex)

    #accessibility#bem#sass/scss#lighthouse

    2

    Hexer• 3,680

    @Phalcin

    Posted

    Hi, checked all your projects and i must say, you are really good.

    I started programming about a month ago, I'm still learning html and css now. Can you give me a roadmap on what you did to become as good as you are now? I hope to hear from you soon.

    Thanks, Phalcin

    1
  • Vanza Setia• 27,855

    @vanzasetia

    Submitted

    Hello Everyone! 👋

    I finished my first premium challenge! 🎉

    The most challenging part was the number elements between sections. However, I managed to handle them with only pseudo-elements. That way, I didn't have to deal with the accessibility thing (hopefully). 😅

    Now for the questions:

    • I put the logo in a header. I'm not sure that it is correct or not, so what do you think about it? Should I put the logo inside the main element instead?
    • If you try using a screen reader on my website, can you understand the page content?
    • Can you navigate this website comfortably using your keyboard?

    Any questions on the technique that I'm using are welcome! 😁

    Also, if you have finished this challenge and would like me to give feedback on it, please include a link to your solution. I would be glad to help you! 😀

    Thanks!

    Meet Landing Page | HTML CSS Sass

    #accessibility#bem#sass/scss#lighthouse

    3

    Hexer• 3,680

    @Phalcin

    Posted

    Hi, checked all your projects and i must say, you are really good.

    I started programming not long ago, I'm still learning. Can you give me a roadmap on what you did to become good as you are now?

    Thanks, Phalcin

    0
  • P
    Daniel• 140

    @obriedan

    Submitted

    I strugged making this fully responsive, though I think I've gotten it about 85-90% of the way there. I started mobile first, but even so, because of the non linear changes in margins and gaps between mobile / tablet / desktop I ended up having to use a tonne of breakpoints and so many clamp()s

    If you check in responsive mode with dev tools, the site should be fluid and look okay in every viewport width. But I'd really like to figure out a way to make it fluid without so many breakpoints.

    So much clamp()... so... much... clamp().

    #cypress

    1

    Hexer• 3,680

    @Phalcin

    Posted

    Hi Daniel, I took some time to look at your solution and you did a great job!

    However I have some tips for improving your code:

    • Note that all img elements should have an alt attribute. By adding this it will prevent you from having html and accessibility issues here.

    Hope this help and happy coding!

    0
  • Hexer• 3,680

    @Phalcin

    Posted

    Hi Imen, I took some time to look at your solution and you did a great job!

    However I have some tips for improving your code:

    • Note that every section should have a header tag like <h1-h6> element. This will help you avoid html issues here.

    Hope this help and happy coding!

    0
  • Aakash• 10

    @Akash-pugazh

    Submitted

    I have not well optimized it for mobile can anyone suggest me how it can be done other than media query like can i learn bootstrap framework

    Nft Card challenge using css and html

    #progressive-enhancement#webpack#itcss

    3

    Hexer• 3,680

    @Phalcin

    Posted

    Hi @Akash-pugazh, I took some time to look at your solution and you did a great job!

    However I have some tips for improving your code:

    • Avoid using in-line styles in your html. Use css to style your page on a seperate document. What i mean is you should'nt use ie color: #fb2342 in your html but rather do it in css file.

    • wrap your card in a <main> element to fix accessibility issues.

    Hope this help and happy coding!

    Marked as helpful

    0
  • Jill Spencer• 30

    @jill-spencer

    Submitted

    This is my first front-end mentor project. In the earlier phases of learning. Any feedback is appreciated. Thank You

    Mobile-First with CSS Grid

    3

    Hexer• 3,680

    @Phalcin

    Posted

    Hi Jill, I took some time to look at your solution and you did a great job!

    Also I have some tips for improving your code:

    • add main tag and wrap the card for Accessibility
    • add some box-shadow to the container also to show that its a card.

    Hope this help and happy coding!

    Marked as helpful

    1
  • Mikołaj Kasperkiewicz• 70

    @PanMikolaj

    Submitted

    If u want to, You can point out some stupid mistakes and overworking. I did it with flexboxes because I thought it would be easy, but i know for sure that someone probably done it even easier.

    QR code component

    3

    Hexer• 3,680

    @Phalcin

    Posted

    Congratulations on completing this challenge Rudynieradosny.

    I have some tips to fix accessiblity issues:

    • wrap your card in a main element to fix accessibility issues. Just place the main element after the body element and them move the content in.

    i hope this is helpful and goodluck!

    Marked as helpful

    1
  • Hexer• 3,680

    @Phalcin

    Posted

    Congratulations Vinicius on completing this challenge.

    • Note that header tags are used so that the browser and search engines can identify what they are. They are not used so that the headers becomes big or small.

    • Use one h1 for every webpage, then you move on to h2. If you have other headers in the same section use h3. This will fix your accessibility issues also.

    I hope this helps.

    Marked as helpful

    1
  • Hexer• 3,680

    @Phalcin

    Posted

    Congratulations Beatriz on completing this challenge.

    • However i checked your code and i noticed you used h1 then you directly moved on to using h3's instead of h2's. one tip i can give you is to use one h1 for every webpage, then h2. If you have other headers in the same section you can use h3. This will prevent having accessibility.

    I hope this helps.

    Marked as helpful

    1
  • Hexer• 3,680

    @Phalcin

    Posted

    Hi Mounir, congratulations on completing this challenge.

    I have some tips on how to improve your code.

    • Note that element div is not allowed as child of element ul

    • Always note that when ever your add a section to your code it must have a header tag like h2, And if it has other headers in that section h3

    I hope this helps.

    Marked as helpful

    0
  • Hexer• 3,680

    @Phalcin

    Posted

    Hello Bouzar , congratulations on completing this challenge.

    I have some tips to improve your code.

    • Always use one h1 element for every webpage. Then use h2 for the others. If you have other children headers use h3. This will prevent accessibility issues.

    i hope this is helpful and goodluck!

    0
  • Hexer• 3,680

    @Phalcin

    Posted

    Hello Mariano , congratulations on completing this challenge.

    I have some tips to fix accessiblity issues:

    • wrap your card in a <main> element to fix accessibility issues.

    i hope this is helpful and goodluck!

    0
  • Hexer• 3,680

    @Phalcin

    Posted

    Hello Jihad , congratulations on completing this challenge.

    I have some tips to fix accessiblity issues:

    • wrap your card in a <main> element to fix accessibility issues.

    i hope this is helpful and goodluck!

    Marked as helpful

    1
  • Hexer• 3,680

    @Phalcin

    Posted

    Congratulations on completing this challenge.

    • One tip i can give you is to always note that every section should contain a header tag. like one h1 for every webpage and h2. Then if you have other headers in the section add h3. This will help fix any html issues.

    Marked as helpful

    0
  • Miguel Silva• 510

    @migsilva89

    Submitted

    I have learned how to use flex, and how to use @media with mobile first workflow.

    Tips for improve will be much appreciated.

    Thank you all! Miguel Silva

    CSS FLEX BOX

    2

    Hexer• 3,680

    @Phalcin

    Posted

    Hi Miguel, congratulations on finishing this challenge.

    I have some tips on how you can improve your code.

    • Wrap your card in a main element to fix accessibility issues by placing it just after the body element and draging your content inside.

    I hope this helps.

    Marked as helpful

    0
  • Hexer• 3,680

    @Phalcin

    Posted

    Congratulations on completing this challenge.

    I have some tips for improving your code. I checked your code and

    • Your linked stylesheet is missing something in the head. <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" It is missing > sign.

    • Also add a height of 100vh to your .content section to center your container.

    i hope this helps.

    Marked as helpful

    0
  • Hexer• 3,680

    @Phalcin

    Posted

    Congratulations on finishing this challenge Ibrahim.

    • One tip i can give you is to only use one h1 element for one webpage. Then use h2 for the rest. And if you have other headings that are children use h3

    Marked as helpful

    0
  • Rizki Pratama Turbina• 30

    @rpturbina

    Submitted

    Hi, guys!

    This is my first frontend mentor challenge project. In this project I have implemented the QR Code Component using a bit of the BEM methodology. I just use vanilla CSS to make this solution.

    Please give me your opinion on my solution. Your feedback is very valuable to me. Thank You!

    QR Code Component Solution using BEM

    #bem

    2

    Hexer• 3,680

    @Phalcin

    Posted

    Hello Rizki , Cogratulations on finishing your first challenge.

    • To fix your accessibility issues, wrap your card content in a main element. Add it right after the body.

    Marked as helpful

    0
  • Hexer• 3,680

    @Phalcin

    Posted

    Hello @wqais, I checked your code and fixed somethings for you

    • To fix your design a little bit, reduce the height on .card-background section to 50vh

    • Then add your background color to the body instead of card-background section

    • Then change the margin on the card background to margin: 0% 10%

    • Then add top: 16rem

    I hope i fixed some of the issues with your design.

    Marked as helpful

    0
  • Hexer• 3,680

    @Phalcin

    Posted

    Good job one finishing this challenge, however

    • To fix your issues, Note that all img elements must have an src attribute and an alt attribute

    • Also note that a div element is not allowed as a child of ul element.

    • Another thing is to add an aria-label to your btn__checkout. arial-label: btn__checkout. This will also fix some of the issues.

    i hope this helps.

    Marked as helpful

    0
  • Hexer• 3,680

    @Phalcin

    Posted

    Hi Danny, great job on completing this challenge.

    However I have some tips for improving your code:

    • Links must have discernible text. To fix this add an aria-label: img-hover to your link.

    • Also always add an alt attribute to your img elements to allow screen readers to know the thing on the website.

    Marked as helpful

    0
  • Hexer• 3,680

    @Phalcin

    Posted

    Hi, i checked your code and it was clean. however

    • add main tag and wrap the card for Accessibility

    • Add a box shadow to your card to make it look like a card.

    Great work man.

    Marked as helpful

    1