@mayramatosSubmitted 10 months ago
EFEELE
@EFEELEAll comments
- @abubakar-sadiq001Submitted 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 10 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 - @raphaelsiqueiiraSubmitted 10 months agoWhat 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
@EFEELEPosted 10 months agoI 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!!
0 - @fayiz770Submitted 10 months agoWhat 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
@EFEELEPosted 10 months agoIf 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;
0 - @navadeepakSubmitted 11 months ago@EFEELEPosted 10 months ago
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.
0 - @Andee-KSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
I am most proud of being able to format the box and content close to the actual preview. I think I would need to work more on the standard coding practices for css.
What challenges did you encounter, and how did you overcome them?I did have bit of trouble knowing how to position the boxes into certain areas but I was able to figure out through searching CSS positioning guides.
What specific areas of your project would you like help with?I would like to get help with general style formatting in my CSS file such as responsive design and alternative ways to achieve the same visual.
@EFEELEPosted 10 months agoI would recommend that you put .attribution in position: absolute and with a bottom: 1rem so that it does not spoil your good work with the design of the element.
And you need to add the box-shadow to your container, besides that you did a great job: box-shadow: 0px 25px 25px 0px rgb(0 0 0 / 4.77%);
1 - @PatrickDzSSubmitted 10 months agoWhat are you most proud of, and what would you do differently next time?
De ter centralizado os conteúdos no centro para mobile, que acabou faltando no outro projeto.
What challenges did you encounter, and how did you overcome them?Centralizar os conteúdo no centro para mobolie em tamanho de resolução de 375px.
What specific areas of your project would you like help with?Deixar o código mais semântico.
@EFEELEPosted 10 months agoto center your parent element use flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox
body{ width:100%; height: 100vh; /*vh = View Height | this is to adjust the body of the page to the total size of the screen / display: flex; /With this we convert the body into a flexible box that will allow us to add the following attributes/ justify-content: center; / con este atributo centramos el elemento de manera vertical distribuyendo los espacios vacios / align-items: center; / con este atributo centramos el elemento de manera horizontal */ }
Add the following to your footer:
footer{ position: absolute; /* With this the position of this element will be independent of the others./ bottom: 1rem; / and with this we position it below everything with a space of 1rem */ }
You will have to clean up some properties that you assigned to position your elements, try the code that I provide, and review my code from the same project hoping that it will help you and that you will be able to understand it.
success!! https://github.com/EFEELE/Blog-preview-card/blob/main/index.html
Marked as helpful0 - @EFEELESubmitted over 3 years ago@EFEELEPosted over 3 years ago
Thank you very much for the feedback!
I'll put into practice!! 🤟🤟
0
