Looking to hire developers?
@alosoft
@baremarco
Submitted
How can I improve the mobile design? I couldn't figure out how to implement that part, the designs was the same for desktop and mobile versions.
If you see any improvement, please feel free to comment, I would really appreciate any feedback
@alosoft
Posted
@baremarco You've done a greate job with the ui. Here is how you can make html semantic
@AdamMzkr
Submitted
Hi! I submit my next solution. To finish this challenge I use only HTML CSS and vanilla JS. All suggestions to improve this solution are welcome :-)
@alosoft
Posted
@AdamMzkr You missed the background image and also this image resources bg-mobile.svg cannot be found on the mobile view
Marked as helpful
@TonyHdez-Pi
Submitted
i haven't got used to the media querys :c
@alosoft
Posted
@TonyHdez-Pi You've done a nice job but there is still room for improvement
main{
height: unset
}
article{
0px 0px 0.5rem 0px #0000003b
}
article{
overflow: hidden
}
Good luck!
Marked as helpful
@JoeDeSantis1
Submitted
I'm looking for feedback on if my code looks clean. Also, if there are any ways that I can be more concise. I don't think I missed anything but if I did please let me know. Thanks!
@alosoft
Posted
@JoeDeSantis1 There is a couple of things you need to do
button{
border: none;
}
To fiix your Semantic HTML errors
I also noticed that when no rating is selected the Thank You screen does not show the selected rating comment. I would be nice if a user is required to select at least one rating
Nice work!
@Clytax
Submitted
Here are some questions I have:
did I do responsive design correctly? I added media queries through Sass on individual elements instead of one big media query.
should I have chosen a dynamic width/height for the elements of the rating number?
any feedback is welcome!
@alosoft
Posted
@Clytax I don't use Sass so I cannot comment on your approach with the media query but I can help make your component responsive when zoomed in and out.
You can start by removing the height and adding a gap to space the children elements out and also set a width in rem to make the rating element to adjust according to the screen size or zoom level
.rating{
width: 30rem;
height: unset;
gap: 2rem;
margin: 1rem;
}
Marked as helpful
@afaiz-space
Submitted
in this project some part tricky parts. this project is a little was hard.
@alosoft
Posted
@afaiz-space I see you've already given the cards align-self property. The last thing you have to do is give the parent-child-two a much bigger height to make the cards align-self property to show
.parent-child-two{
height: 18rem;
}
Nice work!
Marked as helpful
@Juan2579
Submitted
Hello!, I have a question that I would like to receive some help. In the transform and stand out sections, I don´t know how to give that kind of underline to the a href link that says "LEARN MORE".
@alosoft
Posted
@Juan2579 You can add the underline by wrapping the link tag with a div container and an empty div below the link
<div class="container">
<a href="#" class="styled_button yellow"> Learn more</a>
<div class="yellow_line"></div>
</div>
add these styles for the yellow_line and red_line
.red_line,
.yellow_line {
width: calc(100% + 0.5rem);
height: 0.3rem;
border-radius: 1rem;
bottom: 0;
left: 0;
right: 0;
margin-top: -0.4rem;
background: transparent;
}
after that you can show the lines on hover with these styles
.styled_button:hover+.yellow_line {
background: var(--yellow);
}
.styled_button:hover+.red_line {
background: var(--soft-red);
}
Marked as helpful
@comendrun
Submitted
I tried my best to match the styles. Also, it was a little hard for me to update my code on GitHub and also publish it using GitHub pages. so I simply put the link to sandbox from codesandbox. hopefully, it comes out good I would really appreciate any advice or tips
@alosoft
Posted
@comendrun To host your code on github you gotta make sure the index.html file is in the root of the repository not in a public folder in your case.
Marked as helpful
@MatheusTeixeira1
Submitted
Hey guys, this is one of my first codes integrating html, css and javascript, I would like some tips to optimize it. Also, there is a problem that I didn't know how to solve, if the user selects a score and then selects another, the hover effect of the previous one will disappear. Thanks for your attention.
@alosoft
Posted
You can achieve that with javascript. Checkout my solution repo for the code https://github.com/alosoft/interactive-rating-component-main
@iagohenrique2009
Submitted
Hi frontend Mentor Community!
this is my first junior challenge, so if you have tip/advice or feedback please tell me!
@alosoft
Posted
@iagohenrique2009 You did a good job but there is still some improvements you could make
text-decoration: none;
width: unset
flex-wrap: wrap;
justify-content: center;
Marked as helpful
@Nabil-Y
Submitted
Hi everyone,
I build the todo app with local storage so your theme and todos will be saved, you can even use it if you don't clear your browser cache. Your prefered theme (dark or light) is automatically detected and applied on page load.
I used a third party library for the drag and drop list (sortable.js). Your changes made by reordering the list are saved in the local storage too!
It was my first time using TypeScript and Vite, please tell me if there is anything I can improve.
Thank you !
Nabil-Y
@alosoft
Posted
I love the drag and drop feature. One thing I notice is you cannot mark a todo before you submit. Another is on very small screen sizes (250px) you need to change flex direction
.todos-list__info{
flex-direction: column
}
Nice work!
@jsilver88
Submitted
I had some trouble building the dropdown nav and the sidebar dropdowns. Is there a better way to display the sidebar dropdown so it's a smoother transition?
@alosoft
Posted
If is the hover to show effect you need checkout my [solution]https://www.frontendmentor.io/solutions/responsive-intro-section-with-dropdown-with-css-flexbox-and-bem-BJMPlW8Bc). Make sure you checkout my repo ReadMe.md for more information
@KevinAlderete
Submitted
I had some trouble resizing the page on mobile and desktop, I couldn't resize the card to fit as I resized, that's why it doesn't resize the card on mobile and desktop. I'd appreciate feedback on this, as I'm still not clear on it.
@alosoft
Posted
@KevinAlderete I couldn't find the issue you stated. It seems responsive. Could you be more specific
@AndresHense
Submitted
I'have no idea how to implement the triangle in the corner of the menu of the mobile version
@alosoft
Posted
@AndresHense You can the triangle by using the border property
create a element
<div class="shape"></div>
add css
.shape{
border-bottom: 100px solid green;
border-left: 100px solid transparent;
}
then give it a fixed position position: fixed to the top left corner of the mobile menu
@yallsobad
Submitted
@alosoft
Posted
@yallsobad Your cards container does not align with the other content on the page. You need to remove the margins from the review elements. Try this:
.review{
background-color: var(--Very-Dark-Magenta);
color: var(--White);
height: 230px;
/* margin: 1rem; */
padding: 1.5rem;
border-radius: 0.5rem;
}
Then add a gap to the bottom element
.bottom{
gap: 1rem;
}
You also did not make it responsive. There is no mobile version
Marked as helpful
@Mahad410
Submitted
Any feedback will be appreciated...!
@alosoft
Posted
The left portion of the card is not centered. you need to make it a flex box with the column direction.
add these styles to the div.intro element
display: flex;
flex-direction: column;
justify-content: center;
Nice work!
@AdanSaavedra
Submitted
I would love to receive feedbacks or suggestions.❤️
@alosoft
Posted
You missed is the social media icons Get fontawesome cdn here
https://cdnjs.com/libraries/font-awesome
and get the fonts here
https://fontawesome.com/icons
Nice work!
Marked as helpful
@alosoft
Submitted
Any comments and suggestions are welcome
@alosoft
Posted
@ViyanMd Thank you for your feedback. Could you be more specific with the issues with the design
