Skip to content
OverviewSolutions
9
Comments
13
Samir
@Samir22Raj

All comments

  • Lena•230
    @lenanle333Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Im most proud that I was able to complete the challlenge fairly fast after completing the prior challenges

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

    I did run into an issue where I nested a div with a class of "card" inside of a main tag and I wasn't able to render the card correctly. After removing the div and naming the main tag "card" I fixed the issue.

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

    I don't necessarily need help, but any feedback would be great.

    Social Links Card HTML & Sass

    1
    Samir•260
    @Samir22RajPosted 8 months ago

    Aside from the slight spacing between the profile image and the heading the site is perfect. The code is clean and maintainable. I liked that you used scss to make reuseable styling, separated variables and reset as well.

    Hope to see more improvements and more of you. Happy coding.

    Marked as helpful
    1
  • 2lana•160
    @2lanaSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    BEM, hover

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

    During the development process, there was a problem with understanding links to social network profiles. An attempt to use a BEM did not allow us to make the hover correctly. Links in this case should not be treated as buttons, otherwise there will be a conflict in the css.

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

    practice)

    social-links-profile

    1
    Samir•260
    @Samir22RajPosted 8 months ago

    The code seems to be clean, and the application of BEM and hover is no small feat.

    I would like to point out the obvious spacing and vertical alignment of the main element. I noticed that hover is only working for one specific element though (the github profile link). A quick solution to that would be to assign a common class to all the link tags and adding the hover effect on the said class. In fact, you could style using the common class instead as there are actually no modifications needed in the list of profile links.

    0
  • Tharun Raj•1,330
    @Code-BeakerSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy that I could complete it without much confusion!

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

    I couldn't get an idea about the image's appearance. So, I couldn't do it right on the mobile view. The nutrition table do look a bit different.

    I feel like I have forgotten some concepts of both HTML and CSS. But, I did manage to put it together.

    I think I need to dive deep into the complex uses of both flex and grid.

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

    I would like some suggestions on the image as well as the font-sizing of the project.

    Recipe Page using HTML and CSS

    1
    Samir•260
    @Samir22RajPosted 8 months ago

    The website does look good. I can see that you have used proper HTML tags keeping SEO in mind. On the topic of image in your site I would suggest you move it outside the "header" section and into another container on the same level as the "container" div so and carry forward with that. As for the nutrition table something as simple as adding padding-left could do just fine.

    I also suggest using table tag and list-style-position: outside property for listing markers bit further away from the list item.

    Marked as helpful
    1
  • Subalakshmi T•110
    @subalakshmi-21Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of creating a Social Links profile website that allows users to access my various social profiles easily. The design is clean, and the functionality works smoothly. Next time, I would focus on improving the user experience further, perhaps by adding interactive elements or enhancing the visual appeal.

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

    One challenge was ensuring consistent styling and layout across different devices and screen sizes. I overcame this by using responsive design techniques such as media queries and flexbox to create a responsive and visually appealing layout that adapts well to various devices.

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

    I would appreciate assistance in optimizing the website for performance, especially regarding image optimization and code efficiency. Additionally, feedback on enhancing accessibility features and SEO optimization would be valuable in improving the overall quality and reach of the project.

    Social links profile

    2
    Samir•260
    @Samir22RajPosted 8 months ago

    The website is great. The code is clean and easy to read. And touch up on adding actual links to your profiles is a job well done.

    I would advise you on using proper html tags like ul/ol for lists and keeping the use of headings limited for SEO. For media queries a quick search on google can lead you to a pile of informative websites. Resource would be a great place to start.

    Happy coding

    Marked as helpful
    1
  • MrRayeen•10
    @MrRayeenSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud of the fluidity dynamic responsive view of the content. Some content could be adjusted effectively across various screen sizes. Will work on the design of each content to execute them effectively next time.

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

    None major challenges. Went smoothly completed within 20min. It was a piece of cake 🍰.

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

    Probably with more effective use of width and height of divs, for it to be better effectively and efficiently responsive.

    Responsive Social Link Profile with TailwindCSS

    1
    Samir•260
    @Samir22RajPosted 8 months ago

    I tried visiting your site. Netlify gave me a 404 error, you might want to check up on that.

    From just the screenshot though I can tell you've done a great job with it. The spacing looks good but it seems like you have a problem with the height of the main/body. I would suggest setting height: 100vh.

    Hope you figure out the problem with Netlify and continue your coding journey.

    0
  • Nivrii•410
    @nivriiSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Used tailwind and it made styling quick and easy

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

    Tailwind slightly step learning curve, but I worked with the docs

    Recipe page main

    1
    Samir•260
    @Samir22RajPosted 8 months ago

    You did a great job on the site. Though the spacing and sizing of the components is a bit unbalanced, but with more practice no doubt you'll be on your way to create wonderful websites. Happy coding.

    Marked as helpful
    1
  • fhelix09•40
    @fhelix09Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I most proud of that I am able to do the first challenge.

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

    The most challenging that I encounter on this challenge was to center the QR design. I overcome this by searching on how I can make that kind of design I have tried the margin auto and change to position:absolute, I get the exact design using on web but when I tried it on the mobile I don't it was not on the center, lucky I saw a post about using the transform: translate that is how I am able to get the exact design.

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

    I would like to know if ever there is another way to center it, I use this codes to achieve my design

    position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);

    QR Code Challenge

    2
    Samir•260
    @Samir22RajPosted 8 months ago

    The component looks great. The code is clean and easy to read.

    If you are looking for a way to center the element without using position: absolute, then I would recommend you look up layouts like flexbox and grid that provide easy solutions to these positioning problems.

    Also, would like to suggest starting with mobile first designs so that you don't face many difficulties down the road on responsive design.

    Marked as helpful
    1
  • plantpirate•170
    @plantpirateSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud that I got the grid layout figured out for this. Sometimes a method can feel like a mountain to climb when you rarely use it, but grid was easier than I was imagining. I would use flex next time just to see if it's easier to achieve the same result.

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

    I did encounter the challenge of turning the "link" text color to black on hover. The issue is that I had originally declared all p tags to have a color of white, I solved my problem by simply changing the body text color to white.

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

    There's nothing that I had major trouble with, but I love hearing the ways I can make layouts more responsive and how my code would be better written.

    Social links profile using grid layout

    2
    Samir•260
    @Samir22RajPosted 8 months ago

    The website looks nice. The code is clean however, I don't think it's optimal for seo. You could just set the main tag or body tag to inter-text to get the same font for the entire page as well as use anchors instead of paragraphs for the profile links. I like that you've used grid layout for positioning the content in the center and also separating the reset from the main content css. I would like to advise you to look up on the spacing between the elements.

    Marked as helpful
    1
  • Kari5745•150
    @Kari5745Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I accomplished this challenge without a tutorial :D. It is not perfect, but I could center the div.

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

    Centering the items is always very difficult.

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

    I compared my solution with some tutorials online. I wonder if I overused divs in this project.

    Social Links Profile First Attempt

    1
    Samir•260
    @Samir22RajPosted 8 months ago

    It's a nice solution. The code is clean, easy on the eyes. If you're looking for a way to center items, I'd suggest margin 0 auto or flex and justify-content: center. But so far, you've done a great job with this.

    Marked as helpful
    0
  • PastaSus•80
    @PastaSusSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    First look accuracy of site on desktop

    keypoints: Learn from others codes , add more code as much as possible for better accuracy.

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

    css box property application , first time coding again in a while after learning fundamentals and the basics

    consistency, relearn concepts through yt tutorials, and some googling

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

    Site optimization on other devices better html code advanced styling on css

    use of simple html tables, div containers for each section, basic css

    3
    Samir•260
    @Samir22RajPosted 8 months ago

    Your site looks good at first view but as you take a closer look there are a lot of places that you botched. But well, we all gotta start somewhere right. My suggestion would be that you look into spacing in CSS. You don't have to exclusively define the width, margin, padding and all for each element. Use margin 0 auto to position your wholecontent and just let your browser take care of center positioning your div. Your image also remains static sized as you have defined its width. Images grow and shrink acc to the viewport so if you were aiming for the above design better to leave it at width: 100%. The table at the end too can be left as is in default. It will become responsive thanks to the browser. text-align: center is all you need, no paddings required. If you want to focus on reusability add CSS variables to your code.

    Would also like to point you towards making a mobile design first so that you don't have to work too hard on the desktop version later on.

    1
  • Vitoria Ribeiro Dias•40
    @vitorialrdSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    everything

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

    grid again, very difficult to frame.

    trying hard and studying possibilities

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

    css grid, media query

    @media, CSS grid

    1
    Samir•260
    @Samir22RajPosted 8 months ago

    I think it's wonderful. The font and colors seem perfect and it's quite responsive. I would advise you to give a bit of your focus on the markup though. Using the correct tags and structure goes a long way. I would suggest you research on flexbox as it gives you more range over the layout on such a single dimension.

    0
  • Samir•260
    @Samir22RajPosted 8 months ago

    The components are well placed, and the code is short and clean making it easy to read. I would position the main <div> a bit lower toward the center of the page and restrict the size of the image so that it doesn't look that huge. Also, the spacing between the elements could be improved and also take into consideration that the text colors change on hover.

    0