Skip to content
OverviewSolutions
30
Comments
574
Aakash Verma
@skyv26

All comments

  • Agustín Firpo•500
    @ArfirpoSubmitted over 1 year ago

    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

    2
    Aakash Verma•6,710
    @skyv26Posted over 1 year ago

    Hi @Arfirpo,

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

    0
  • Agustín Firpo•500
    @ArfirpoSubmitted over 1 year ago

    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

    2
    Aakash Verma•6,710
    @skyv26Posted over 1 year ago

    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.

    Your Code

    <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>

    Can be transformed to

    
<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•340
    @Jolijn0101Submitted over 1 year ago

    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
    Aakash Verma•6,710
    @skyv26Posted over 1 year ago

    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
  • Aakash Verma•6,710
    @skyv26Posted over 1 year ago

    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
  • Aakash Verma•6,710
    @skyv26Posted over 1 year ago

    @visualdenniss Thank you very much. I will do it

    0
  • Aakash Verma•6,710
    @skyv26Posted over 2 years ago

    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
  • Aakash Verma•6,710
    @skyv26Posted over 2 years ago

    Good Work !! Keep it up.

    0
  • Aakash Verma•6,710
    @skyv26Posted over 2 years ago

    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
  • Aakash Verma•6,710
    @skyv26Posted over 2 years ago

    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
  • Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    Keep it Up 🔥🔥🔥

    1
  • Remus D. Buhaianu•3,125
    @MiculinoSubmitted almost 3 years ago

    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

    10
    Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    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
  • Aakash Verma•6,710
    @skyv26Posted almost 3 years ago

    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