@MariaCMontO
What specific areas of your project would you like help with?
CSS and responsive layouts
EFEELE
@EFEELEAll comments
- @EFEELE
great job!!
- @Binh05What challenges did you encounter, and how did you overcome them?
when i font-size the line <p>"Front-end developer and avid reader."<p/>, the card also shrinks, how can i fix it?
What specific areas of your project would you like help with?Can you comment on the html structure to help me write it more correctly?
@EFEELEHello my friend, congratulations on your work! 🎉
📉 Card Shrinks When Increasing Font Size — Explanation and Fix
You're right in noticing that the card shrinks when you increase the font size of the
<p>tag.
This happens because the parent container (<main>) does not have a fixed width, only amax-width.
When you increase the font size, the paragraph may reflow and take up more vertical space,
but the layout might also appear "shrunk" if it's relying solely onmax-width.✅ Solution
You can fix this by setting an explicit width or using
width: 100%along withmax-width, like in this example:main { width: 100%; max-width: 400px; text-align: center; border-radius: 10px; padding: 2rem; margin: 1rem auto; color: var(--White); background-color: var(--Grey-800); }
🧱 HTML Semantic Improvement
To improve the semantic structure of your HTML, I recommend using an
<article>element for the "card" content and placing it inside the<main>.
This enhances accessibility and makes your markup more meaningful:<main> <article> ... </article> </main>Also, if you're not using
<header>or<footer>, feel free to remove them to simplify your code.
Your HTML is otherwise well-written. Keep up the great work! 💪 - @Siddharth-escWhat are you most proud of, and what would you do differently next time?
not really proud of anything tbh cuz this task was a blunder for me... i have been making noob mistakes
What challenges did you encounter, and how did you overcome them?faced structure malfunctions, had to apply multiple media query to overcome the issues to an extent
What specific areas of your project would you like help with?how should i structure the website??, how can i overcome the malfunctions when applying flex/grid??, whatever suggestions you guys can give even minor will be useful for me. point out everything. thank you
@EFEELEHey! First of all, despite the small issues you encountered, you managed to solve the challenge in an acceptable and functional way — and that’s something to be proud of! Great job getting through it 🙌
Now, I’d like to share some suggestions that might help improve your solution further:
🖼️ Image styling
To prevent the image from stretching or getting distorted, consider adding the following CSS properties:
object-fit: cover; object-position: center;🔤 Semantic HTML
Try to use semantic HTML tags when possible. For instance:
- Replace:
<div class="mediagrid"> ... </div>with:
<article> ... </article>- Replace:
<div class="Recipe-title">Simple Omelette Recipe</div>with:
<h1>Simple Omelette Recipe</h1>- Replace:
<div class="title-Desc">An easy and quick dish...</div>with:
<p class="title-Desc">An easy and quick dish...</p>🧼 CSS Simplification
You’re using many classes that could be simplified. Reducing redundant classes will make your HTML cleaner and can help avoid selector errors in your CSS.
🧱 Font weight values
You're using
font-weight: 560, which is not valid. Acceptable values are:100, 200, 300, 400, 500, 600, 700, 800, 900Make sure your font family supports the desired weight.
📄 Base font styles
Since you're using
"Outfit", sans-serifas your base font, it's better to set it directly on the<body>:body { font-family: "Outfit", sans-serif; font-weight: 400; /* other base styles */ }And apply
"Young Serif", serifonly for headings:h1, h2, h3 { font-family: "Young Serif", serif; }🎨 Color variables
To keep things clean and consistent, you can define your colors using CSS variables in the
:rootselector. Here’s an example::root { --Nutmeg: hsl(14, 45%, 36%); --Dark-Raspberry: hsl(332, 51%, 32%); --Rose-White: hsl(330, 100%, 98%); --Eggshell: hsl(30, 54%, 90%); --Light-Grey: hsl(30, 18%, 87%); --Wenge-Brown: hsl(30, 10%, 34%); --Dark-Charcoal: hsl(24, 5%, 18%); }And then use them like this:
body { background-color: var(--Eggshell); color: var(--Wenge-Brown); }💬 Final words
Don’t stress too much — front-end development is all about practice. There’s almost always a better way to solve something, and the key is to keep building, keep learning, and keep improving.
If it helps, here’s my own solution to this challenge from over a year ago. There may be parts that can inspire you, and probably parts I could improve now too 😅
Keep up the great work! 🚀
- @mayramatos@EFEELE
Great Job!
- @abubakar-sadiq001What are you most proud of, and what would you do differently next time?
I built the solution without getting the colors, I generated colors with the color palette and I also finished it in under 150 mins
What challenges did you encounter, and how did you overcome them?Looking for matching colors consumes a lot of my time. but with the help of the CSS color palette, I get the matching colors
@EFEELEGreat job!!
Details about the design colors can be found in your style-guide.md file.
You can create custom properties in your style sheet as follows:
/* Define variables in :root */ :root { --Nutmeg: hsl(14, 45%, 36%); --Dark-Raspberry: hsl(332, 51%, 32%); --Rose-White: hsl(330, 100%, 98%); --Eggshell: hsl(30, 54%, 90%); --Light-Grey: hsl(30, 18%, 87%); --Wenge-Brown: hsl(30, 10%, 34%); --Dark-Charcoal: hsl(24, 5%, 18%); } /* and that's what you can call them *. body { background-color: var(--Eggshell); }You can do tests in codepen https://codepen.io/efeeledev/pen/KKLyGyZ
- @amirulafanndyWhat are you most proud of, and what would you do differently next time?
Be able to use flex box styling.
What specific areas of your project would you like help with?I dont know how to adjust the card and item width as the screen size change.
@EFEELETo do that you have to implement media queries in CSS.
an example:
/* Styles normal */ .my-div{ width: 800px; height: 500px; background-color: red; } /* Styles on devices with a max-width 768px */ @media screen and (max-width: 768px){ .my-div{ width: 400px; height: 250px; background-color: green; } }Test on codepen : https://codepen.io/efeeledev/pen/MWdOPoV
- @jaalzuWhat are you most proud of, and what would you do differently next time?
im proud of the way i make the functions of js. i make really nice the swap but i can't make the values of inputs appears on screen
What challenges did you encounter, and how did you overcome them?i can't make selected numbers of rating appears is next page
What specific areas of your project would you like help with?with the js area. most exact in the selected numbers when i rating. also i will like help with media queries. how do i make responsive without have to make a lot of media queries
@EFEELEGood job!!! I share with you how I did the Js part
With innerHTML you can replace the content of an HTML element and thus make the final message ** dynamic**
let optionSelected; const container = document.getElementById('container'); const thanks = document.getElementById('thank-state'); const showValue = document.getElementById('our-selection'); function checkValue(){ const options = document.getElementsByName('option'); for (let i=0; i < options.length; i++ ){ if(options[i].checked){ optionSelected = options[i].value } } if(optionSelected){ container.style.display = 'none'; thanks.style.display = 'flex'; showValue.innerHTML = 'You selected ' + optionSelected + ' of 5'; }else{ alert('You have not selected any options') } }I share my repository with you in case you like to test: GitHub Repo
I hope that helps!!
- @tortarugaWhat are you most proud of, and what would you do differently next time?
I'm happy because this was the first project where I didn't have issues with github. Next time I'd try to be more organized and have a clearer idea of what I have to do before just diving into it because I kept going back to the design image every three seconds and I feel like I wasted so much time
What challenges did you encounter, and how did you overcome them?I had a few problems with the styling, but I solved them playing around with the properties a bit (sheer luck)
What specific areas of your project would you like help with?how do I determine the break point for the mobile version? I just used 500px because it's where the design started looking a bit ugly...
@EFEELEI recommend you base it on these breakpoints, my friend!
- X-Small <576px
- Small ≥576px
- Medium ≥768px
- Large ≥992px
- Extra large ≥1200px
- Extra extra large 1400px
Marked as helpful - @Sazid99246What are you most proud of, and what would you do differently next time?
I am proud that I have done this project myself, in between 2-4 hours.
What challenges did you encounter, and how did you overcome them?I found it challenging to make the card center of the page
What specific areas of your project would you like help with?I think my project is perfect, but I need feedback on it to do it better.
@EFEELEYour project is very well done!!
I want to give you an extra piece of advice to make it look even better!!
In your .container, you can add these two attributes. The first one is a** transform: translate** to move your card and compensate for the box-shadow you added, this way it will seem like the card is moving and not the shadow. And the second attribute is changing to cursor: pointer to make it look much better. Remember, this is done using the :hover pseudo-class.
.container:hover { box-shadow: 15px 15px #111; transform: translate(-5px, -5px); cursor: pointer; }¡Congratulations!
Marked as helpful - @agsendoWhat are you most proud of, and what would you do differently next time?
In this project I mostly used the margins and padding to match it to the design. In the future I would focus more on other techniques of centering the elements.
What challenges did you encounter, and how did you overcome them?I tried a few methods to keep the footer at the bottom. Finally, I implemented the absolute position.
What specific areas of your project would you like help with?I would appreciate some feedback on placing the footer, as well as best practices for centering elements on the screen, eg. div.
@EFEELEUse flexbox to center some elements. For example, in your code, you can add this:
Remove the margin-top from your main tag:
And add some properties to your body.
body { margin: 0; padding: 0; background-color: hsl(212, 45%, 89%); display: flex; justify-content: center; align-items: center; min-height: 100vh; } - @Priyanshu-PrimeWhat are you most proud of, and what would you do differently next time?
I used CSS Grids, and it looked very nice
What challenges did you encounter, and how did you overcome them?Could not make the numbers of ordered list bold
What specific areas of your project would you like help with?I would like to know how to make the numbers of a list bold in HTML or CSS
@EFEELEGreat job!! To bold the numbers in your list, you can use the following code!
ol li::marker { font-weight: bold; }I hope this helps you!!
Marked as helpful - @mahmoud17-cmykWhat are you most proud of, and what would you do differently next time?
that I have become more flexible and have more confidence now
What challenges did you encounter, and how did you overcome them?aligning items and it solved by watching some tutorials
What specific areas of your project would you like help with?align items and dimensions in css
@EFEELEGreat job!!!
The best way to align elements, at least from my perspective, is with flexbox, just like you did!
Regarding the dimensions of **margins, paddings, and fonts, ** I recommend using **rem **. You can find documentation on values and units.
And lastly, to make the hover effect look better, I would recommend adding the translate attribute to compensate for the size of your box-shadow, so it appears that the card is moving and not the shadow.
Here is the code:
.container:hover { box-shadow: 20px 20px 0px -3px black; transform: translate(-6px, -6px); } - @saintnic84What are you most proud of, and what would you do differently next time?
Honestly I'm just proud I did this in the first place, and that I was able to at all. I'm trying to make a career change, and doing simple projects like these will definitely help me out. I think I'll try to use bootstrap as my framework for my upcoming projects.
What challenges did you encounter, and how did you overcome them?The challenges I faced were making sure that my margin, padding, and borders all looked good. I overcame the challenges by watching a few videos about the box model, and reviewing the units of measurement. The rest was simply testing my code in my editor.
What specific areas of your project would you like help with?Any feedback would be appreciated. I've got many mountains to climb, but I'll perserve.
@EFEELEImprove your skills using flexbox, and you'll find that it greatly simplifies completing your projects and overcoming those challenges you face. Also, research about box-sizing: border-box;
Click here to more info Flexbox
Click here to more info box-sizing
Much success, colleague!
- @LawrenceLCodesWhat are you most proud of, and what would you do differently next time?
I am proud of the fact that I was able to complete this challenge within a day. I had to take a break from web development for personal reasons. Jumping back into the workflow, I am somewhat "rusty"; however, there were many HTML and CSS practices that I was familiar with and recognized immediately.
What challenges did you encounter, and how did you overcome them?I am proud of the fact that I was able to overcome the image exploding from the container roadblock. In addition, I was able to reduce the qr code component to a reasonable size relative to the entire entir viewport.
What specific areas of your project would you like help with?Any suggestions for general HTML and CSS improvements are welcome. I am always looking to make my markup more efficient.
I am seeking feedback on how I can make further improvements to refine the design, styling and possibly adding features in the future to make the component more useful.
I am also open to adding animations and states to make the component more dynamic.
@EFEELEI'm very glad to see you back in web development!! One never stops learning, congratulations!!
In terms of styles, at first glance, I would recommend reducing the opacity of your box-shadow and perhaps setting it to something like 1px 1px 15px hsl(220deg 15% 55% / 20%), i would also slightly decrease the border-radius.
In terms of HTML, I would recommend changing your h2 to h1, remembering that this helps with SEO.
And as extras, try this to add a special touch to your project:
Remember, you can add active states to your elements using the pseudo-selector :hover
main.qr-container:hover { /* These styles will only be displayed when hovering */ transform: scale(1.02); /* We change the size to make the element a little bigger */ transition: .3s ease; /* we added a transition so that the changes are not so abrupt */ cursor: pointer; /* This will change the cursor type */ box-shadow: 1px 1px 15px hsl(220deg 15% 55% / 50%); /*I would recommend making the shadow darker when in hover. */ }I hope this is very helpful for you, friend!! Lastly, since you're returning to this, I recommend studying flexbox. It will allow you to create almost any interface with CSS.
Marked as helpful - @PetyaBiszepsWhat are you most proud of, and what would you do differently next time?
I can't say I'm proud of something here, but I feel that's a good start to actually START to code. It's a big difference between watching someone coding and coding by yourself so it gives you good practice and makes you try to find solutions for the problems you are facing during creating this project.
I found out some new HTML tags during this project (e.g. table tag), got better understanding of fundamentals of both HTML and CSS and of course @media tag which is required to make this layout responsive, including mobile devices. That's a good start as I said!
What challenges did you encounter, and how did you overcome them?The most important thing I faced during this project is creating a mobile version of this page. I have never looked at @media tag before and its really important skill in my humble opinion. Some overall structure understanding is also a challenge for a newcomer here, but for me it was easier than that.
What specific areas of your project would you like help with?Firstly, I want overall opinion on this page. Does it work as it should? Is there any recommendations in terms of tags, maybe some coding tricks I could use to make my code more clear and the most important, is it good in terms of 'looking like example'. Also it would be amazing to get some recommendations how to work without figma since I'm not premium user. I know it's possible but the only way I could find some numbers is Photoshop. Are there some better ways to do it except figma?
@EFEELEIt works wonderfully!!!
Visually, I would recommend adding a margin at the bottom in the mobile view.
Regarding the HTML tags, I would recommend replacing your div with the class page-layout with a <main> tag. This will help with your website's SEO!!
Marked as helpful - @raphaelsiqueiiraWhat are you most proud of, and what would you do differently next time?
Me orgulho das coisas que aprendi ao fazer essa solução, como o uso de fontes como variáveis no :root, já que até agora eu apenas usava para cores. Também consegui aprender mais sobre pseudo-elementos como o ::marker.
I'm proud of the things I learned while making this solution, like using fonts as variables in :root, since so far I only use it for colors. I also managed to learn more about pseudo-elements like ::marker.
What challenges did you encounter, and how did you overcome them?Tive dificuldades no começo para estilizar os marcadores das tags e , não havia usado até o momento o pseudo-elemento ::marker, também tive dificuldade com as medidas e senti falta dos arquivos figmas. Mas no fim consegui superar essas dificuldades .
I had difficulties at first when styling the markers for the and tags, I hadn't used the ::marker pseudo-element until then, I also had difficulty with the measurements because I didn't have access to the figmas files. But in the end I managed to overcome these difficulties.
What specific areas of your project would you like help with?Estou aberto a qualquer sugestão
I am open to any suggestions for improvement
@EFEELEI had a lot of problem with the bottom borders of the table elements, but now looking at your code I see that it is more practical to do it with divs instead of with table.
Congratulations!!
- @fayiz770What are you most proud of, and what would you do differently next time?
I did this project about 1hour and this was amazing for me.
What challenges did you encounter, and how did you overcome them?place the buttons in center and give them all width 100% button making the parent element as display: flex; does the work.
What specific areas of your project would you like help with?i
@EFEELEIf you add these 3 lines to your body you will be able to center your element vertically and horizontally:
- justify-content: center;
- align-items: center;
- height: 100vh;
In addition to that, I would recommend adding a transition to your buttons to make it look even better:
- transition: .2s ease;
- @navadeepak@EFEELE
You did a good job, I would recommend in this case using figma to know the exact measurements of the elements, in addition to working on the scrolling animation. You can check out my code from this challenge to help you.
