Looking to hire developers?
@lukasriha
@2trill2code
Submitted
height?I appreciate your feedback
@lukasriha
Posted
Hi 2trill2code!
Yes you can use grid-column. You can check out this article on mdn!
If you don't set the height specifically, then the height is set by the content.
Usually it is not a very good practice to set the height of elements specifically - if you decide to make the content longer, the text might not fit anymore :)
If the height of your project does not fit the design, then maybe you have overlooked something. Check out your top + bottom margins and paddings, font-sizes and line-heights.
Happy hacking! :)
@girldocode
Submitted
😆
@lukasriha
Posted
Hi girldocode!
Very nice attempt! Couple of remarks:
In your html file, you are preconnecting to couple some origins multiple times. This should be sufficient:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lexend+Deca&display=swap" rel="stylesheet">
Also you are downloading the whole Lexend Deca family, including font-weights you don't use. I recommend not doing that, as in bigger projects, it can increase your loading times unnecessarily. :)
You should also look into responsive images - In the design there are two images provided - with mobile and desktop suffixes. You should always use images which are as small as possible, as to not load unnecessarily large images, since that can increase loading times. You can load different images based on your window width using either art direction (<picture>) element or using the <img> tag with the srcSet attribute. You can read more about that here.
Other than that, very well done! Happy hacking :)
Marked as helpful
@ExiviuZ
Submitted
It was kind of easy because building the website static first is the best approach when it comes to using react. The filtering logic is kind of challenging but when you are aware of different Array methods you can easily think about the process. Any feedback are welcome.
@lukasriha
Posted
Hi Mark Angel Papio :)
Great attempt!
I recommend having either css or scss only - having both is redundant. Remember - all css is valid scss, but not the other way around, therefore I recommend you use scss :) Also I recommend importing all the scss/css in the entrypoint the project - you import some styles in main.jsx, others in App.jsx.
Also, try not to have all your javascript in one file. The common approach is to create a components folder and have your components there. Thus, your project structure would look like this:
src
|-> /components
|-> /TopBackground.jsx
|-> /JobList.jsx
|-> /Job.jsx
Also I recommend not using inline functions in your onClick handlers
Other than that great job! :)
Marked as helpful
@xyzeez
Submitted
Hello There! 👋🏽
Here is my solution for this challenge!
Built Using⚒️ :
Question🙋 : Any Idea on how to animate the input to the age position upon submission(as required by the challenge)?
Updates 🚀 :
... Feedback on how I can improve my code would be highly appreciated! 🙏🏽
Thank You, and Keep coding! 👨🏽💻
@lukasriha
Posted
Hi Xyzeez!
Very nice attempt, I love the animations, the fact that you used BEM and the usage of :is and :has in css is also very nice!
Couple of small hints:
You do not have to use translate3d for your animations if you're animating in one direction only. You can use this:
transform: translateX(4px);
When loading fonts, I recommend loading them in the <head> element in your html like this:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,700;1,400;1,800&display=swap" rel="stylesheet">
Overall there are three ways to import fonts:
Using the <link> approach has some benefits such as caching etc.
If you insist on using the @font-face approach, I recommend using a format other than ttf - ideally woff2. It stands for web open font format 2. This format is optimized for web browsers, will look best and load the fastest on web sites :)
Other than that, very well done! Keep hacking :)
Marked as helpful
@srirakeshv
Submitted
All feedback are welcomed
@lukasriha
Posted
Hi Sri Rakesh!
Very nice attempt :)
In your css file, you import way too many fonts - you only need the Inter font family, weights 400 and 700. And speaking of fonts - when you set the font-family property, you should provide some fallback values. Some fonts might not be supported on all browsers / devices. A safe approach is to set the value to something like this:
font-family: 'Inter', sans-serif;
This is referred to as a font stack and it means that if the first is not compatible with your browser / device, it will use the next in line.
Keep hacking! :)
@mayankdrvr
Submitted
Hi Frontendmentor community,
This is my QR component beginner challenge solution and my first submission. I was having difficulty in making the large size of my solution's <main> container to smaller dimensions to match the solution .jpg screenshot given on the challenge page. I request the community to review and give feedback for the live site and the shared source code on the following parameters-
Please feel free and do not hesitate to review my code and do give feedback for improvement. All suggestions are welcome. Waiting to learn from your feedback and experience. Thank you for reviewing my challenge submission.
@lukasriha
Posted
Hi Mayank,
I just saw you liking a comment of mine on another project so i decided to check out one of your projects.
I'm not an expert on a11y (accesibility), but using semantic html is always a good start. From my experience, accessibility starts getting complicated once controls are involved. You know, buttons with handlers, opening / closing menus etc. If you want a quick check you can use google lighthouse - that's built in with google chrome, it will generate a report for you and let you know where your problems are. In your case, the only it detected was that the background is too similar to the font colour - that's not your fault though, you implmeneted the design. :) if you want to be super sure, just download a plugin/extension for chrome :)
Your website looks good on mobile and desktop - so it's responsive enough i'd say. In my opinion, a responsive website is a combination of fluid and adaptive. Look up those terms and see if you can make sense of that. Just my opinion though ;) I'm my opinion, a good practice is to make use of width and max-width. If you look at something like bootstrap, container widths are set to 100%, but they do have a max width set. You don't want containers with 100% on an ultra wide monitor
Don't have pro either. ;)
Didn't check sorry :)
Refactoring wise - The code base is small, so your code works well. Look into something called BEM - it's a way of writing html and css.
Otherwise two remarks:
Overall, great job and happy hacking :)
Marked as helpful
@JessicaSamtani
Submitted
Hello All - uploaded after quite a gap. This took some time for me as I needed to wrap my head around positions and pseudo elements all over again. Do check it out and see if any suggestions on better practices. Thanks so much :)
@lukasriha
Posted
Hi Jessicasamtani,
great attempt!
Couple of tiny suggestions:
Overall great job! Keep hacking :)
Marked as helpful
@funficient
Submitted
Three questions for the community please!
I tried the variable defined in the root section:
--color-circle-gradient
as well as typing the linear-gradient out:
linear-gradient(hsl(256, 72%, 46, 1), hsl(241, 72%, 46%, 0));
But nothing works. But if I add a static color (not a gradient) it works perfectly fine!
What is the best way to handle the transparency? It feels as if I'm doing the same thing in multiple places and there should be a better way?
Where can I find resources to help me add the json variables? I can't find any solutions in vanilla HTML and CSS, only Tailwind and other frameworks I'm not familiar with. I would love to give this a go!
And any other feedback on how to improve would be appreciated. Thank you!
@lukasriha
Posted
Hi Kate!
Great attempt!
I think the reason the gradient doesn't work is because you are using hsl and are providing it 4 arguments - I think you meant to use hsla() - the a stands for alpha channel I believe, and it influences the opacity, I haven tested your code though, so maybe I'm wrong :)
Keep up the work! :)
Marked as helpful
@jaecoder20
Submitted
What I found difficult for this project was rounding all edges of the QR code image equally. Whenever I applied border-radius, the top edges would round less than the bottom ones and I'm not sure why.
What are some best practises regarding structuring media queries for responsive design?
@lukasriha
Posted
Hi Jaecoder20,
I think the best practice regarding you are looking for concerning media queries is called "mobile first".The core idea is that you start styling your page/app for mobile devices. Once you're done with that, you start increasing the viewport width, and once something breaks or start looking bad, you add a media query to fix your styles. :) There's an article on css-tricks - it's a great site and I can't recommend it enough.
Also, look up something called BEM - it's a way to organize your css code.
Overall, great work, keep hacking! :)
Marked as helpful
@Priyanshu-WD
Submitted
Hey folks, by building this I found myself stuck with media queries. Please help me with the media query. Also, how can I reduce my code?
Looking for suggestions!
@lukasriha
Posted
Hi Priyanshu!
Great attempt!
To give you a hint with media queries, check out something called "mobile first". The core idea is that you start styling your page/app for mobile devices. Once you're done with that, you start increasing the viewport width, and once something breaks or start looking bad, you add a media query to fix your styles. :)
Also I checked out your code on github, and usually you don't have to take devices with width 200px into account - as far as i know, mobile devices start at 300 or 320 px.
As far as the amount of code is concerned, I think it's fine. There are however some practices I would recommend.
Firstly: using id's or tag selectors is considered bad practice. Id's should be unique on your page, but image the case that you have a list of blogposts, then you couldn't have an id on the parent element anymore - so stick to classes.
Secondly: Look something up called BEM - that's a way to style components. It stands for block, element, modifier. It makes sense to think of elements as components (or blocks). That way, you don't get lost in your css and don't have clashes in your project once it grows.
Lastly: get an extension for your editor which formats your code - i recommend prettier, that makes your code more readable.
Overall, good job and keep hacking! :)
Marked as helpful
@sos97
Submitted
I am using javascript for the first time in a challenge.
@lukasriha
Posted
Hi sos97!
Well done considering this is your first time using javascript. However, I think changing all the colors using javascript is a bit overkill. If I were to implement this, I would be toggling the class name of your grid component, and have css handle the rest. For instance you'd have three classes
.grid.regular-theme {
background-color: ....
}
.grid.dark-theme {
background-color: ....
}
.grid.light-theme {
background-color: ...
}
This way you can style everything based on the class of your root component :) But that's just what I would do, there's a milion ways to do things :) Happy Coding!
Marked as helpful
@jhunxein
Submitted
Hello everyone.
I need some advice from you guys, please see my github markdown file. The code is there I want you guys to have a look in it. Thank you very much.
@lukasriha
Posted
Hey Jhunsen Samonte,
I love the loading animation, well done!
@inumakie
Submitted
I designed the column view/mobile version first and then added a media query 'for viewports bigger than 376px...' do you think this approach is ok?
Any tips to improve this code? Thanks!
@lukasriha
Posted
Hi Yue!
Coding the mobile portion first and adding queries to fit larger screens is what is called the mobile first approach and is a widely used development strategy from what I understand. Happy coding :)
Marked as helpful
