Mayra Matos• 20
@mayramatos
Submitted
EFEELE
@EFEELE
All comments
- EFEELE• 350
@EFEELE
Posted
Great Job!
0 - Abubakar sadiq• 290
@abubakar-sadiq001
Submitted
What 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
EFEELE• 350@EFEELE
Posted
Great 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
0 - Amirul Afanndy• 30
@amirulafanndy
Submitted
What 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.
EFEELE• 350@EFEELE
Posted
To 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
0 - javalzu• 420
@jaalzu
Submitted
What 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
EFEELE• 350@EFEELE
Posted
Good 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!!
0 - tortaruga• 450
@tortaruga
Submitted
What 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...
EFEELE• 350@EFEELE
Posted
I 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
0 @Sazid99246
Submitted
What 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.
EFEELE• 350@EFEELE
Posted
Your 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
0- agsendo• 10
@agsendo
Submitted
What 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.
EFEELE• 350@EFEELE
Posted
Use 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; }0 @Priyanshu-Prime
Submitted
What 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
EFEELE• 350@EFEELE
Posted
Great 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
1- mahmoud17-cmyk• 300
@mahmoud17-cmyk
Submitted
What 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
EFEELE• 350@EFEELE
Posted
Great 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); }0 - saintnic84• 30
@saintnic84
Submitted
What 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.
EFEELE• 350@EFEELE
Posted
Improve 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!
0 - Lawrence Lee• 70
@LawrenceLCodes
Submitted
What 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.
EFEELE• 350@EFEELE
Posted
I'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
0 - Yaroslav Petrov• 80
@PetyaBiszeps
Submitted
What 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?
EFEELE• 350@EFEELE
Posted
It 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
0
