@mayramatosSubmitted 5 months ago
EFEELE
@EFEELEAll comments
- @abubakar-sadiq001Submitted 5 months agoWhat 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
@EFEELEPosted 5 months agoGreat 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 - @amirulafanndySubmitted 5 months agoWhat 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.
@EFEELEPosted 5 months agoTo 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 - @jaalzuSubmitted 5 months agoWhat 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
@EFEELEPosted 5 months agoGood 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 - @tortarugaSubmitted 5 months agoWhat 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...
@EFEELEPosted 5 months agoI 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 helpful0 - @Sazid99246Submitted 6 months agoWhat 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.
@EFEELEPosted 6 months agoYour 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 helpful0 - @agsendoSubmitted 6 months agoWhat 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.
@EFEELEPosted 6 months agoUse 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-PrimeSubmitted 6 months agoWhat 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
@EFEELEPosted 6 months agoGreat 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 helpful1 - @mahmoud17-cmykSubmitted 6 months agoWhat 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
@EFEELEPosted 6 months agoGreat 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 - @saintnic84Submitted 6 months agoWhat 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.
@EFEELEPosted 6 months agoImprove 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 - @LawrenceLCodesSubmitted 6 months agoWhat 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.
@EFEELEPosted 6 months agoI'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 helpful0 - @PetyaBiszepsSubmitted 6 months agoWhat 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?
@EFEELEPosted 6 months agoIt 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 helpful0
