Hi,
I cant figure out how to make part of the picture hidden while the box is visible. Also, I dont understand why my transition effect doesnt work.
Any other suggestions about better solution are welcome!
Thanks :-)
Rachael
@RMK-creative
All comments
- Rachaelā¢ 610
@RMK-creative
Posted
Hi Hana, nice job :)
Regarding your questions: If you add
overflow: visible;on your .card I think you'll get what you're trying to do with the image. I see you have it applied in your media query, but it doesn't work on screens larger than 1044px.What is the transition effect that you're trying to add?
0 - Jacob McKinneyā¢ 20
@knyghttech
Submitted
Why does my text look different than what is exampled? What could I have done to make this a cleaner code?
Rachaelā¢ 610@RMK-creative
Posted
Hi Jacob, congrats on completing your first challenge!!! šš. The first of many I hope ;)
You've done a really great job, I just have a few tips for you:
-
First to answer your question about the text: you have applied the class="bold" to the <section> tag which wraps around your <h1>. If you apply that class directly to the h1 and delete your <section> tags you will see the text will change (and you can then edit to get it closer to the design if you wish to). Wrapping the <h1> like this is not really necessary for this challenge, same with the <main> tag that wraps the <p> - I would also remove <main> and apply class="text" directly on the <p> tag.
-
Read up on html semantics a little to get a good understanding of best practices (for example: https://www.semrush.com/blog/semantic-html5-guide/)
-
Try using indentation to make your code a little easier to read, for example:
<html> <body> <h1>Hello World</h1> <p>Example text</p> <div> <img /> </div> </body> </html>Keep going, you're off to an excellent start!
1 -
- Abhi Shekā¢ 60
@InertNp
Submitted
I am unsure about html section so if you have any feed back i would really appreciate it
Rachaelā¢ 610@RMK-creative
Posted
Hi Abhi, do you have any specific questions regarding the HTML?
I think you did a good job getting it close to the design, so well done on that. I would suggest checking out the accessibility issues in the report and get those points cleared up.
Regarding your html code, the span tag could be changed to a heading tag, and the alt text on the image could be simply "qr code" - screen readers will already announce that it is image.
Marked as helpful
1 - PChristopher Adolpheā¢ 580
@christopher-adolphe
Submitted
Hello frontend friends! š
This was long overdue but I finally completed my 2nd challenge on Frontend Mentor. š This project was an opportunity for me to test new approaches on the way I write my CSS.
Major challenge(s):
- I started using Sass maps with
@eachrules to generate helper classes easily. It is not perfect but I think is a good start. - I started using custom CSS properties to better organise my CSS and reduce repetition.
- Getting the grid as per the design was more challenging than I thought. I initially started with by defining the height of each row for the main content for different viewport widths but I soon realised that this was difficult to maintain. I finally found an efficient solution by using the
minmax()function with thegrid-template-columnsandgrid-template-rowsproperties.
Your feedback would be much appreciated, especially if you have other ideas about how to better implement custom CSS properties in your workflow.
Thanks in advance. š
Rachaelā¢ 610@RMK-creative
Posted
Wow Christopher, well done on this challenge! I plan to spend some time reading your code because I think I can learn a lot of new things from you - thanks for sharing! I've been wanting to try out GSAP and seeing your work has inspired me to jump in and give it a go :)
Just one thing I came across - the leaflet map is blank on loading, I get the location pin but the actual map is empty so maybe something worth looking into. I tried on 3 different browsers with and got the same issue on each.
Marked as helpful
0 - I started using Sass maps with
- Ollieā¢ 580
@ohermans1
Submitted
Hey Frontend Mentor folk
I have completed another advanced challenge using my newfound Angular skills.
Overall, I really enjoyed this project and didn't have any major issues - but I felt it really stretched my skills.
I also added a little extra functionality, so that each photo on the story page can be clicked to open up more information about that photo/story - I didn't spend too long styling these extra pages, but let me know what you think.
As always, I would really appreciate any feedback!
Have an awesome day, happy coding!
Regards
Ollie
EST Time 20h | Actual Time 16h | WakaTime
Rachaelā¢ 610@RMK-creative
Posted
Hi Ollie, awesome job on this project - it looks great on different screen sizes I tested with dev tools. I especially love that you added the extra pages, really nice touch!
Just one thing I came across - when I click on the image card the story page will load, but when I click on the "read more ->" section of the same card, it skips past the story page and loads the home page again. When I click back on my browser, I then see the story page. Maybe just checkout the functionality of that read more link :)
Marked as helpful
1 - QWenā¢ 50
@qingwen-kb
Submitted
New to Front-End Development. Open to feedback.
Rachaelā¢ 610@RMK-creative
Posted
Hi QWen, congrats on having a go at this one! It does look a bit unfinished, but I do commend you for your bravery!! It's quite a challenging one for people new to web dev, so kudos to you
I would recommend going through the html and accessibility report - there are some issues with headings not being in ascending order, and being placed where they shouldn't be (e.g in ul). The reports have useful links so you can learn more about these points.
Compared to the design, things look to be in the right place, but spacing and font sizes could be improved to get it a little closer. For example, in the We're Different section, max-width and increased font-size on the sub-headings will make it much more readable.
Keep going with it, and ask questions in the slack help channel if you get stuck or need assistance.
Marked as helpful
0 - CoderPr0ā¢ 645
@CoderPr0
Submitted
Hi, this is my next work. As always any remarks or tips would be appreciated.
Rachaelā¢ 610@RMK-creative
Posted
Hi CoderPr0, you've done such a great job! Responsiveness is excellent and the theme switching works really well. There's not much I can say in terms of improvement, except to check out the html report.
Awesome work š
Marked as helpful
1 - Shiva Karkaā¢ 30
@Shivakarka
Submitted
This is my second challenge that I have completed. Please provide any feedback on how to improve it.
Rachaelā¢ 610@RMK-creative
Posted
Hi Shiva, really great job on this! You managed the positioning of those background circles really well š
Only thing I can see that's missing from the design is the horizontal line above the stats section.
On the code side, check out the accessibility issues noted in the report.
Keep going, you're doing really well š
Marked as helpful
0 - Bernardā¢ 195
@Bernardanxiety
Submitted
In all honesty, I am kinda disappointed that this challenge was like 5 times harder for me that it actually looks like, i feel like i should've done it way faster and way better. Im looking for literally any kind of advice at both html and css so i can get better and keep going at my front-end adventure. Thanks in advance.
Rachaelā¢ 610@RMK-creative
Posted
Hi Bernard, nice work! Your solution looks really similar to the design
Along with the comment already posted, I would just add to check out the responsiveness - it looks good on desktop and mobile, but tablet needs a bit of adjusting.
What were the things that you found most challenging? I also struggle with expectation vs. reality with a lot of challenges, but I try not to focus too much on that aspect. Identifying the harder bits so I can learn from them has become much more important.
Don't be too hard on yourself, you're doing a really awesome job!
Marked as helpful
2 - Sudheerā¢ 20
@sudheerkmr
Submitted
Hi, this is my first challenge here, any sugestions to improve my code will be highly appreciated.
Rachaelā¢ 610@RMK-creative
Posted
Hi Sudheer, congrats on completing your first frontend mentor project! š You've done a really good job with getting your solution to look like the design - nice work š
My main suggestion for improvement would be to work on using semantic html, as it will give better structure and readability to your code, and your site will be more accessible to screen readers and keyboard users. Currently, if I try to navigate around your page using only my keyboard, I can't interact with anything in order to change my subscription or go to the payment page.
Keep going, once you've got a handle on semantic markup, your projects will be lit š„
Marked as helpful
1 - Mohamed Salehā¢ 20
@mosaleh1
Submitted
this was a great test that made me search about many things. I learned a lot from it. I know I'm not professionally completed it but it's an achievement for 3 days of learning HTML and CSS, I'm willing to solve more examples and expand my skills
Rachaelā¢ 610@RMK-creative
Posted
Hi Mohamed,
Congratulations on completing your first challenge, and after only 3 days of learning? Iām super impressed! Well done!
Iāll just point out a couple of things:
When using multiple heading tags, they must be in numerical order from 1 - 6, so we canāt have a <h2> tag and then skip to <h4> for example. You can read more about them here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements If you check out the report it will also have some great info on how to improve the semantics.
The other tip is that you can use google fonts easily to match the design. Hereās some info on how to use it: https://developers.google.com/fonts/docs/getting_started You will find the font name that you need for this project in the design file.
Youāre off to great start - keep going! š
1 - Cindyā¢ 40
@ghks0201
Submitted
Hey everyone! Hope you can give me some feedback regarding this code. Thank you a lot!
Rachaelā¢ 610@RMK-creative
Posted
Hi Cindy, great job on this challenge!
It looks good on desktop and mobile š
The only feedback I can give is to avoid using <h> tags for things that don't make sense as headings. The stats it might be better for accessibility to use <ul>.
Keep going, you're doing great!
1 - Zineb Boutaaā¢ 750
@zineb-Bou
Submitted
This is my solution for the calculator app challenge I am using React, any suggestions are welcomed.
Rachaelā¢ 610@RMK-creative
Posted
Hi Zineb, well done on completing another solution š
The transition between the themes is really nice - great job!
The only thing I picked up on regarding the functionality of the calculator, is that the user can input a decimal ( . ) more than once, which isn't needed and should probably be limited.
Other than that, maybe adding the ability to use a keyboard to use it would be a nice touch š
1 - John_diddlesā¢ 470
@Johndiddles
Submitted
Completed this task using flex although some would have done it using grid. I'd appreciate your feedbacks on what approach is best and if there's anything I missed or could have done better, please mention them in the feedback section. I'd be glad.
Cheers
Rachaelā¢ 610@RMK-creative
Posted
Hi John, nice solution! I would only suggest to get the background color to match the design, and maybe also add max-width for extra large screens - the cards get a bit too stretched otherwise.
I think you did a great job using flex - most people will tell you to use whatever feels best, and you've proven that flex also works here š.
2 - vinaykotturiā¢ 70
@vinaykotturi
Submitted
This is the first challenge I have faced some layout issues but I was able to manage the layout
- your feedback is valuable to me / your suggestions
Rachaelā¢ 610@RMK-creative
Posted
Hi Vinay, this looks really great - well done! It's responsive and you have a great eye for the details. Your code structure looks pretty good too š Only things I would suggest is to check out the accessibility issues in the report, and also maybe move the attribution to the bottom of the page. Great job!
Marked as helpful
1 - Naveen Singhā¢ 75
@naveensing575
Submitted
Last newbie challenge jumping to the next level for learning more. š¤
Rachaelā¢ 610@RMK-creative
Posted
Hi Naveen, congrats on getting another solution submitted!
Just a few things: on mobile the email field and button are not aligned, and are causing horizontal scroll.
Also, on clicking the button to submit email address, the error message appears and disappears quite quickly - regardless of whether it's a valid email or not.
I like that you caught that sneaky button shadow - looks really great!
3 - Valerioā¢ 30
@ValerioP-developer
Submitted
Hello everybody, for sure my solution is not perfect yet. Any advice for improving it is well appreciated. In the specific It would be nice to get an estimation in terms of time: If some experienced front-end developer can tell me (hours/days) how long can take to finish this project (around) it is really good for me to value myself. Thank you. Happy to be part of this community.
Rachaelā¢ 610@RMK-creative
Posted
Hi Valerio, I think there is a typo in your h3 tag - should it be 'designed for the future' ? Otherwise looks pretty good at quick glance :)
Marked as helpful
1 - Oliver Berryā¢ 10
@ol-berry01
Submitted
No specific feedback needed, just want to know if I've provided a suitable solution guessing some of the sizes. It's been tested on Firefox, Chrome and Safari, but general pointers as to how I could improve are always welcome
Rachaelā¢ 610@RMK-creative
Posted
Hi Oliver, congrats on completing your first challenge š„³ You've done a great job guessing the sizes! My only suggestions would be to reduce the margin between the stats and their headings, and maybe add another media query for tablet sizes as well. But overall a job well done! š
Marked as helpful
2 - Letlotloā¢ 60
@LT-WebDev
Submitted
Hey guys š,
Another challenge completed, this was a pretty decent challenge. I actually enjoyed working on it.
Please share your thoughts, your input is greatly appreciated, it will surely help me become better.
Thanks.
Rachaelā¢ 610@RMK-creative
Posted
Hi Letlotlo š Nice job! Mobile view at 375px looks a bit off, maybe the cards need larger max-width?
Marked as helpful
1 - David Maillardā¢ 375
@DavidMaillard
Submitted
Hello,
This is my first CSS GRID experience, it was really fun. I could have done it with flex but the result would not be so clean.
I am very open for constructive feedback !
š¤š¤š¤
Rachaelā¢ 610@RMK-creative
Posted
Hi David! No feedback other than it looks awesome, nice work š
Marked as helpful
1 - Usmanā¢ 45
@yaya-usman
Submitted
This is my second challenge and my first shot at the intermediate level challenge, I had problem a bit implementing the prefers-colour-scheme property, initially, my styles started overlapping when I switch my PC from dark to light mode and vice versa which i didn't notice at first when i first submitted but thanks to @RMK-creative/Rachael for her feedback, it has been resolved. I had fun and learnt a lot creating this calculator, I would love feedback and probably a thumbs up š.
Let me add this note here: to switch themes, click the number to toggle.
Rachaelā¢ 610@RMK-creative
Posted
Hi Usman! Dark mode looks great, but the theme switcher isn't working for me.
Marked as helpful
1 - Hawawu Oladipoā¢ 90
@bolanleola
Submitted
I'm finding it difficult to add background images (.svg) to the body.
Please any suggestions?
Rachaelā¢ 610@RMK-creative
Posted
Hi Hawawu, congrats on completing another challenge š
Just a few quick things to help you get closer to the design:
-
there is a slight white border that I can see, you could remove it from .card
-
youāll need to add the front-weight 700 to the google link in your html in order to get the bold font that youāre after: quickest way is to simply type ;700 directly after 300 in the link. Alternatively you could go back to google fonts and select all the font-weights you need and copy paste the link again.
-
Also donāt forget to add alt to the photo, for people who use assistive technology
And one final tip, after you have submitted a challenge, you can then easily see a filtered list of all previous solutions for the same challenge. Itās in the visit challenge hub, then click on solutions - youāll see only the solutions for the challenge youāre in.
Marked as helpful
2 -
- Logan Willaumezā¢ 160
@LoganWillaumez
Submitted
Hello, this is the new site I did for training myself. If you have any comment, don't hesitate !
Best,
Logan
Rachaelā¢ 610@RMK-creative
Posted
It looks really great Logan, nice job! Responsiveness works well on my devices š
2
