Skip to content
OverviewSolutions
9
Comments
8
Chris Mulvany
@ChrisMulvanyGH

All comments

  • Chris Mulvany•120
    @ChrisMulvanyGHPosted over 2 years ago

    Thanks Deniel

    Excellent tips very much appreciated.

    • Length of code is definetely something I will be refining.
    • margin great tip and will set-up a default CSS/SCSS file with this info.
    • display: flex on the body for some reason I never thought of this. Thanks for the link.
    • px and %, I have started using rem and ems but for some reason don't have them set-up in the project, I'll make sure to ammend.

    Brilliant advice!

    Regards

    Chris

    0
  • Chris Mulvany•120
    @ChrisMulvanyGHPosted over 2 years ago

    Hi @AfridAnwar,

    You have done a nice job on this. I have some feedback which I hope is helpful.

    • You have many classes created for the different headings and description per card. This is not necessary. It would be easier to maintain your CSS by creating one class for '.card' and one class for each of the headings 'heading' and 'subheading' and a description'. Then you can apply these styles to each of your card elements.

    Take a look at my solution to this challenge and I would hope you would get a better understanding of the above advice.

    Keep up the great work!

    Chris Mulvany

    0
  • Chris Mulvany•120
    @ChrisMulvanyGHSubmitted over 2 years ago
    • I found this more difficult than I had imagined.
    • I was aiming for a pixel perfect solution.

    I would appreciate if anybody would review my code and identify anything I could improve to target pixel perfection. I am using Flexbox as at this time it is my preference and I want to get better with it.

    Any other advice would be greatly appreciated.

    Responsive CSS Mobile First Profile Card Component

    3
    Chris Mulvany•120
    @ChrisMulvanyGHPosted over 2 years ago

    Hi, Vanza

    Made the suggested changes and a few small edits. Thanks for the help! much appreciated.

    Chris

    0
  • Iva•120
    @IvuskaSubmitted over 2 years ago

    Hello! This was quite challenging for me especially because of the used JS. I struggle a little bit with the syntax. I also found out that I was not completely sure what exactly I need to ask/search in google or in the forums (how to call it when I need to sent the chosen number to the next card as the selected rating).

    • do you have any tip for quite good JS tutorials, please?

    I also struggled with creating the 'perfect' circle when the text is in it. I used these five properties (height; width; line-height; text-align; border-radius) to define it:

    • but I am not sure how "elegant" this solution is? Do anyone have some tips for better/easier or more used solution?

    Thanks a lot in advance for anny feedback and/or help and have nice coding time!

    Interactive rating component (Flexbox, SASS, pure JS)

    1
    Chris Mulvany•120
    @ChrisMulvanyGHPosted over 2 years ago

    Hi Iva,

    Good work on this one, I don't know if you are experienced or new to frontend as your solution looks solid. So from a frontend point of view well done. The great thing about these challenges is that you can always return and refactor the CSS, HTML or JavaScript. As you learn and develop new skills you can revisit your solutions to see how your code can be more 'Elegant'. My advice "Fail a lot, and do it again, and again" this is how to become a great frontend developer.

    With regard to JavaScript coding I would highly recommend the Coursera JavaScript for Beginners Specialization. There are 4 courses in the specialization and you should be able to do all by choosing 'Audit' for free. You won't get certification when auditing but the training is really good for a beginner.

    Hope this helps!

    Chris Mulvany

    Marked as helpful
    0
  • Dogan Saglam•350
    @dsaglam94Submitted over 2 years ago

    Hello everyone, it's been a while since I haven't submitted anything here. Been busy with JS. So I wanted to do some fancy CSS since I feel like I don't know anything about CSS anymore lol.

    The grid area was really challenging. Kept me busy for a while.

    Happy coding!

    Responsive / SCSS Landing Page

    1
    Chris Mulvany•120
    @ChrisMulvanyGHPosted over 2 years ago

    Hi, Dogan Saglam

    Great work on the design element on this challenge, the project was well put together.

    I would suggest taking a look at the Accessibility Issues as they are simple fixes. I'm PRO mobile & accessibility first coding. It is definately something that we all need to get better and putting accessibility in the same category as mobile first makes sense for all designs.

    Well Done!

    0
  • Chris Mulvany•120
    @ChrisMulvanyGHSubmitted over 2 years ago
    • I found this more difficult than I had imagined.
    • I was aiming for a pixel perfect solution.

    I would appreciate if anybody would review my code and identify anything I could improve to target pixel perfection. I am using Flexbox as at this time it is my preference and I want to get better with it.

    Any other advice would be greatly appreciated.

    Responsive CSS Mobile First Profile Card Component

    3
    Chris Mulvany•120
    @ChrisMulvanyGHPosted over 2 years ago

    Hi, Vanza

    Thank you very much for your feedback.

    Great article and provides practical reasons for the differences in design tools and our code. Especially liked the tip on "Going the extra mile" and its information on "optical alignment".

    Yes, BEM trying to get my head around how to use this properly. Need a little more practice, if you have an articles or resources on this I would appreciate them.

    I was toying with the idea of using ul and li for the card__footer. I totally agree and will ammend the code as suggested.

    Thanks again for your time, much appreciated!!

    Chris Mulvany

    0
  • Sonu•20
    @uniquesonuSubmitted over 2 years ago

    This excellent challenge from frontend mentor was recently accomplished by me. That was a project for beginners.

    QR code component

    2
    Chris Mulvany•120
    @ChrisMulvanyGHPosted over 2 years ago

    Nice work! just look at the accessibility issues. They are only minor but its good to attend to them all the same.

    • Heading 1 tags are important especially for SEO.
    • Fixing the 1st landmark issue should solve both landmark issues.

    Great work well done!

    0
  • Chris Mulvany•120
    @ChrisMulvanyGHPosted over 2 years ago

    @wkan17012021

    Hi Will

    I made those changes you mentioned and would appreciate if you could cast and eye over it again. Along with some styling and html code clean up I also added a default JS function to load the advice slip id of 117. This then allowed me to have a default advice id and quote. Just to note advice id 117 is not the quote that came with the design files.

    Thanks again!

    0