Skip to content
OverviewSolutions
41
Comments
5

Stefan Bojkovski

@xStephxMacedonia720 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Manuel Fernando Gallego Arias•120
    @mgallegoa
    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

    #bem#accessibility
    1
    Stefan Bojkovski•720
    @xStephx

    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
  • Stefan Bojkovski•720
    @xStephx

    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
  • Stefan Bojkovski•720
    @xStephx

    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
  • Stefan Bojkovski•720
    @xStephx

    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
  • Stefan Bojkovski•720
    @xStephx

    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