
Rafael Dias
@rafaeldgeoAll comments
- @verakissyou17P@rafaeldgeo
@verakissyou17 hi! Very good your challenge! I liked the mode light-dark. I saw that you put the input as type text. It's possible, don't problem! As suggestion, you would check the state of the element input before shows the value into the input, in React is less work than Javascript Vanilla.
Marked as helpful - P@dar-juWhat are you most proud of, and what would you do differently next time?
Decided to make a more universal approach using API and loading data as if from the backend - from data.json. What does this give? Сan add / remove blocks by editing this file and the layout will not break.
Wanted to make a skeleton-loading, but there is not much loaded content for this.
There is more JS code with the construction of an additional DOM, it would be possible to use NPM Redom ...
P@rafaeldgeo@dar-ju congratulation for your challenge. It's very good!
- @abizmoP@rafaeldgeo
@abizmo Congratulation for your challenge! It's very good!
- @Bamo-D-AbdallahWhat are you most proud of, and what would you do differently next time?
The way I organized the partials, although I think I went excessive and over-engineered it.
What challenges did you encounter, and how did you overcome them?The space between each Q/A became a challenge when a question was clicked, it became inconsistent and took me an hour to fix.
What specific areas of your project would you like help with?overall the structure and organization of the project, I feel insecure about the way I named my classes and organized my code.
P@rafaeldgeo@Bamo-D-Abdallah congratulation for you challenge! I didn't get to see it. I think there are a problem with link
- @donSebamarquezP@rafaeldgeo
@sebamarques congratulation for your challange! I didn't preview the site. There's some problem.
- @yannanclsP@rafaeldgeo
@yannancls Congratulation! Your challenge was fantastic!
- @verakissyou17P@rafaeldgeo
@verakissyou17 Congratulation!!! Brilliantly responsive!!!
Marked as helpful - @andersongomes001P@rafaeldgeo
@andersongomes001 Parabéns pelo desafio! Interação com JavaScript DOM ficou ótimo! Só a fonte que está carregando Times New Roman e Arial.
Marked as helpful - @Grimm-NWhat are you most proud of, and what would you do differently next time?
I found it really interesting to work on the entire block! It’s a satisfying feeling to have completed something comprehensive. It’s great to see how all the pieces fit together.
What challenges did you encounter, and how did you overcome them?I realized that we didn't have a mobile design in place, and since the "medium size" was set for tablets, I ended up creating two types of media queries – max and min. It didn't turn out as neatly as I would have liked, but it got the job done!
What specific areas of your project would you like help with?Every comment, piece of advice, and opinion is important to me. They help shape my work and inspire me to improve continuously!
P@rafaeldgeoHi @Grimm-N Congratulation! Your changelle is perfect! I loved the responsive fluid
- P@edpauWhat specific areas of your project would you like help with?
Please kindly review how I make the radio button, please advise how I can improve accessibility.
P@rafaeldgeoHi @edpau Congratulation! your solution is great!! It was very smart you using radio button. In developing this challenge, I'm going change of button to radio button. Thanks! I think you could use aria-label or aria-checked,for accessibility
- @AZZAM-KWhat challenges did you encounter, and how did you overcome them?
It was my first time working with a JSON file and get data from it.
P@rafaeldgeoHi @AZZAM-K Congratulation! The layout your challenge is good! There is some problem with request JSON, the datas are not showing, maybe the problem be in "fetch('./data.json')", you could remove the dot "fetch('/data.json')"
I hope work it.
- @AtaizeWhat are you most proud of, and what would you do differently next time?
This challenge helped me practice CSS grid. I also used pseudo classes and variables in css.
What specific areas of your project would you like help with?I would like to know if I was right using pseudo-classes or if another way would be better.
P@rafaeldgeohi @Ataize! Congratulation! Your challenge is great!
Pseudo-classes was a good solution, but It's more complex! You could using a principal class and other modification class.
Exampla:
.card { font-size: ... font-family: ... .... }
.card--one { background-color: red; color: white; }
.card--two { background-color: blue; color: yellow; }
<div class="card card--one"></div> <div class="card card--two"></div>There's a metodology that can help you. https://getbem.com/
Good luck on your journey! Let's practice!
Marked as helpful - P@NegligenceWhat are you most proud of, and what would you do differently next time?
I'm very proud of using ```clamp()`` to dynamically resize the width and height of images.
What challenges did you encounter, and how did you overcome them?Splitting the desktop image in half.
Group Chatfor Everyone Meet makes it easy to connect with others face-to-face virtually and collaborate across any device. Download v1.3 What is it?
What specific areas of your project would you like help with?.hero__image { overflow-x: hidden; } .hero__img { height: clamp(10rem, 1.4719rem + 36.3868vw, 18.9375rem); &[src*=desktop] { display: none; } } @include mobile-media-query(1150px) { .hero { max-width: rem(1362px); grid-auto-flow: column; margin-inline: auto; position: relative; } .hero__image { display: none; } .hero__img { &[src*=desktop] { position: absolute; display: block; height: clamp(18.9375rem, 1.125rem + 23.75vw, 22.5rem); } &[src*=left] { left: clamp(-4.875rem, -14.625rem + -21.6667vw, -1.625rem); } &[src*=right] { right: clamp(-4.875rem, -14.625rem + -21.6667vw, -1.625rem); } } }
I want to get the background overlay color right for the footer.
I'm currently using a
background-image
property in combination with a::before
element with a background color with opacity, but doing so did not get me the exact color from the design..footer__content { position: relative; place-items: center; row-gap: var(--s-300); margin-block-start: rem(108px); padding: var(--s-800) var(--s-300); width: 100%; height: rem(392px); background-image: url(../images/mobile/image-footer.jpg); background-repeat: no-repeat; background-position: center; background-size: cover; &::before { content: ''; position: absolute; inset: 0; width: 100%; height: 100%; background-color: var(--cyan-600-overlay); } }
P@rafaeldgeoHi @Negligence! Congratulation for your challenge, it's great! About background overlay color right for the footer. Your solution is right.
You could use linear-gradient too.
background: linear-gradient(hsla(192, 37%, 48%, 0.9), hsla(192, 37%, 48%, 0.9)), no-repeat url("../assets/desktop/image-footer.jpg");
I hope to have helped!
Marked as helpful - P@rafaeldgeoWhat are you most proud of, and what would you do differently next time?
I'm proud use Lit Library to create custom form element.
What challenges did you encounter, and how did you overcome them?The challenge was use Lit Library to create form custom element, because I'm still learning to use it.
What specific areas of your project would you like help with?I would like feedback about use Lit Library. Thanks!
P@rafaeldgeoHi @edpau
Yes, I used max-inline-size: 100% and block-size: auto to SVG adjust itself according to the view. I put in SVG code the viewBox attribute.
max-inline-size or max-width define the maximus size image. block-size define the height. It's auto.
You can know more by link
https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
https://web.dev/learn/images
I hope I helped you. Sorry the English
- @BisshyP@rafaeldgeo
Hi @Bisshy! Congratulation for your challenge! Good luck in your studies
- P@DalaScriptWhat are you most proud of, and what would you do differently next time?
- I’m proud that I finished the project and that it looks exactly like the design! 🎉🎨
- I faced difficulties with the share-container; it appeared differently on mobile, causing the article size to change, and it behaved differently on the desktop version. 📱💻
- I managed to fix it, but I’m not sure if it’s the best solution. 🤔🔧
- The project is complete and everything works, but I’m open to any advice! 💡👍
P@rafaeldgeoCongratulation @DalaScript Your challenge is fantastic
- P@danmlarsenWhat specific areas of your project would you like help with?
I always appreciate any feedback
P@rafaeldgeoCongratulation @danmlarsen Your solution was incredible!!
- @verakissyou17P@rafaeldgeo
@verakissyou17 Congratulation! Your challenge was fantastic!
Marked as helpful