P
@Y39WebDeveloper
Nadji CHABANE
@CHBNDJAll comments
- @CHBNDJ
hi i coudnt go back to the home page once i left it
- @dullarzeeWhat are you most proud of, and what would you do differently next time?
my first project built with tailwindcss
What challenges did you encounter, and how did you overcome them?well..newly using tailwind is like learning a new language with new syntax
@CHBNDJnice job overall just a little bit of work for the style but its not the most important i think. I really like your animation for the bookmark, searching and sharing. keep building my friend :)
- @Ayodelearog@CHBNDJ
Nice I like the slide right and back good effect keep building
- @ochifeoge@CHBNDJ
Nice overall great jobs however you should try something like that for the bar below the links nav in your header and footer .navlinks ul { width: 380px; height: 25px; display: flex; align-items: center; flex-direction: row; gap: 32px; list-style-type: none; }
.navlinks ul li a { position: relative; text-decoration: none; color: white; font-family: "Alata", sans-serif; font-size: 15px; line-height: 25px; font-weight: 400; }
.navlinks ul li a::before { content: ''; position: absolute; width: 0; height: 2px; background-color: white; top: 30px; left: 10.75px; transition: width 0.3s ease-in-out; }
.navlinks ul li a:hover::before { width: 24px; }
Keep building :)
- @ManojSinghDashauni@CHBNDJ
Hi nice design job just i can give you some tips for the background-color on th img when the hover is used thats what ive done .img-logo { width: auto; height: 302px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden;
}
.img-logo img { width: 100%; height: 302px; border-radius: 8px; display: block; }
.img-logo::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #00FFF8; opacity: 0; border-radius: 8px; transition: opacity 0.3s ease; }
.img-logo::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background-image: url('data:image/svg+xml;utf8,<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M0 0h48v48H0z"/><path d="M24 9C14 9 5.46 15.22 2 24c3.46 8.78 12 15 22 15 10.01 0 18.54-6.22 22-15-3.46-8.78-11.99-15-22-15Zm0 25c-5.52 0-10-4.48-10-10s4.48-10 10-10 10 4.48 10 10-4.48 10-10 10Zm0-16c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6Z" fill="%23FFF" fill-rule="nonzero"/></g></svg>'); opacity: 0; transition: opacity 0.3s ease; }
.img-logo:hover::after { opacity: 0.5; }
.img-logo:hover::before { opacity: 1; }
- P@aouintihouari@CHBNDJ
Nice job overall congrats i see no big improvment to do on this project the most important things are all here nice job !!!
- P@JJorgeMS13What are you most proud of, and what would you do differently next time?
Me encanto poder aplicar la metodologia BEM para poder mejorar mi codigo CSS
What challenges did you encounter, and how did you overcome them?ninguno
What specific areas of your project would you like help with?Me gustaría que me ayuden como puedo crear un codigo mas limpio
@CHBNDJnice overall
- P@JJorgeMS13What are you most proud of, and what would you do differently next time?
Me encanto poder crear ya mas algo mas elaborado, la proxima vez planearia mas el desarrollo antes de empezarlo.
What challenges did you encounter, and how did you overcome them?mi reto mas grande fue hacer las pantallas position: absolute y que pudiera acomodar los componentes del Slider.
What specific areas of your project would you like help with?Me encantaría que me ayuden a mejorar mi estructura HTML ya que tengo cosas repetidas como el slider.
@CHBNDJtoo much things that are missing my friend i mean you did well overall but compare to the design is not the same check yours a links in the header try to test the ::before element to them to put the orange line in the horizontal line. I can go on and on but its just the design. The main things about this project is well done. Good job my friend :)
- @TCO932@CHBNDJ
Nice project overall but try in the desktop version to put a margin between the header and your main. Also regarding your mobile version you can try to put a transition for your toggle menu and also try to make it appear for the right instead from the left. Here what ive done
nav { width: 65%; height: 100vh; position: absolute; top: 0; right: 0; display: flex; justify-content: center; align-items: center; background-color: #FFFDFA; margin-right: -100%; transition: margin-right .5s ease; z-index: 1000; }
nav.open-menu { margin-right: 0; } by default the nav menu is in margin right -100% when i click to the icon menu the nav come until the margin-right is 0. Cheers. :) - @AZZAM-K@CHBNDJ
try to increasse the width of your main container and i couldnt see the error message when i write nothing to the inputs
- P@MsadafK@CHBNDJ
nice work overall maybe try with a reduce width but the main point and problem have been resolved congrats :)
- P@MsadafK@CHBNDJ
change the color of your submit add padding to your button number and reduce the gap between your buttons. Maybe you can try at least thats what ive done to click outside of the modal and it will bring us back to the the intro choices. great work :)
- P@sikulamartin@CHBNDJ
nice job congrats i try your code and i didnt see the response i give you seems to have forgot the focus on your response thats the only big think you forget in my view. :)
- P@medic-codeWhat are you most proud of, and what would you do differently next time?
Proud to complete my first intermediate project. The javascript was pretty interesting to get into and lots of different aspects to consider. I'm not sure there is much I'd do too differently, i decided to do the JS first which helped. There was a bit of changing of html and js after styling though, not too sure if that could've been helped.
What challenges did you encounter, and how did you overcome them?Not too much challenges really, had a bit of trouble getting the custom input radiobox to style, and spent quite a bit of time trying to get the differences in sizes between tablet and mobile set up.
What specific areas of your project would you like help with?HTML Semantnics
CSS methodology and approach
JS syntax and conciseness.
@CHBNDJhi nice job overall just take a look at your slider the green color should not be there when there is no number at the character length try someting like that slider.addEventListener('input', (e) => { myValue.textContent = e.target.value;
let mouse = slider.value; let color = `linear-gradient(90deg, rgba(164, 255, 175) ${mouse*5}%, rgb(24, 23, 31) ${mouse*5}%)`; slider.style.background = color;}); play with the linear gradient in your css with 50% of green and 50% of black then do the JS above.
good luck :)
- @AntonvasilacheWhat are you most proud of, and what would you do differently next time?
- JavaScript part was pretty easy, despite handling multiple inputs of different types
- Managed to implement a bit of reusability in the code
- Would probably think more about form validation to make sure it's properly covered
- Some of the input styles were challenging, but nothing a few more divs can't fix
- Naming the CSS classes due to how deep the HTML tree became - I used some element selectors to cover for that
There is probably a better way of storing the state, I tried to use an object, but didn't do much with it in the end.
@CHBNDJnice work overall just check the width and the height of your elements and the position of them also + the splitter
- @Si1entERAWhat are you most proud of, and what would you do differently next time?
The completion of the project and improving my understanding with json and fetch.
What challenges did you encounter, and how did you overcome them?Instead of creating multiple cards in HTML and using Json to manipulate the data within each one, I decided to use JavaScript to dynamically add the cards with the Json data. This also meant I had to make changes to data.json and add 'key, color and images' and its associated values.
The reason why I took this approach is because, if you wish to add or remove the cards, you can just alter the data.json file.
What specific areas of your project would you like help with?Any and all feedback is welcomed.
@CHBNDJNice job my friend just if you have time checkout the size of your card to be as close as possible of the design :)
- @SatyamVyas04@CHBNDJ
Hi my friend first of all great job just about your img checkout in the figma file the width and the height of the picture same as with your both input.
Best regards
- @S-LoCascioWhat are you most proud of, and what would you do differently next time?
Figuring out the Javascript was quite fun actually. I also was very happy continuing the work with my padding and margins.
What challenges did you encounter, and how did you overcome them?The share box was a giant PITA. Additionally, dealing with the image size was a hassle, but I now know about object positioning a lot better. Getting the share button to work was also a hassle and at one point I soft-key gave up when it was "good enough."
What specific areas of your project would you like help with?Figuring out how to deal with SVG files. I followed a few tutorials but none of them worked for my project. I'm guessing it had something to do with how I nested things but still. yeah. I also couldn't think of how to remake the div on the mobile client with the share materials to include the share button.
@CHBNDJgood job overall the overall design is good how did you manage for the click on the button ?
