Skip to content
OverviewSolutions
32
Comments
13
Amir Hossein Peyvand
@amirhossein-peyvand

All comments

  • Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted 10 months ago

    Hey, the content of your project has overflowed from your main container, fix it Happy coding :)

    Marked as helpful
    0
  • Shaimaa ِ•10
    @ShaimaasmahaSubmitted 11 months ago

    This is my first training. There are some difficulties that I faced. I could not adjust the image to the content. There are also some challenges that I faced. I am awaiting feedback.

    Product preview card component

    2
    Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted 11 months ago

    Hey, there is something wrong with your code. because it only shows "Product-preview-card-component" content, not any visual effect. check your codes :)

    Marked as helpful
    0
  • Jay-ann Alorro•10
    @jayann284Submitted 11 months ago

    Starting this project was quite simple for I already have a simple knowledge in html. The challenging part is figuring out CSS and how to utilize it properly when designing the overall layout of the site. As a complete beginner, it was challenging for me to navigate and use the functions CSS and HTML has. Nonetheless, I had fun and learned new things about front-end development.

    Challenge 1 - QR Site

    2
    Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted 11 months ago

    Hey, well done. You can use flexbox to align your card at the center of your screen. And you can increase the width of your card for a better view. Happy coding :)

    Marked as helpful
    0
  • Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted 11 months ago

    Hey, well done! You can use mobile-first approach for styling your projects. Styling will be easier if you use this approach. Happy coding :)

    Marked as helpful
    0
  • Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted 11 months ago

    Hey, well done :) You can use mobile-first approach. Using this method will be easier for you to style your project. First you style for mobile devices, then for larger devices. Use main tag for your card, then inside of it, use two divs, one for the content and the other div for your image container. Use display="flex", flex-direction="column" for mobile devices, and flex-direction="row" for large devices.

    <main> <div class="content"> // your content </div> <div class="image-container"> // your image element </div> </main>
    1
  • Lillian•20
    @lillianedwardsSubmitted 11 months ago

    I felt pretty good about this challenge although I would like to know:

    1. the best way to add horizontal lines. I did not end up figuring out how to implement the horizontal line that runs into the button. I've struggled with this element on other projects as well.

    2. the arrow image did not deploy to my Netlify site, is there something wrong with my file structure/React shell?

    Age Calculator App including Responsive From

    2
    Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted 11 months ago

    Hey, well done :) You can use <hr> tag for horizontal line in your code. And there is an issue with your src address. You have to IMPORT your arrow image in your CalcForm.jsx component. Write this code at the top of your CalcForm.jsx file -> import arrowImage from '../assets/images/icon-arrow.svg Then you can use it in your img tag -> <img src={arrowImage}/> I hope you can fix your code :)

    0
  • Anusha Syeda•90
    @Anusha-Syeda012Submitted 12 months ago

    Table of contents

    Overview

    The Task was to create the QR Code Component, using any resources but here i have used the basic concepts of HTML and CSS for my project. I have created it for the specified width screens for desktop view and mobile view that was mentioned in the README.md file of Frontend mentor. Moreover i followed there recommendations for font-size, font-family, font-weight , backround colors and etc.

    Screenshot

    Here are my both Desktop and Mobile views of the QR Code Component.

    Desktop-View

    Mobile-View

    Links

    My process

    I have divided my task into three steps. First, I built the layout using Figma and structured my HTML. Second, I created custom CSS for the layout, incorporating necessary grid and flexbox settings, relevant fonts and font sizes, background colors, text alignments, images, favicon, etc. Third, I set screen sizes for each view (Desktop and Mobile). In the final step, I commented on the code to enhance understanding. Additionally, I maintained my repository on my GitHub account.

    Built with

    • Semantic HTML5 markup
    • CSS custom properties
    • Flexbox
    • CSS Grid
    • Mobile-first workflow

    What I learned

    I have learned many things and recalled my concepts related to web development. However, the most significant lesson I acquired was becoming more efficient and adept at work. Yes, we all acknowledge that HTML and CSS are integral components of design, and there are moments when we feel frustrated. Nevertheless, it is a part of the learning process that we must embrace. I want to highlight the individual whose YouTube tutorials and videos greatly assisted me — Kevin Powell. I will share the link to his YouTube channel so that you can also visit and learn CSS in a more intelligent and effective manner.

    Continued development

    I will focus on tackling more challenges and aim to complete at least one challenge every week, focusing specifically on HTML and CSS. Simultaneously, I plan to enhance my coding skills, particularly in JavaScript, by consecutively completing 30 projects. This approach will allow me to immerse myself in continuous learning, progressively building and refining my coding abilities.

    Useful resources

    • For Understanding Grid and Flex-Box - This resource helped me to understand and implement the grid view and flexbox.
    • For Media Queries in CSS - This is an amazing website which helped me finally understand media-queries. I'd recommend it to anyone still learning this concept.
    • Kevin Powell - Checkout his Video tutorials for the better understanding of HTML and CSS.

    Author

    QR-Code Component Using CSS Grid and Flexbox

    1
    Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted 12 months ago

    Hey, well done. There is an issue with your code, the text of your project can only be seen.

    1
  • Namrata Sinha•530
    @nmrtsnhSubmitted 12 months ago

    Hello everyone,

    I am Namrata and this is my solution for this challenge.

    If you have any suggestions to improve my code, please feel free to share!

    Thank you 🙏

    Calculator App

    1
    Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted 12 months ago

    Hey, well done! :) I recommend you to set a min-width for your main element (".calc" class) or you can use clamp() function. It can be used to ensure that an element does not grow or shrink beyond certain dimensions, providing more control over layout and design. And you can use mobile-first approach for styling your projects. It will be easier for you to adjust the project for larger devices.

    Marked as helpful
    0
  • Anjali Dhobale•40
    @DhobaleAnjaliSubmitted 12 months ago

    Please tell me the good and bad things about my code :)

    Html, css

    1
    Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted 12 months ago

    Hey, well done! I recommend you to use a a clamp() function or a percentage value for the width of your circle :)

    0
  • Charlotte Fisher•10
    @cvfisherSubmitted 12 months ago

    I'm wondering how I can better streamline my code, and hoping to learn more about best practices. Any advice on how I could improve this much appreciated!

    Product Card using Flexbox

    1
    Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted 12 months ago

    Hey, well done! :) You could use mobile-first approach for styling your card. There are some small issues with styles when it gets smaller than 375px. Add some mobile styles for devices smaller than 375px. you can use percentage value for the width of your card.

    0
  • Crystal Rose-Wainstock•110
    @crwainstockSubmitted about 1 year ago

    I had some trouble getting things to align just right, but it's pretty close. :) I used grid to arrange the elements in the component, and then I used margins and padding mostly to adjust placement of the individual elements. Maybe there's a better way to do this?

    Responsive Social Proof Section

    1
    Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted about 1 year ago

    Hey, well done! It would be great if you add a little more padding to your ratings and reviews components. But overall you did great.

    0
  • Amir Hossein Peyvand•550
    @amirhossein-peyvandPosted about 1 year ago

    Hi there, well done :) It would be much better if you put some gaps between your top text and QR Code Component

    0