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
OverviewSolutions24Comments576

All comments

  • Agustín Firpo• 500

    @Arfirpo

    Submitted

    Hi everyone!

    This is a solution to the Huddle landing page with single introductory section challenge on Frontend Mentor.

    Links

    My process

    Built with

    • Semantic HTML5 markup
    • CSS custom properties
    • Flexbox
    • Mobile-first workflow
    • Sass - Css Preprocessor

    What I learned

    This challenge helped me to start experiencing the preprocessor sass. I explored the use of nesting, mixing and how to declare variables, always trying to understand the particularities and advantages of this tool.

    Continued development

    In the next challenges continue to use sass to deepen the use of this tool and its possibilities

    Author

    Responsive Huddle Landing Page

    #accessibility#bem#sass/scss

    2

    P
    AK• 6,700

    @skyv26

    Posted

    Hi @Arfirpo,

    Thank you very much—best of luck. Yes, we will be in touch.

    0
  • Agustín Firpo• 500

    @Arfirpo

    Submitted

    Hi everyone!

    This is a solution to the Huddle landing page with single introductory section challenge on Frontend Mentor.

    Links

    My process

    Built with

    • Semantic HTML5 markup
    • CSS custom properties
    • Flexbox
    • Mobile-first workflow
    • Sass - Css Preprocessor

    What I learned

    This challenge helped me to start experiencing the preprocessor sass. I explored the use of nesting, mixing and how to declare variables, always trying to understand the particularities and advantages of this tool.

    Continued development

    In the next challenges continue to use sass to deepen the use of this tool and its possibilities

    Author

    Responsive Huddle Landing Page

    #accessibility#bem#sass/scss

    2

    P
    AK• 6,700

    @skyv26

    Posted

    Hi @Arfirpo,

    I skimmed through your project and analysed your code (I have created the issue here on your repository) and It seems like you did a great job. But still, you can improve your code by using more semantic tags and your styles also need some improvements to achieve better design, which will help you to scale your project design easily. I am going to write some points down below, please have a look and try to implement the things for getting better results.

    <div class="footer__social-icons-container">
      <!-- facebook icon -->
      <a class="footer__social-icons__icon" href="#" target="_blank" >
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>
      </a>
      <!-- twitter icon -->
      <a class="footer__social-icons__icon" href="#" target="_blank" rel="noopener noreferrer">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
      </a>
      <!-- instagram icon -->
      <a class="footer__social-icons__icon" href="#" target="_blank" rel="noopener noreferrer">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
      </a>
    </div>

    
<ul class="footer__social-icons-container">
      <!-- facebook icon -->
    <li>
      <a class="footer__social-icons__icon" href="#" target="_blank" >
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z"/></svg>
      </a>
</li>
<li>
      <!-- twitter icon -->
      <a class="footer__social-icons__icon" href="#" target="_blank" rel="noopener noreferrer">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg>
      </a>
</li>
<li>
      <!-- instagram icon -->
      <a class="footer__social-icons__icon" href="#" target="_blank" rel="noopener noreferrer">
        <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>
      </a>
