Looking to hire developers?
@manojks092
@Nishant-afk
Submitted
Please provide suggestion on writing efficient code:
@manojks092
Posted
Nishant let me give you my personal opinion on your issues :
a) It doesnt matter whether you use basic or advance html/css, what does matter is the semantic of the site.
b) for active states you can use pseudo-classes, along with the container that can be set using pseudo-elements(::before) and thus with the help of opacity and z-index you will achieve the hovering over effect over the image.
c) as this site is simply from top to bottom you dont need to do anything exceptionally, as the site layout is same for smaller and larger devices, yea somewhere you might need to use flex for aligning items vertically or horizontally.
For your height issues, to fit it in a single page, you can wrap the whole document in a container and set the height of the container as height:100vh; and then for different sections you can distribute the height accordingly.
The last point might be confusing for now but when you'll use semantic html then things will become more clear to you.
Hope this will be helpful. Happy Coding :D
Marked as helpful
@mahnoork18
Submitted
How to get red border on wrong entry, also why my email validation is not working? kindly help!
@manojks092
Posted
Hey there, if you want to input to turn red or any other color when incorrect, then use outline property in javascript. Like this : inputElement.style.outline = " 2px solid red";
PS: here inputElement is the reference to the form input element , can be for password or text.
Hope you'll find it helpful. Happy coding :D
Marked as helpful
@darwinsanchez9018
Submitted
HI GUYS...
Leave a comment if you wanna provide feedback! Thanks!
@manojks092
Posted
Hey buddy, good try. But there are some fixes regarding responsiveness of your site. Resize the window at 700px or 890px you'll see that the slider section and the main section overlap. What i'll recommend is rather using Javascript, first try to make your site fully responsive. then you can add your javascript accordingly. Hope this will be helpful. Happy coding
@AleksandraRyan
Submitted
Hey I would like to receive some feedback on that challange, to make it better.
@manojks092
Posted
Hey there, nice work, there's a suggestion, if you resize your site to 560px or lesser, you'll find that the signup button in monthly subscription section, is automatically obtaining its size it would be better if you use the absolute width unit(px) rather relative unit(%,em etc) for lesser size. Hope this will help you better....Happy Coding.
@MariAleCas
Submitted
@manojks092
Posted
Hey there, few manipulations that you need to do : a) The navigation menu b) On smaller devices its not responsive, the contents are overlapping to each other(375px) c) site layout on size 1024px
Hope it will help your layout of the page get better and responsive. Happy coding.
Marked as helpful
@shamsjor
Submitted
@manojks092
Posted
Hey, please use the appropriate size of the image for smaller devices.
@SakiCode
Submitted
@manojks092
Posted
Hey there, kindly review your code as the site isn't fully responsive, check the site layout when its above 375px or 376px, you'll see the difference. On the desktop/laptop screen the site appears fine, but if you check your site in toggle device toolbar(where you can check the responsive nature of your site on different devices) then you'll see that your site isn't fully responsive. Hope it'll help you. Happy coding. :D
Marked as helpful
@nigel-sys
Submitted
Can't figure out How to inject a default JSON data that can be shown before clicking the options
@manojks092
Posted
Hey there, try to use AJAX technology such as Fetch API or XmlHttpRequest. The data will be uploaded as the page loads or as you wish to be. Hope this will help :D Happy Coding.
Marked as helpful
@MinHien-git
Submitted
I have a problem that logo isn't align center on the mobile screen size and I need some suggestions for it
@manojks092
Posted
Hey there, nice try. Solution:
@suman-somu
Submitted
how can i remove the padding that comes when we apply paragraph tag and head tag ?
@manojks092
Posted
Hey suman, first of all, good work! You can remove padding either by individually setting it using property padding:0 or by setting it universally like this
*{ padding:0; }
It will set padding to 0 for every element in your web page.
Hope it's helpful. Happy coding
Marked as helpful
@rspatz
Submitted
I had finished this project, but I wasn't satisfied with the results. I found a 2 1/2-hour live code video of this project on YouTube by Florin Pop, and started over from scratch. For anyone else who is finding this project a challenge, I suggest you watch at least part of this video. The URL is https://www.youtube.com/watch?v=9HVKR_hK0nY&t=7659s
I have written a fairly detailed README, which can be found on my GitHub repo, explaining my challenges and how I was able to solve them. One issue I'm having with the README is that my screenshots aren't displaying. I would appreciate it very much if someone could tell me what I'm doing wrong.
Another issue I'm having with all of my projects is with SVGs. I have not been able to figure out how to add hover effects, such as changing the color of social media icons when hovering over them, or changing colors in general. I would appreciate any help anyone can offer. Any other constructive feedback would also be very much appreciated. Thank you!
@manojks092
Posted
Kindly update your js code in github repository. Else the menu wont appear. Thanks
@yasminbraga
Submitted
Hi, I would love to receive any contribution. Feel free for feedbacks!
@manojks092
Posted
Hey there good try. Well there need to be some fixes:
@media or media-query as required.Marked as helpful
@medali198
Submitted
any feedback is appreciated
@manojks092
Posted
That was nice try, there're some improvements needed as mentioned :
border-radiusHope it will be helpful. Happy Coding!!
Marked as helpful
@rspatz
Submitted
I had finished this project, but I wasn't satisfied with the results. I found a 2 1/2-hour live code video of this project on YouTube by Florin Pop, and started over from scratch. For anyone else who is finding this project a challenge, I suggest you watch at least part of this video. The URL is https://www.youtube.com/watch?v=9HVKR_hK0nY&t=7659s
I have written a fairly detailed README, which can be found on my GitHub repo, explaining my challenges and how I was able to solve them. One issue I'm having with the README is that my screenshots aren't displaying. I would appreciate it very much if someone could tell me what I'm doing wrong.
Another issue I'm having with all of my projects is with SVGs. I have not been able to figure out how to add hover effects, such as changing the color of social media icons when hovering over them, or changing colors in general. I would appreciate any help anyone can offer. Any other constructive feedback would also be very much appreciated. Thank you!
@manojks092
Posted
Hey Robert, first of all really good work and i appreciate your efforts:
-For the hover effect you can use CSS3 with pseudo-classes which is used to style the element based on its state. Or you can use javascript on that element as well with events or event handlers. Depends on what you're comfortable with, but in my opinion using CSS3 would be easier as sometimes if Javascript failed to load still your hover effect will work.
-For the screenshot to be appeared in the github repo kindly check whether you've uploaded design images or design folder(this folder comes in the zip file that you've downloaded for the particular project). Once you create folder named 'design' in your main github repo, and upload the images, you'll see the screenshot of the image in the readme.
-In your solution the page is overflowing on size 735px and lesser, you're showing modal but that modal is overflowing. Kindly look over the code once again. Hope it'll be helpful. Happy Coding.
Marked as helpful
@peterjsmyth
Submitted
This is my attempt. Feel free to leave any general feedback but I have 1 issue that I am stuck on. Image Stretching Issue - When my site is resized below 720px horizontally but is still above the 650px breakpoint, the image to the left stretches instead of scaling down. Can anyone point me in the right direction ?
@manojks092
Posted
hi pete, concerning your issue, i'd like to suggest, rather using width property for the images, use max-width. or use width along with max-width. this will help the image from stretching vertically. You can also give absolute size for the image rather using relative sizes. You can even try object-fit property as well. Depends on you, what makes you perfect to use it. Just give it a try. Also keep the mobile first approach, you've used desktop first probably.
Hope it'll be helpful.
@iStealerSn
Submitted
Any feedback will be highly appreciated
@manojks092
Posted
Nice try, the image is not fitted completely in the container height, check it at the size of 1120x670 . Also set the responsive media query from screen size 768 and above. Hope its helpful. Enjoy coding
Marked as helpful
@Vitya23
Submitted
Is the code organized correctly? What mistakes could have been made?
@manojks092
Posted
Hey!!Nice work, kindly align it at the center vertically, no need for extra margin on the top of the card. Extra margin just increasing the height of the overall body of the page. Hope it'll be helpful
Marked as helpful
@distephano30
Submitted
Hi everyone, I'm Stephane, started to code early this year. This is my first FrontEnd Mentor Challenge. I would like to receive some overwall reviews from you. Anything I could do better?
Thank you!
@manojks092
Posted
Hey Stephane, as you haven't uploaded your code in Github repository so i couldn't review your code, still you did good work, though you need to work in the responsive part of the CSS, as you resize the screen you'll notice that the page or the card isn't responding relevant to the size of the screen, somewhere it's covering full page somewhere its having proper view(for example when width is **1044x670 ** then its covering whole page and at 1067x670 then card is small). Probably you created the page for the desktop first and then tried to change its size for different devices, so in my opinion you should try mobile first approach , this will help you a lot. And use flexbox or grid.
I know its lot to digest, but still its just few code lines that you can update and fix it. All the best.
Marked as helpful
@annab6
Submitted
My solution seems similar to the designs, but don´t know, if the code is well-organized and what could I improve. Grateful for any suggestions/critics/feedback!
@manojks092
Posted
Nice work out there, but its not completely responsive, resize the screen and around 769x657 you'll find that the cards isn't responsive, it should increase or decrease the height of the cards together. Kindly revisit your code or it'll be better if you use flexbox(as flexbox always keep same height for the elements) . Hope it'll be helpful. Enjoy coding
Marked as helpful
@alokik98
Submitted
1.) Can't set bg-pattern in Mobile Design. Please tell me how to do that. 2.) Can we change the image of the women of desktop to mobile one using css or js? If yes, please tell how to do that.
@manojks092
Posted
@alokik98 nice work there, but you need to improve the overflow, if you open all the faqs then its overflowing kindly go through your code again. Now on your query :
Marked as helpful
@ivangeier
Submitted
I need to say that I'm proud of my solution! I know it have some small details to fix but It is working!! Please feel free to let me know any improvements I can do in my code ;)
@manojks092
Posted
It's really nice work, but it's overflowing, if you open all the answers then it's overflowing. You can't ignore it because when its out of the main container, it gets frustrating for the user. Kindly revise your code. I haven't gone through our code, just i previewed the site and found this issue. Hope it's a helpful feedback. Enjoy the coding
Marked as helpful
@dmitrymitenkoff
Submitted
This challenged turned out to be harder than I'd anticipated! This is my first 'big' project that involves a landing page rather than a component. One of challenges I faced was deciding how to organise my CSS code base. At the moment, it just flows on alongside the HTML structure. However, I'm keen to learn about any techniques of structuring CSS and making it more readable/logical. I'm about to start learning Sass - so I anticipate that would be a good method to ensure the codebase is well thought through and maintainable. I was wondering what others do (especially in the industry). I approached this challenge with a mobile first style, which I think is the golden rule these days (but again would be nice to hear someone else's experiences). One question I had was whether or not it's acceptable to use Grid for mobile layout. I really like it and I feel like it makes life of a developer so much easier! I wonder what others think about this! Any other feedback is very welcome! Cheers!
@manojks092
Posted
Hey there, nice work. On your concern, ofcourse its absolutely acceptable to use Grid for mobile layout. It gets much easier with grid naming areas and using grid-template-areas property that shows how the layout you want in your page. Hope this was helpful, keep up the good work.
Marked as helpful
@naomy19
Submitted
Hi!
This is my first project, and I would really appreciate some feedback!
Are my HTML and CSS too messy? How could I improve it? I'm not really sure if I made the "media-query" part correctly.
@manojks092
Posted
Hmmm a good try, but its not responsive. please resize the window and check it.
Marked as helpful
@CarlosEAM
Submitted
What is a good way to go about naming element classes?
@manojks092
Posted
Try to name the classes much relevant to the content of the element, this will help you remember what you are working on. You can think it as giving a title to a chapter.
Marked as helpful
