Looking to hire developers?
@Mahesh-yadav
@Sonali-Behera
Submitted
Here I am uploading my third project. But here I am facing an issue that I am unable to change the position of "per month" span from bottom. Please kindly help me out and recommend some better coding ways:) N.B : This span ("per month") is present in the 2nd row and 1st column. It is grouped as a class named "rest".
@Mahesh-yadav
Posted
Hi
<span class="amount">$29</span>
<span class="rest">per month</span>
These two element have display: inline by default. So you cann't use margin-top or margin-bottom. Set their display to inline-block using display: inline-block
Then to align them vertically you can use vertical-align property on either of these two elements
Another war is to wrap these two element in a div element. Set following styles on the div element.
display: flex;
align-item: center
@ArturMiguel
Submitted
The background image did not load in the comparison before/after, however in the demo it is ok.
@Mahesh-yadav
Posted
Hi
Nice work. The white dot on the progress bar is not placed correctly. You can use following styles.
.progress set position: relative. Then on ::after set position: absolute; right: 1px.top: 50%; transform: translateY(-50%);@MatheusVieira97
Submitted
Hey, what's up? It's my first time trying to develop website by myself, hope you enjoy it.
Any suggestions will be very welcome :)
@Mahesh-yadav
Posted
Hi
Good work. But you are using percentage units more than required. As part of web development process, you need to learn when to use absolute units(pixels) and when relative units (%, rem, em).
height, width and right properties using pixelsborder-radius property, use 'pixels'@gurneet71
Submitted
Feedback required
@Mahesh-yadav
Posted
Hi
Good work. My few suggestion are:
Set cursor: pointer on filter tablets to give feedback to the user that these are clickable.
On mobile design, the company logo is not placed correctly. To achieve this: set position: relative on the job card and position: absolute; top: -10px; // should be equal to half the height of log left: 10px // should be equal to left padding on the card on logo
@vasily-mishanin
Submitted
Can anyone give me a hint on how to make this challenge without JS?
@Mahesh-yadav
Posted
You can use hidden checkbox to toggle prices. Follow following code:
<label class="switch" for="price-switch"> // add **for attribute** to link it with checkbox
<input type="checkbox" id="price-switch"> // Remove this checkbox
<span class="slider round"></span>
</label>
Place the checkbox as a sibling of <div class="cards-section">.
<input type="checkbox" id="price-switch">
<div class="cards-section">
Then add following styles:
<section class="card">
<h3 class="card-title">Basic</h3>
<div class="card-price"> <span class="price-monthly">19.99</span></div>
<div class="card-price"> <span class="price-annually">199.99</span></div>
// similarly for other cards
<h3 class="card-title">Professional</h3>
<div class="card-price"><span class="price-monthly">49.99</span></div>
<div class="card-price"><span class="price-annually">49.99</span></div>
// All monthly prices have same css class `price-monthly` and all annual plans have same css class
Hide one of the price category initially:
.price-monthly{
display: none;
}
when checkbox is checked toggle display property:
#price-switch:checked ~ .cards-section .price-monthly{
display: block;
}
#price-switch:checked ~ .cards-section .price-annually{
display: none;
}
@Aahil13
Submitted
i wasn't able to make the top-border-color to have a lineat-gradient color
@Mahesh-yadav
Posted
Hi
To set a linear-gradient on the top border, you can use background property.
background: var(--gradient-instagram);
background-size: 100% .4rem;
background-repeat: no-repeat;
@Sandysins
Submitted
Its a noob work but pls let me know If i can change something in code or any mistake.
@Mahesh-yadav
Posted
Great attempt.
:hover psuedo class to add those styles.transform: translateX() property. The text should be aligned left on large screen sizes.@SimonettiT
Submitted
This is the first time I make a web page using the Mobile First method and I'm really proud of the final design and the progress I've had improving my level in HTML, CSS, and a little bit in JS.
@Mahesh-yadav
Posted
Hi
Good work. The border on the instagram card does not match the design. One the solutions is to use background property.
background: var(--gradient-instagram);
background-size: 100% .4rem;
background-repeat: no-repeat;
@aokdirova
Submitted
Any feedback is welcome. Especially regarding JS
@Mahesh-yadav
Posted
Hi
Your CSS and JS code have lot of repeated code.
.errors-and-icons-1, .errors-and-icons-2,.errors-and-icons-3,.errors-and-icons-4{
visibility: hidden;
display: flex;
justify-content: end;
}
.error1,.error2,.error3,.error4 {
color: red;
font-size: 10px;
}
You do not need to create 4 different classes. Create a single .error and .errors-and-icons class. And use them for each input element.
To place the error icon correctly:
You need to change your html code. wrap input element, error icon and error message in a div element. set position: relative on div. and use position: absolute; top: 50%; transform: translateY(-50%); right: 2px; on error icon. This place the error icon on the right edge of input element.
**In JS code **. This code is repeated:
if (nameInput.validity.valid) {
nameError.textContent = "";
nameInput.className = "border";
const divEl = document.querySelector(".errors-and-icons-1");
divEl.style.visibility = "hidden";
}
You can wrap it into a function like this:
function removeError(inputElem, errorElem){
if (inputElem.validity.valid) {
errorElem.textContent = "";
inputElem.className = "border";
const divEl = document.querySelector(".errors-and-icons-1");
divEl.style.visibility = "hidden";
}
}
Similarly you can wrap following code into a function:
if (nameInput.value.trim() === "") {
nameError.textContent = "First Name cannot be empty!";
nameInput.className = "border-invalid";
const divEl = document.querySelector(".errors-and-icons-1");
divEl.style.visibility = "visible";
}
@jtx007
Submitted
Would like feedback for the arrow on the tooltip, backgrounds for svg icons. Also would like some advice on the spacing of the content for the first column. Any other feedback is also welcome, thank you
@Mahesh-yadav
Posted
For SVG icons, wrap them into a div container individually. Then set width and height so that all icons are of same size. then use following to center icons
.svg-container{
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
}
@serincodes
Submitted
I struggled with a good way of centring the grid on the page without pushing the attribution off the end
@Mahesh-yadav
Posted
Hi
You have set grid-template-rows: 100vh; which is causing footer to be pushed below.
Replace this line and your problem will be solved.
@TiaraOluwanimi
Submitted
Feedback welcome
@Mahesh-yadav
Posted
Good work. My few suggestions are:
font-family, font-size and font-weight. Set cursor: pointer.:hover styles and cursor:pointer.#features section: text should be aligned left on larger screen. Image should be moved left. You can use either position: relative; left: -30px or transform: translateX(-30px)@Karska-dev
Submitted
How to avoid scroll for the article and still fit the design?
@Mahesh-yadav
Posted
Hi
The scroll is displayed because of these two styles:
// **line number: 85**
.article-section {
margin: 1rem 0;
overflow: auto;
}
// **line number: 210**
@media only screen and (min-width: 950px) {
main {
flex-direction: row;
width: 51%;
max-width: 975px;
height: 35%;
min-height: 280px;
margin: 0;
}
When you set overflow: auto. The min-height value is taken as height of the element which in your case is 280px. (height: 35% is not taken).
So either remove min-height or overflow:auto
@Scoro6
Submitted
Thanks for feedback. I updated the solution and animation works fine now still if there is anything I will be happy to hear about it.
@Mahesh-yadav
Posted
Hi
The white circle animation is wrong because you have set left: 96.5% on the white circle. The circle is positioned correctly only when width of inner bar is 81%. The circle will be positioned outside the inner bar, when width is small.
You can use right: 1px to position it correctly and then animation will work correctly.
@magdakok
Submitted
Hello! :) Any feedback will be more than welcome. Working with styled-components framework gave me a lot of fun! :)
@Mahesh-yadav
Posted
Hi
Overall its great work. I get to know about Array.every() function by looking at your code.
There is a small bug in your filtering jobs functionality. There are total 10 posts in the data set with job.role values as follows.
**6 - Frontend, 2 - Fullstack, 1 - FullStack and 1 - Backend **. Pay attention to letter case - Fullstack vs FullStack. So when I select Fullstack, your app correctly shows 2 jobs and when I select FullStack, it correctly shows 1 job.
Currently, your search is case sensitive. But, search functionality is generally case-insensitive. In your code, convert filter item and technologies to either lowercase or uppercase before comparing in the following part of your code.
let technologies = [i.role, i.level, ...i.languages, ...i.tools];
if (filter.every((item) => technologies.includes(item))) {
return <JobBox info={i} addTags={addTags} key={i.id} />;
}
return null;
@catherinekorres
Submitted
Any feedbacks on my project structure and coding, specially regarding Sass, would be very helpful :) Thanks in advance!
@Mahesh-yadav
Posted
Hi Your design is perfect. My feedback regarding Sass is that: ** You should use Mobile-First Approach**.
You are using desktop first approach. In desktop first approach, the browser does following on a mobile: It first applies all desktop styles and then @media rule styles i.e first those for max-width: 1200px, then max-width: 900px and finally max-width: 600px (assuming these are your breakpoints). This is not efficient on mobile with lower computing power (consider all mobiles not just high-end devices). So use Mobile First approach.
@tbd007
Submitted
I added a login page after I got inspired by @naaficodes interactive monkey design. Decided to code the challenge with React, as i am currently trying to practice more with it, hope you guys like it :)
@Mahesh-yadav
Posted
Hi
My feedback is regarding how you are displaying and switching between web developer, frontend developer and react jobs inside the Listing component.
You have split the job data file into 3 files: data.js, frontendjobs.js and reactjobs.js and you are using three components Post.js, Fend.js and RJobs to display data in corresponding files. This approach is completely wrong. These three component have exactly the same code inside the render() function. (only thing that is different is the jobs data file). The basic reason we create components is to reuse the markup rendered by them later.
So, you do not need to create three different components. The correct approach would be:
data.map((post) => <Post post={post}>).this.state = {
posts: data, \\ Original data from the data.js file
displayedPosts: data \\ Initially all the posts are shown
\\ These must be deleted
showHidePost: true, \\ **these 3 states variables are not required you can**
showHideFendPost: false, \\ **remove them**
showHideRJobs: false.
name: 'React' \\ ** I do not understand why you have this state variable in every component. this is not at all required**
}
displayedPost = postsposts that are only frontend and set displayedPost = filtered posts. Similarly for REACT button.@Bluechai03
Submitted
Hello! This is my first attempt completing a challenge on FrontEnd Mentor.
Made with simple HTML and CSS Grid Desktop Mode Design
I was able to replicate the website for the most part but I had no idea how to create that pointed corner for the small container on the right, could someone let me know how? Also I didn't know how to make the backgrounds for the icons on the left container be the same width and height without squishing the images, how would I go about fixing that?
Feedback and advice is very much appreciated, thank you!
@Mahesh-yadav
Posted
Hi
You can create the pointed corner using ::after css psuedo element like this
.storage-remaining::after{
content: '';
width: 0;
height: 0;
border-top: solid 20px white; // These two styles create the pointed corner
border-left: solid 20px transparent;
position: absolute;
right: 0px; // These styles position it at bottom-right corner
bottom: -20px;
}
@ElliotCase
Submitted
I felt like this project really pushed me as a beginner I am not too happy with how it came out and I really struggled getting the waves to look right inbetween sections any feedback on that for a better way to implement them would be much appreciated. Thanks Guys :D
@Mahesh-yadav
Posted
Hi
Good attempt. To create curves, you can use background property. When you look at the design, you see that grow-together section has a light blue bg color, top and bottom curves.
// to create top curve, set background image on the section above `grow-together` section and place it at the bottom like following:
.intro-section {
background: url(./images/bg-section-top-mobile-1.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: left bottom;
}
.section-grow-together{
background-color: var(--very-pale-blue);
}
// to create bottom curve, set background image on the section below `grow-together` section and place it at the top like following
.section-flowing-conversation{
background: url(./images/bg-section-bottom-mobile-1.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: left top;
}
Similarly, you can create other curved sections
@ovidiuantonio
Submitted
I don't know React or other JS framework so I made this with vanilla JS.
Any kind of feedback is highly appreciated!
@Mahesh-yadav
Posted
Hi
Great solution. I have few suggestions:
You need to hide searchbar, when there are no filters to search.
On mobile, the company logo should be moved up. You can use following:
position: absolute;
top: // this should be equal to half the width of logo with a minus sign so that half of the image is outside the top edge of card
left: // equal to the left padding of the card
You are using desktop first approach which in my opinion not correct. In desktop first approach, the browser does following on a mobile: It first applies all desktop styles and then @media rule style i.e first those for max-width: 1200px, then max-width: 900px and finally max-width: 600px (assuming these are your breakpoints). This is not efficient on mobile with lower computing power (consider all mobiles not just high-end devices). So use Mobile First approach
Finally, learn any frontend framework vue or react etc. These are very efficient and developer friendly when generating DOM elements from data such as an array of jobs and manipulating the dom when data changes.
@mightyFZeus
Submitted
hey, everyone. How can i make the girl appear immediately after the logo on a mobile?
@Mahesh-yadav
Posted
You can use **bootstrap .order class ** to change order of col in a row. You can learn more here
@Da7y
Submitted
check my animated hamburger
@Mahesh-yadav
Posted
Hi Great solution. Your cross icon is not perfectly centered. I also faced this problem. My solution is that while applying transform change the order - first translate both lines so that they lie above each other and then you can rotate.
@brittjavs
Submitted
Is there a way to validate properly validate the email in Javascript? Any feedback is welcome.
@Mahesh-yadav
Posted
Hi
For email validation, you can specify pattern=/RegEx/ attribute on email input element similar to required attribute. Browser will automatically ensure that entered email matches the given pattern.
For having greater control over error reporting, you can use Constraints Validation API.
I have implemented a basic custom validation in same project. You can see it here