</li>
    </ul>

    • Yes, it is true that you need to now add the style in order to remove the dots which appear by default whenever we use the unordered list. But yes, now the question is **why? **, in web development if we are dealing with something which is nothing but a list of items, your social network links, navigation or any sort of information which do you think can be convertible to a list format then always use the unordered list tag. Even it will help the screen readers to maintain the flow of your website.

    • Please avoid the use of adding height manually except for the height: 100vh if you want to cover your whole desktop or mobile screen. I saw that you are using the height to adjust the element size. The best alternative for doing it using padding. Just give a try to things and see the result.

    Marked as helpful

    0
  • Jolijn Rosendaal• 190

    @Jolijn0101

    Submitted

    It was a great challenge. I had some struggle with trying to copy the design of the buttons. Hopefully they look the same as the design now.

    clipboard-landing-page

    1

    P
    AK• 6,700

    @skyv26

    Posted

    Hi @Jolijn0101,

    Great work, your design is impressive and also responsive throughout the devices. As I saw that you followed and use the correct semantics but not completely. Like look at below code

    <ul>
          <div>
            <li>FAQs</li>
            <li>Contact Us</li>
          </div>
          <div>
            <li>Privacy Policy</li>
            <li>Press Kit</li>
          </div>
          <div>
            <li>Install Guide</li>
          </div>
        </ul>

    you can actually use nested-list and make your code look like this:

    <ul>
          <li>
             <ul>
                <li>FAQs</li>
                <li>Contact Us</li>
             </ul>
          </li>
           ....
          ......
            ...
        </ul>

    Overall, really nice work.

    Marked as helpful

    0
  • P
    AK• 6,700

    @skyv26

    Posted

    Hi @Remmy1965,

    I just saw your project and congratulations. You completed it by applying your Tailwind skills for designing it. But still, you can improve your design, as the card is bigger than the expected design and please follow the correct semantics. Please wrap your whole body content with main tag. It will resolve your above mentioned issues.

    Marked as helpful

    0
  • P
    AK• 6,700

    @skyv26

    Posted

    @visualdenniss Thank you very much. I will do it

    0
  • P
    AK• 6,700

    @skyv26

    Posted

    Hi,

    I saw your work and because I checked it on my mobile then I found that your nav menu was open on click but not able to close it .

    with regards Aakash Verma

    1
  • P
    AK• 6,700

    @skyv26

    Posted

    Good Work !! Keep it up.

    0
  • P
    AK• 6,700

    @skyv26

    Posted

    Hi! Ahmed,

    I hope you are well and good. I am working on this project. I am randomly checking developer's work, whom I am following, to get inspiration and you are one of them.

    Well I am not here to give feedback intentionally but, I would like to introduce an error in your work. I find that

    when I keep on pressing 9 like until I display 999,999,999,999,999

    as if I one more click button 9 then it converts to 10,000,000,000,000,000 (<---- This)

    If I move on enter a large number, then after a certain point (when display filled with number) then your data overflow from display.

    I know you are talented and have enough experience of web development and you will update your code once you will have free time.

    With Regards Aakash Verma

    0
  • P
    AK• 6,700

    @skyv26

    Posted

    Hi! Remus, I hope you are good, fit and fine. I am working on Calculator App. For insipiration I thought it would be best to see your work. But your work is uncomplete. But I know you can now be able to make this calculator in matter of few hours. I want your tips, suggestions so that I could be able to make a perfect calculator.

    with regards Aakash Verma

    0
  • P
    AK• 6,700

    @skyv26

    Posted

    Keep it Up 🔥🔥🔥

    1
  • P
    Remus D. Buhaianu• 3,145

    @Miculino

    Submitted

    Hey guys!

    This is one of the craziest projects I've worked on! :) Nothing prepared me for what was about to unfold with this seemingly simple project :D

    Initially, this was supposed to be a straightforward Newbie-level challenge from Frontend Mentor. As far as I can tell, this must've been the simplest and easiest design for a Frontend Mentor challenge. Including the project setup (files, folders, etc), finishing this project required less than 30 minutes.

    From what started off as ~25 minutes project, it ended up into a min full-stack project that spanned across hours and used multiple technologies (some of which I was either completely unfamiliar with or was still learning)

    There's still some tweaking I'd like to make to it, but for the time being, I think the project is good enough to be reviewed by you guys!

    Here are the technologies / tools I've used for it:

    • Svelte
    • Typescript
    • SCSS
    • QR API
    • GSAP
    • VanillaTilt
    • Express
    • MongoDB
    • Mongoose
    • Puppeteer
    • Heroku
    • Vite

    Special thanks to @ApplePieGiraffe, @darryncodes, and @skyv26 whose works have really inspired me to keep growing as a developer!

    Thanks a lot for checking out my project and see you in the next challenge!

    Fullstack QR Code Generator - Svelte-TS | Express | MongoDB | and more

    #accessibility#express#svelte#typescript#mongodb

    10

    P
    AK• 6,700

    @skyv26

    Posted

    Wow, Remus Too Good, Even you did it really well, While I was working on this challenge, I only thought that why not to add own custom QR code but I did not implemented. Now as i saw your work then I again thought why I did not got this idea at that time. Too impressive. ❤️

    Marked as helpful

    1
  • P
    AK• 6,700

    @skyv26

    Posted

    Hi! Anosha, i can see your mobile design is not that much cool as compared to your desktop design. I mean your Font size is little bit bigger than required, your footer contact part, the footer menu and social media icons don't have enough space. Simply I would say it could be more better. It is your great learning that you have Made mistake and then at the end you realised that you chose wrong approach and also now you have atleast a fact Reason to always practice MFA.

    Soon I will see your next work 😜❤️ Good Luck 🤞

    Marked as helpful

    1
  • P
    AK• 6,700

    @skyv26

    Posted

    Really Nice Work, Cool animation effects.

    Best of Luck

    1
  • Hania B.• 1,360

    @techanthere

    Submitted

    It was fun working on this challenge and I have learned a lot because accessibility was the main aspect I took care of while writing the code, and it was challenging to accommodate the changes which could bring out the best results.

    I have used tablist that required here to put static data in HTML and choosing on and off between it. Again, I am glad that I have completed another challenge on Frontend Mentor.

    Any constructive feedback is more than welcome!

    P.S, I intend to do this challenge in future with dynamic data loading with JSON as well so wish me good luck 😄

    Time Tracking Dashboard with Tablist

    #accessibility

    1

    P
    AK• 6,700

    @skyv26

    Posted

    you have uploaded this solution second time. I had see this solution yesterday submitted by you.

    1
  • Aneta• 180

    @anetaanette

    Submitted

    Hi everyone! As soon as I saw this challenge I wanted to so it asap because it looked like a newbie level and it was definitely easier than the other ones. It took me around 40 minutes to complete it together with the screenshots, readme etc. I have one question tho. How do you make the footer 'float' to the bottom and center? Please let me know what else I could improve. Thanks and happy coding! Aneta

    QR code component

    #sass/scss#accessibility

    3

    P
    AK• 6,700

    @skyv26

    Posted

    Hi! Use below property to center

    width: 100%;
