Skip to content
OverviewSolutions
5
Comments
24
AriyanSep0_0
@ARiYaNSEp0-0

All comments

  • Quang•350
    @progressive-newbie263Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    This is the first time i ran and deploy a website live with vite and react so i was struggle with it for quite a while. And this is also my first time trying out react so i hope i didn't do it too messy. Overall, although it is still mediocre, i am pretty happy that i can finish the project.

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

    the js and css was mercier to me than the previous challenges. But the main issues i had was deploying it live. Fixing the image paths, etc... The SVG image was the most challenging part, after a few hours, i decided to linked the image directly to svg file path, instead of wrapping it inside img src as usual

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

    i would love to be shown another way of handling SVG image.

    Base appareal page using Vite+React

    2
    AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    well there are multiple ways for handling svg in react. first and most straightforward way is to import them, import the asset and then use it in src attribute for example :

    import icon from 'path_to_svg/*.svg'
...
...
<img src={icon} ..../>

    or you can wrap the svg code in a component and use it that component there is another way i recently used and it is "svgr" plugin it's a plugin which makes your svg to components easily and automatically try it if you want

    Marked as helpful
    1
  • AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    hi. custom fonts are not loaded and also colors are not correct.

    0
  • Matthias Thieroff•30
    @matthiasthieroffSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    The biggest challenge was remembering the CSS syntax after using exclusively Tailwind CSS for the last few years. I watched a lot of Kevin Powell's videos on YouTube to get a grip of how things are done these days and I needed to look up some things on MDN.

    QR code component using CSS grid

    2
    AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    Hello @matthiasthieroff. your result is awesome, I have this kind of issue too for me it's like when I know this utility first idea and work with it, it's hard to go back to vanilla css and still a lot of stuff in tailwind is pure css and it's not that far I guess. and It's ok to complete these starter challenges with tailwind too.

    Marked as helpful
    0
  • AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    Hello Matin 😊. good job on completing this qr code component. but there are some issues that you can resolve and have a better result : 1- fix your typography things like fixing font size and font weight of heading and paragraph 2- always specify a width and height attribute on img tag that when your image is not loaded the space is there so because of just not loading the image you have your layout back. 3- try to use semantic elements more h1-h6, main, article, section, etc

    0
  • Huda Keshk•90
    @H-KeshkSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    *Reaching such a result after completing both HTML & CSS in around 4 months. *Being able to use responsive layout techniques correctly *Trying to finish the project with the minimum number of classes, using the semantic tags names as selectors.

    -- Next time I will try to minimize the codes' lines, and write down the media queries codes in more prettier and shortened yet effective way.

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

    *Add colorful (hr) between sections. -- I found the answer on StackOverflow website, which was adding a top border with the color you want like in the following code: hr { border-top: 1px solid hsl(30, 54%, 90%); }

    *How to use internal fonts after using to add fonts by it's external links. -- First mentioning the font from you project's folder:

    Then adding that code in CSS: @font-face { font-family: 'Outfit'; src: url(assets/fonts/outfit/Outfit-VariableFont_wght.ttf); }

    *What are the standard dimensions I'm going to use for media queries as screen sizes.. -- I found the solution on Bootstrap website under the section of (Breakpoints) giving the latest dimensions of all usable screens, up to date..

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

    I'd like always help with making my code looks more simple and short. Also I'd like to have more help with media queries and moving from query to another smoothly..

    Semantic HTML5 markup, CSS Lists, CSS Table, Media queries.

    4
    AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    Hello @H-Keshk. great job on this recipe page challenge. if you fix spacing like padding and margin your result get closer to design and also don't manually add vendor prefixes yourself use a postcss plugin "autoprefixer" this would add vendor prefixes for you.

    Marked as helpful
    1
  • Carmen•80
    @KrmenDevSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I wanted to just solidify my knowledge and be able to understand better how to center elements and to play a little with more parameters, this time using HSL for colors and playing a little with letter spacing

    Social links profile

    1
    AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    Hello @KrmenDev. great job on this challenge I know centering things in css can sometimes be tricky but this article really helped me in centering in css at general hope it helps you too : https://www.joshwcomeau.com/css/center-a-div/

    1
  • André Ferreira•20
    @Andre-POFSubmitted 3 months ago
    What specific areas of your project would you like help with?

    Any help is welcome to understand better responsiveness using CSS. Thank you !

    Actually any help is appreciated!

    HTML CSS (Media Queries, clamp())

    1
    AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    Hi @Andre-POF, you did good on this challenge. if you fix spacing like padding it's get better. for layout of this recipe page in mobile (lower screens) I used this great article from josh cameau you can read it if you want to get idea (if you are familiar with grid and even if you not full explanation in this article is provided by josh) : https://www.joshwcomeau.com/css/full-bleed/

    Marked as helpful
    0
  • Harvey•70
    @Harvee-kingSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am happy that I got to finish the project within a space of two days

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

    I hit a lil snag while i was working on the fonts and the last section of the page which is the nutrition... i used table tags and it did not work, thus i ended up using ul tags which made it simple to add the bottom border

    Recipe-challenge tutorial

    1
    AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    actually you can and I think you should use table tag for that part of the page. at first I had same problem but you fix it with some searches. you can have vertical headings on table with a <tr> and on each row a th tag and td and that give you the exact result. and by the way your result is good but there is some place for improvement and I know without figma files it's a nightmare. good luck

    0
  • AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    @AchinthyaDulshan Hi. great job on this challenge. as a best practice in tailwind css it's better avoid using arbitrary values like bg-[value] or w-[length] it's better to add those values in tailwind.config.js file and use that instead or default tailwind theme.

    0
  • AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    @faekhatami Hi. your result it's great. try to use css resets in your code. although when you get to using css frameworks they have that by default but when you are in vanilla css (without framework) you should add it yourself. there are a lot of css resets you can search which to use but fundamentally they are doing same thing. I recommend modern nomalize or https://www.joshwcomeau.com/css/custom-css-reset/. I think if your add heading tag for "Contact Us" inside header that would be great because header it's more like a wrapper around this things like introductary elements. try to use rem units more than px. px units are absolute and not responsive to user changes by default. although they are use cases for px too.

    0
  • Steven Stroud•11,910
    @StroudySubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    Hello, I'm Steven and this is my solution for this challenge using SCSS and BEM!😊

    🛠️ Built with:

    • HTML 🧾
    • CSS🎨
    • JavaScript 🤖
    • BEM Notation 🅱️

    Thank you to the Front-End Mentor team that creates these challenges that help us learning journey to front-end.💟

    I’m proud of adopting a mobile-first approach, experimenting with variable fonts, and adding a unique color slider feature to push beyond expectations. Overcoming GitHub Pages pathing issues and mastering the CSS cascade deepened my knowledge. The project reinforced good coding habits, making the experience rewarding and educational.

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

    The biggest challenges I faced were working with JavaScript for the first time and dealing with Figma typography, where font weights were given by name instead of numeric value. To overcome these, I used trial and error, relied on dev tools for debugging, and sought guidance from ChatGPT. These methods helped me understand the structure and functionality of my code, ultimately resolving the issues I encountered.

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

    I would appreciate help with optimizing my handling of typography in Figma, especially in understanding and applying font weights more effectively. Additionally, I’m looking to improve my JavaScript structure to make my code cleaner and more maintainable. Any tips or best practices in these areas would be valuable as I continue to develop my front-end development skills and work on more complex projects.

    Social Profile, Custom slider, Multiple style sheets

    1
    AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    Hi @Stroudy. Good idea on this challenge. but there is a big accessibility issue and it's color contrast on changing card background color with your slider you should change text colors base on that too (for example location green color) and also those social links should be links and accessible with tab key

    Marked as helpful
    1
  • krokleva•30
    @kroklevaSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    qwe

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

    qwe

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

    qwe

    werr

    1
    AriyanSep0_0•330
    @ARiYaNSEp0-0Posted 3 months ago

    your repo link is broken. and your result is not even close. try harder my friend

    0