Latest solutions
Latest comments
- @CoconutDev13@ladyprogrammer
I like your code, it's clean! You had that all working in just a few lines of code! This makes it easier to maintain and follow the code.
Yeah I think hiding and showing the sections via hidden attribute is what I also think the cleanest and most elegant solution when just trying to do the two simpler pages with plain HTML - but this is just a personal opinion. We probably would want to use a framework or library like React or Angular to actually help us on more complex approaches to really divide the page into smaller components for multi-page websites. Other approaches I have seen before is to use
document.open
anddocument.write
(or similar to that) and another is the use of ajax requests to read and insert snippets of HTML pages. Not really that simple as that with just hiding and showing the sections.There are also some issues with the validation report - but I will leave you up to it to resolve and figure that out unless you need guidance. I have a feeling you can do these on your own. :D
In real-time projects, just keep in mind that a dev should strictly follow the agreed behavior and appearance which is defined usually by the UI/UX team/site owner/product owner/other similar persons who is in charge - unless you are given that creative freedom to do so. If you think a behavior or appearance is better (which is usually subjective), it's better feel to talk with the person-in-charge of the design and behavior.
In my understanding as part of the challenge stated in the Brief section: Your challenge is to build out this interactive rating component and get it looking as close to the design as possible.
Any assumptions - if you should do one - should not impact the originally approved design and behavior.
Nice work! I have a feeling you have been coding for a while.
Marked as helpful - @Ikuewumi@ladyprogrammer
You're off to a good start! Nice attempt on the this challenge. I did mine just a couple of days ago and I find it quite a challenge as well.
I reviewed the design images and it doesn't appear to require those. They appear to be just plain colored borders. However if you are curious border gradient requires several properties added in CSS to make that work, not just one.
input { border: 1px solid rgba(...); border-radius: var(--br); // this stopped working when border-image was used on hover } input:focus-visible { border-image-source: linear-gradient(20deg,hsl(249,99%,64%),hsl(278,94%,30%)); border-image-slice: 1; // need to have some value border-image-repeat: round; }
I noticed that
border-radius
stopped working when you used border-image, so I appears they are not compatible. Also, at 1px border the gradient on focus isn't too noticeable unless you increase the px size to maybe 15px so you can actually see the gradient colors. So I am convinced this is just a solid border in one color. On checking via inspect element, the border gradient has been rendered all right - it's just not obvious because it's just 1px - so need to stress yourself out here!I noticed that the card doesn't update in real-time - it is only updated after submission, but as per listed in the requirements:
- Fill in the form and see the card details update in real-time
Which meant that the card details update as you type. Probably best add event listener "input" for every input and write a function to update the card details from there.
Other notable things to improve -
- It is cleaner to use the bg-front-card.png as a CSS background for the card, so you use lesser HTML code. Same is true with the backside of the card.
style.css
.card-front { background: url('/images/bg-front-card/png') no-repeat; }
index.html
<div class="card card-front"> // remove <img > <span>...</span> </div> ...
Marked as helpful - @retailescapeartist@ladyprogrammer
There are several techniques to center content if you look around. The most recent ones are CSS Flexbox or Grid. Among those I searched online, these two are the ones that helped most.
- [CSS Flexbox] (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [CSS Grid] (https://css-tricks.com/snippets/css/complete-guide-grid/)
I suggest learning CSS Flexbox first as it's easier to grasp before learning the CSS grid as flexbox is simpler.