bottom: 2%;
left: 50%
transform: translate(-50%, -2%);

    It will make your footer center.

    0
  • P
    Remus D. Buhaianu• 3,145

    @Miculino

    Submitted

    Hey guys! Hope you're having a great time here on Frontend Mentor!

    I'm back with another awesome Frontend Mentor challenge - the Project Tracking Intro Component.

    I always enjoy building these projects, but I enjoyed building this one even more because it was the first project in which I've used Svelte, Typescript, SCSS, GSAP, and Vite all in one place. All I can say is that I'm in awe at how fast the development has become thanks to Vite and it's really a powerful match coupled with Svelte.

    Since most of the project was mainly focused on the design and not any heavy data structures/logic, I'm naturally interested in the feedback regarding the SCSS I wrote for this project and what improvements I could make for the responsive design. I struggled in those regards mainly because of the background shape and devices illustration.

    Let me know what you guys think about the project.

    Thanks for taking the time to check out my project and see you in the next challenge! :)

    Project Tracking Intro - Svelte + Typescript + SCSS + GSAP || Vite

    #bem#gsap#svelte#typescript#sass/scss

    2

    P
    AK• 6,700

    @skyv26

    Posted

    Hi! Remus, I checked your code and I don't know svelte, TS yet. But about your design, I would say really impressive UI and 10/10 for cool animation. Good Job.

    Marked as helpful

    1
  • Anosha Ahmed• 9,340

    @anoshaahmed

    Submitted

    First time using SCSS! I love it! It's so convenient!

    One thing I wish I had done differently is not nesting. I don't know why I was nesting at first... maybe because I was using SCSS for the first time?and it felt cool? But when it came to do media queries, it was so inconvenient to deal with specification etc. I'm gonna make sure not to do that again if I don't need to.

    One problem I kept having, with this solution, was that every time I would save, and my live server would reload, the font-size of random paragraphs would appear larger than before I saved last time. And it was weird because I didn't even touch the font-size of those paragraphs. So, I would stop the live-server and open it again, and the font-size would be back to normal. Then I'd save again, and the font-size would appear larger. Ugh, it was such a hassle.

    But yay I'm happy with the result!

    "clipboard landing page" + sass + flexbox + mobile-first + responsive

    #sass/scss

    17

    P
    AK• 6,700

    @skyv26

    Posted

    Really Nice Work !

    Marked as helpful

    1
  • P
    Remus D. Buhaianu• 3,145

    @Miculino

    Submitted

    Hey guys!

    I decided I should work on my CSS Grid skills a bit more and this challenge was the perfect use-case for it.

    This project has a lot of technologies in it:

    • Svelte
    • Typescript
    • AJV
    • GSAP
    • VanillaTilt.js
    • SCSS

    The AJV and Typescript weren't required for such a project, but I decided I should finally work with Typescript and learn how to implement it in an actual project. I only started learning it two days ago, so I'm definitely eager to hear more about the best practices for this.

    Also, there's an issue caused probably by the clip-path property that I'm using with GSAP. The two box shadows I used on the third and last card don't show anymore. If you know a fix to this issue, please let me know.

    Hope to hear your feedback soon - thanks a lot! ;)

    Responsive Testimonial Grid || Svelte + Typescript - SCSS - GSAP

    #gsap#svelte#typescript#sass/scss

    2

    P
    AK• 6,700

    @skyv26

    Posted

    Really Nice! Awesome animation effects. Design is resposive too. I really like your work and you always made design with unique features.

    Fantabulous Work

    2
  • P
    AK• 6,700

    @skyv26

    Posted

    Awesome, Really Good work, But I think your active states are missing.

    Marked as helpful

    1
  • P
    AK• 6,700

    @skyv26

    Posted

    Hi! Remus, This time I am using my mobile, and I can see that your design needs margin or space around your card, your card took full width of mobile viewport. And i think you have to make changes in 360px device media query.

    Overall Good work.

    0
  • P
    AK• 6,700

    @skyv26

    Posted

    Really Nice Work. Design is responsive too.

    Use aria-label for anchor tag in order to remove accessibility issues.

    I hope I will see some amazing advanced level design made by you -Remus.

    More Power To You!

    Marked as helpful

    1
  • P
    AK• 6,700

    @skyv26

    Posted

    Really awesome, Rest I will tell you once I reach at 🏠..

    1
  • P
    AK• 6,700

    @skyv26

    Posted

    Wondeful, I like your design, it is responsive too.

    Happy New Year ;)

    Marked as helpful

    1
  • Kofi Quist• 280

    @GuyTito

    Submitted

    Please, how can I make my solution more accessible? Also, it mentioned in the style guide that the designs were created the following widths:

    • Mobile: 375px
    • Desktop: 1440px I really do not know how to use this piece of information. Any help?

    A simple card component using html and css

    #tailwind-css

    1

    P
    AK• 6,700

    @skyv26

    Posted

    Hi! Dude,

    To solve accessibility issues:

    1. wrap everything in your body in <main> OR give role="" to the direct children of your <body> ... Click here to read more here

    2. Try use role attribute for your footer, if you don't want to use footer tag.

    3. The information provided in your style.md is basically requirement and according to style.md you have to implement atleast 375px and 1440px screen based design. Keep in mind, more responsive website results in more reach or more clients.

    Happy New Year ;)

    Marked as helpful

    1