Skip to content
OverviewSolutions
37
Comments
5
Stefan Bojkovski
@xStephx

All comments

  • Manuel Fernando Gallego Arias•120
    @mgallegoaSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?
    1. Take care about the differents fonts used in the page, I didn't it and my page fonts didn't match with the design.
    2. Know when to use flex or grid or both to complete the challenge.
    3. Yes, this is a good challenge to practice flex-box and grid.
    4. Using rem instead em, give a good control of the font-size and margin/padding
    What challenges did you encounter, and how did you overcome them?
    1. Match the design with the page without Figma values for the margins, padding for the differents elements.
    2. Do the pixel perfect.
    What specific areas of your project would you like help with?
    1. Fonts size for the heading and pharagraps.
    2. Do I use correct flex and/or grid? why?
    3. Do I use correct BEM naming?

    Responsive, movil first, fonts variants, Fylo landing page using BEM

    2
    Stefan Bojkovski•640
    @xStephxPosted about 2 months ago

    Hi @mgallegoa,

    I check your solution and I saw that you done landing page to looks great in the given formats (1440px for desktop and 375px for mobile). It perfectly matches the design images, but page doesn’t display well on other screen sizes, such as tablets or larger desktops. You can improve this by using the browser’s inspect element tool to test on different dimensions.

    Your CSS is well-organized and neatly structured by components, which makes it easy to maintain and update, also if you are like to do like that organizations you can check SASS it is powerful for that.

    Consider using the Font Awesome library for social media icons. It’s a great resource for high-quality, scalable icons that are easy to implement.

    To make responsiveness easier, you could try using a framework like Bootstrap or Tailwind CSS. However, once you have a strong understanding of Flexbox and Grid, it will be even easier to customize layouts for all screen sizes without relying on a framework.

    I hope it helps you!

    Have a nice coding!

    Marked as helpful
    2
  • Stefan Bojkovski•640
    @xStephxPosted 7 months ago

    Hi, congratulations on completing the challenge!

    Your solution looks great, I will give you some suggestions for this project that you can use for better practice.

    About your HTML in this project: You're using <div> elements to wrap different sections of your content. You can use semantic HTML elements where appropriate, such as <article>, <header>, <footer> and other. Make sure to add appropriate alternative text (altattribute) to your <img> elements for screen readers and in case the images fail to load for better accessibility and SEO. The date is currently within <br> tags. Instead, consider using the <time> element with the datetime attribute for semantic markup of dates and times.

    About your CSS style in this project: You have .container defined twice. It's better to styles into one block to avoid redundancy and make your code easier to maintain. In CSS, font-weight typically takes numeric values ranging from 100 to 900 or keywords like normal and bold. You're using font-weight: 500px and font-weight: 800px, which are invalid. Use font-weight: 500; and font-weight: 800; instead. You can add comments to your CSS code to it easier for you and others to understand your styling decisions and the structure of your code.

    To improve even more in this area, do more projects, ask for feedback, communicate with other developers, and keep dedicated!

    I hope it helps you!

    Have a nice coding!

    Marked as helpful
    19
  • Alejandro Cañon•260
    @alecanonmSubmitted 10 months ago

    Hi! i managed to do this challenge only with css and html, i tried to do it as fast as i can if you have some feedback to me, please leave it because that will help me to be a good developer in the future!!

    greetings! 😊🌱👋🏻

    Responsive card | CSS | HTML

    1
    Stefan Bojkovski•640
    @xStephxPosted 10 months ago

    Hi, congratulations on completing the challenge!

    I will give you some suggestions for this project that you can use for better practice. Use max-width: for example 400px in main section not padding, and add some margin for left and right for example 10px for better responsive, and for img you can use width:100% for responsive on all screens!

    I hope it helps you!

    Have a nice coding!

    Marked as helpful
    10
  • jabnakar•20
    @jabnakarSubmitted 10 months ago

    Hey there! 👋 Just finished working on a social links card visual for a Frontend Mentor challenge. I'd really appreciate your feedback on the HTML and CSS code. Specifically looking for thoughts on the overall design, how it renders on different screens, and any ideas on code improvement. If you notice any have tips on best practices, I'm all ears! Thanks a bunch for your time and input!

    Social Links Profile solution with simple HTML and CSS

    3
    Stefan Bojkovski•640
    @xStephxPosted 10 months ago

    Hello,

    Your solution looks great, I have some suggestions for better coding practice and organization.

    The first suggestion is to write your HTML and CSS in separate files for better overview, organization and practice.

    The second suggestion is to use semantic tags for better accessibility, better organization.

    The third suggestion is to use a Grid or Flexbox for centering and alignment system, this method is a quick and easy, time-effective.

    The fourth suggestion is on social media buttons in this project to add hover for a better looking.

    Have a nice coding!

    Marked as helpful
    6
  • Stefan Bojkovski•640
    @xStephxPosted 11 months ago

    Hello,

    You have error with image it's not loading. To fix this problem use correct path src="images/image-qr-code.png",

    Have a nice coding!

    Marked as helpful
    12