@rinoraj6
Submitted
Looking to hire developers?
@john-mirage
@rinoraj6
Submitted
@john-mirage
Posted
Hello, nice work
Here some ways you can improve your project:
@kaoutar-ouadih
Submitted
What are you most proud of, and what would you do differently next time?
I proud of completing this challenge!
What challenges did you encounter, and how did you overcome them?
how to make the row height dynamic and fit the content.I solved that using grid-auto-rows: auto
What specific areas of your project would you like help with?
Anything that can help me improve.
@john-mirage
Posted
Hello, nice work
Here some ways you can improve your project:
@lij110397
Submitted
What are you most proud of, and what would you do differently next time?
1. How to use flex box and grid to build responsive layout
form {
display: flex;
align-items: flex-end;
flex-wrap: wrap;
gap: 16px;
}
.name {
flex-grow: 1;
flex-basis: 160px;
}
.email {
flex-grow: 3;
flex-basis: 200px;
}
button {
flex-grow: 1;
flex-basis: 80px;
}
:root {
--step--2: clamp(0.6rem, 0.5032rem + 0.4128vi, 0.8748rem);
--step--1: clamp(0.75rem, 0.629rem + 0.5161vi, 1.0935rem);
--step-0: clamp(0.9375rem, 0.7863rem + 0.6451vi, 1.3669rem);
--step-1: clamp(1.1719rem, 0.9829rem + 0.8063vi, 1.7086rem);
--step-2: clamp(1.4648rem, 1.2286rem + 1.0079vi, 2.1357rem);
--step-3: clamp(1.8311rem, 1.5358rem + 1.2599vi, 2.6697rem);
--step-4: clamp(2.2888rem, 1.9197rem + 1.5749vi, 3.3371rem);
--step-5: clamp(2.861rem, 2.3996rem + 1.9686vi, 4.1714rem);
}
What challenges did you encounter, and how did you overcome them?
How can I develop the desktop design without using media quires, but using flex box or grid only?
I added one media query and in larger screen I used grid and specifically put different elements in different columns.
What specific areas of your project would you like help with?
How can I develop the desktop design without using media quires, but using flex box or grid only?
@john-mirage
Posted
Hello, nice work !!
Why do you want to avoid using media queries ?
@Thedgmz98
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud the way I did this and the excellent time management doing this. That was great!!
What challenges did you encounter, and how did you overcome them?
I have some problems with the H1 because in desktop was supposed to be with some line jumps, and on mobile just two. But i barely fixed showing another H tag to make it work.
What specific areas of your project would you like help with?
Responsive design and font styling
@john-mirage
Posted
Hello, nice work !!
Here some ways you can improve your project:
Marked as helpful
@Timelessgreed
Submitted
What are you most proud of, and what would you do differently next time?
It's a great project
What challenges did you encounter, and how did you overcome them?
The margins and paddings
What specific areas of your project would you like help with?
the margins and paddings
@john-mirage
Posted
Hello, nice work !!
Here some ways you can improve your project:
padding: 0
on the <ul> or <ol> elements.Marked as helpful
@bhuvandev16
Submitted
What are you most proud of, and what would you do differently next time?
What challenges did you encounter, and how did you overcome them?
What specific areas of your project would you like help with?
@john-mirage
Posted
Hello, nice work !!
Here some ways you can improve your project:
text-decoration: none;
rule.@media screen and (hover: hover) {}
@phemmyils
Submitted
What are you most proud of, and what would you do differently next time?
This project allowed me to develop strong time management skills and ensure independent completion
What challenges did you encounter, and how did you overcome them?
none
What specific areas of your project would you like help with?
media queries
@john-mirage
Posted
hello, nice work
here are some ways to improve your project
The project require some media queries for the texts. You can add them with:
.text {
font-size: 1rem;
}
@media screen and (min-width: 576px) {
.text {
font-size: 1.5rem;
}
}
The rules defined on the text class will be apply when the screen is 576px of width minimum, so before 576px the text will be 1rem and after 1.5rem.
Marked as helpful
@andretrindade13
Submitted
What are you most proud of, and what would you do differently next time?
Using flex-box to test delivery of this first challenge. For the next challenges I hope to use some CSS preprocessor and apply some development patterns to organize the classes
What challenges did you encounter, and how did you overcome them?
The biggest challenge now is to make up for lost time without practicing front-end development, I spent 4 years developing only in node, now I'm focusing back on full-stack web development to start new challenges as an entrepreneur
What specific areas of your project would you like help with?
I would like tips on patterns and tools that I can study to improve front development, with more speed and if there are other development approaches such as using react or another framework to deliver the challenges
@john-mirage
Posted
Hello, nice work
Here some ways you can improve your project
Marked as helpful
@Tascate
Submitted
Is this a good use case of CSS grid? I decided to try to use it after seeing the two-column layout of the desktop design.
@john-mirage
Posted
Hello,
This is not a bad case for grid because you can make it works like you did, but maybe flexbox is better for a simple layout like this one.
@clintonclark1995
Submitted
Hello! Thank you for checking out my solution for this challenge.
This is my first attempt at using vanilla javascript for validation, and did not create individual validation functions for each scenario, rather, I used a sweeping function to check for invalid dates, leap years, etc.
I did my best to get the design as pixel-perfect as possible, but I am sure there are mistakes.
What I am looking for feedback on most are the following.
I am more used to using things such as react which use a virtual DOM and components, so vanilla JS is foreign to me but something I believe is vital to learn before I continue into react, svelte or anything else.
@john-mirage
Posted
Hello,
I strongly encourage you to learn vanilla js before any framework or meta framework you can find. I did the same at first (react before vanilla) and it was really not the best choice at all, basically, knowing vanilla js can help you a lot for everything you do in the javascript world including working with frameworks.
Marked as helpful
@drangam9
Submitted
I used position:absolute to center the card in the middle of the webpage.
Is there a better/efficient way to center it? Is this method good enough? Thanks in advance.
@john-mirage
Posted
Hello,
yes flexbox or grid can help you center the card, they should be a better option than absolute position because the card stay in the flow, so it may be a better practice.
@johnmaizo
Submitted
Hello guys, I find challenging on the hero section, where the two photos of the right side are merging, also my SCSS code is not so clean. Anyways, I would greatly appreciate your valuable feedback on this solution.
@john-mirage
Posted
Hello,
The hero images setup is one of the hardest to achieve, so don't blame yourself if it's not perfect :) here is my project if you want to see how i did it.
@Javieer57
Submitted
I would like to include Storybook in the project. Could you recommend any resources to learn the best practices for Storybook?
@john-mirage
Posted
Hello,
For storybook, you can start with the official website which is great. I saw you are using nextjs so in the options at the top of the guide choose: latest version 7.0, React and Javascript. The storybook script npx storybook@latest init
should automatically detect your project btw.
@WesselKonstantinov
Submitted
This is my first premium challenge. It was quite interesting. I decided to use absolute positioning for the decorations and also the error message in order to prevent the podcast icons from shifting on larger viewports.
In terms of accessibility, how do you think the form validation looks? Would it be better to also include attributes such as aria-invalid
and aria-required
?
The design did not include a "success" state for submitting the form, so I went with a simple alert that displays the submitted email address. This is only for demonstration purposes, as there is probably a better solution for showing a success state.
@john-mirage
Posted
Unfortunately, i don't have the answer to your question but, my advice is to download and install NVDA (for Non Visual Desktop Access) (if you are on mac or linux there are alternatives) and try your application by yourself and eyes close (no cheating !!!) xD and see if you are able to understand what to do and where you are.
Marked as helpful
@abhiram-s21
Submitted
how do i add background colour over the image?
how would i make the image appear on top in mobile design?
@john-mirage
Posted
hello,
To display the image on top on mobile and on the right on desktop, you can use flex, first simply put the image first in html then the text section so you have the image on top, then in desktop use flex to display the elements in a row and change the order of the elements with the order css property so the image is second and the text section is first.
Marked as helpful
The difficult part is the media query. It looks like that I have to redefine the sizes, width and height all over again. My css looks like a mess, not quite readable. I am still figuring out a way to reduce the use of class.
@john-mirage
Posted
Hello, did you wrote the css from mobile to desktop ?, if not it's maybe a better idea to go mobile first, it should be easier and more readable (and it's a best practice because of the mobile devices performances)
@jmurrii
Submitted
Couldn't work out why the margin for the h1 was different for rem and em.
I thought that the h1 should inherit the font-size from the html element where I set the font-size to 62.5% ?
@john-mirage
Posted
Hello,
Root EM watch the html element, EM watch the element itself or the first parent that has a font-size even by default.
My guess is that if you have REM your h1 watch the html element so it will be relative to 62.5% and if you have EM it will be relative to the default size of a h1 (h1 has a default font-size)
Marked as helpful
@mirshod455
Submitted
Could you recommend me the right way of structurize my css code.
@john-mirage
Posted
Hello,
I recommend you the BEM css methodology to organize your code.
@ishukhatri
Submitted
I've managed to create a visual design that appears satisfactory. However, when compared to the original Figma design, I notice minor discrepancies of a few pixels. What strategies could I employ to address these differences? Additionally, what are the best practices for defining the width and height of main container components?
@john-mirage
Posted
Hello,
My advice considering the pixel perfect dilema is that you should not try to be perfect, but you should try to find the best experience and the best consistency with the measurement. That way it's easier in the code and it is still a nice UI experience. But really, differences between the design and the website are fine as long as you can explain why. The vast majority of the time i'm not pixel perfect but i use a measurement scaling that make sens (4px 8px 16px 32px 48px etc...)
Marked as helpful
@FayeVinyl
Submitted
I was unable to figure out how to add the corner borders to the summary section. I'm certain my css could be cleaner. I learned a lot about flexbox
@john-mirage
Posted
hello,
The corner border ??? you mean the shadow ?? if so this is the box-shadow css property.
@ZubairAbid101
Submitted
Q1 Any best practices that I may be missing? Q2 Are there any other ways to center an element without using flexbox > align-items > justify-content?
@john-mirage
Posted
Hello,
You also can use absolute position to center an element but it will be out of the flow.
html
<div class="container">
<div class="element"></div>
</div>
css
.container {
position: relative;
width: 500px;
height: 500px;
background-color: blue;
}
.element {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
background-color: red;
}
@skyrimer
Submitted
The card is simple and doesn't take a lot of time to do. The only question I have is the hover effect of the image. The view icon and cyan background has different opacity. What I did is that I used two pseudo-elements, but is it possible to do just with one, considering I am using css variables, so the use of hsla
is not an option?
@john-mirage
Posted
Hello,
I dont really understand your question, but i can say that you can have a background image and a background-color on the same element, you center the image and yes you use a transparent color with hsla or rgba css function so no need of opacity in this one.
@jessicadong101
Submitted
I found the CSS to be difficult. I'm unsure about my layout and if it matches the solution as well as the responsiveness to different screen sizes. I'm unsure about HTML, CSS, and JS best practices.
@john-mirage
Posted
Hello,
HTML
CSS
Javascript
Marked as helpful
@sommmmore
Submitted
I am new to learning JavaScript. This was my attempt at building a working project with basic JS. Any suggestions or advice on how I can improve are welcome!
@john-mirage
Posted
Hello,
For the submit button, you added letter spacing by adding one space character between the letters, don't forget the nice css property: letter-spacing which add some space between the letters for you.
Marked as helpful