Looking to hire developers?
@MarcusTuliusCiceron
@jesuisbienbien
Submitted
When I click on a question and then click on a different one, the box (or the entire left side) doesn't move smoothly and it looks like a glitch haha. Any suggestion how to fix that?
Any other feedbacks are welcome as well.
Thanks in advance.
@MarcusTuliusCiceron
Posted
Hi congrats on this challenge,
I think if you add a tempo between opening and closing accordeon it may look like smoother, you con try something like this:
for(let i =0; i<questionContainers.length; i++){
questionContainers[i].addEventListener("click", (e) => {
if(prevOpen === i) {
close(i);
prevOpen = null;
}else {
if(prevOpen!== null){
close(prevOpen);
}
setTimeout(function() {
open(i);
prevOpen = i; //your code to be executed after delay
}, 300);
}
})
}
I couldn't test it as I'm currently at work :D But I think you get the idea
Hope this will help
Have a good day
Marked as helpful
@elodiehg
Submitted
I'm not sure about how to display the hero's image into my div card. Any feedback is welcome !
@MarcusTuliusCiceron
Posted
Hi, congrats on completing this challenge,
I usually choose to display image as a background image in an empty div on which i will force the dimension. If needed I can change background image with media querries to have mobile image or desktop image when needed. Other solution is to use image tag but i find it less conveniant to make it responsive as it will not resize automatically according box size.
Hope this will help
Have a good day :D
Marked as helpful
@ritesh-karankal
Submitted
I used rems for margin and padding. What is the best unit to use for margin and padding rem or em?
I have given the container width in pixels. Should I use rem or % for giving it width?
@MarcusTuliusCiceron
Posted
hey congrats on completing this solution:
I'm not css expert but I believe rem and em are more font size units that will adapt to the end user browser settings. So if you use it for margin/padding end user will not have same result according their browser setting for font size. For padding/margin and for width/height I think it is a better practice to use unit like %, vw, vh, vmin, etc Those are all units related to browser size (except %) that will help you to have a smooth display on all screen size. It will still be necessary to use media query to adapt layout but this will help transition between breakpoint to look nicer.
Hope this will help,
Have a good day and keep up with the good work :D
Marked as helpful
@Weroniika
Submitted
Difficult for me was pixel perfect approach, do you have tips or resources to learn how to better turn design into code?
@MarcusTuliusCiceron
Posted
If you want a pixel perfect implementatoin I think it is better to have web browser extension that will allow you to apply your design as a mask on the website so you can see in real time implementation distances with the original design.
Also if you want it to work perfectly on all browser, learning more about each browsers specificity (webkit based or not) will allow you to deliver professional result I believe.
Marked as helpful
@2000andjames
Submitted
I couldn't get the svg images to show how they do in the design so I left them out.
Getting more practice using flex to position and layout elements
.some-element {
display: flex;
align-items: center;
justify-content: space-around;
}
@MarcusTuliusCiceron
Posted
Hello,
I think the following style will apply the image on the layer quite close as on the design.
background-image: url(icon-study.svg);
background-repeat: no-repeat;
background-position: right top;
If you want it to overlap the edges as on design you can try to position it with somthing like this:
background-image: url(icon-study.svg);
background-repeat: no-repeat;
background-position: calc(100% + 10px) calc(100% + 10px);
hope this will help :D
@B0R155
Submitted
The pictures wont load for some reason, but the accordion itself works.
@MarcusTuliusCiceron
Posted
for the image issue you can try to use relative path like this:
<img src="images/illustration-woman-online-mobile.svg" alt="">
Hope this will help, it is always frustrating to have something working on local and having issues when going live.
Happy coding :D
@jhoanSebasPerez
Submitted
How could the project be modularized?
@MarcusTuliusCiceron
Posted
I'm actually trying to build this using react, it is a very good one to learn react basics I think
@mfscode
Submitted
@MarcusTuliusCiceron
Posted
Hi, congrats on completing that challenge.
What you can do for that is use pseudo element after or before instead of using an overlay div. If you need code sample to understand how it work you can try to translate this scss into css (I never right vanila css so I don't remember if those selector works there.
.div_img{
//insert img style
position: relative // this will help to position pseudo element
}
.div_img:hover::after{
content: ""; // this will allow you to display the pseudo element
position: absolute // this will allow you to use next property
inset: 0 // this will make the size of the pseudo element fill its parent, here the image div
// insert overlay style background color and background img
z-index: 1 // to make sure the pseudo element will display on top of its parent
}
Hope this will help, if you have any question on how it works don't hesitate to ask
Have a good day
Marked as helpful
@SangamSmilikaReddy
Submitted
i am unable to use javascript part properly....
@MarcusTuliusCiceron
Posted
Hey congrats on submitting this challenge,
From what I see you are trying to go for a very complex solution, not sure if it is really a good approach for a first try. What I could suggest is: in html: -use only class for your rating btns in css: -create a class for the selected btn style in JS: -create a funtion that toggle the selected class on an element.
add event listener on all buttons on click that will call your function that toggle the selected class.
This will be a first step on your code I think
Hope this will help you to sort out your issues
@ArtemMakhaydinov
Submitted
Hi comunity! Thats my first try. Did it using just HTML and CSS. Will be happy to read some response. Thx <3
@MarcusTuliusCiceron
Posted
Hello congrats on this challenged, as mentioned in the accessibility report you can try to wrap your code in a main landmark
Also if you want to be sure that your card is centered here is what you can do:
body {
background-color: hsl(212, 45%, 89%);
font-family: 'Outfit', sans-serif;
font-size: 15px;
width: 1440px;
min-height: 100vh;
text-align: center;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.attribution{
display: none;
}
Hope this will help :)
Have a good day
Marked as helpful
@margsoftbf
Submitted
Hello, i'm finished next challenge. I spent two days on this. Things which i don't know how to implement. If someone can look for code and give me some feedback it will be great maybe gave mi some tips.
JS:
CSS
@MarcusTuliusCiceron
Posted
Hi congrats on this challenge, here what you can try to fix your issue:
CSS
.active .box__accordion--arrow {
position: relative;
height: 10px;
transition: 0.3s;
rotate: 180;
}
JS
function openAccordionItems() {
if (this.nextElementSibling.classList.contains('active')) {
this.nextElementSibling.classList.remove('active')
this.style.fontWeight = "400";
} else {
this.nextElementSibling.classList.add('active')
this.style.fontWeight = "700";
}
}
This will rotate only the arrow classes inside the active classes so you don't have to modify it inside the JS and you will have only one event listener. I'm not sure about this CSS selector I usually write in SCSS but it should be ok.
Hope this will help you :)
Happy coding :D
Marked as helpful
@ebukanas
Submitted
Not sure what's the best way to build the "annual plan" pricing section. I used CSS Grid to split it into 3 columns of 1fr, 2fr, 1fr. I'm sure there is a better way to do it though.
@MarcusTuliusCiceron
Posted
Hi congrats on this challenge,
There is always multiple ways to layout element, one way is not better than another, just use what your comfortable with in a first place. Then if you're facing perfomances issue you can try to go for efficient solution.
Here is how I did when I did that challenge: HTML:
<div class="card__item">
<div class="card__item__image">
</div>
<div class="card__item__text">
<p class="card__item__name">
Annual Plan
</p>
<p class="card__item__price">
$59.99/year
</p>
</div>
CSS
.card__item{
background-color: $veryPaleBlue;
border-radius: 10px;
padding: 24px;
display: flex;
align-items: center;
margin-bottom: 30px;
&__image{
background-image: url(icon-music.svg);
width: 48px;
height: 48px;
margin-right: 20px;
}
&__name{
color: $darkBlue;
font-weight: 600;
margin-bottom: 8px;
}
&__text{
margin-right: 90px;
}
}
I used margin and media querry to make sur it stays in good shape when window size change.
Hope this will help
Happy coding :D
@MarcusTuliusCiceron
Submitted
Really had fun on this challenge, but noticed that the figma file are a bit different from the actual design on the color of the asset don't know why. It was first time I tried to animate some element in, I understand how to do it technically but it is hard to balance it to make it look clean.
@MarcusTuliusCiceron
Posted
Animation mess up with the screenshot so try to use the preview site feature :D
@verdepedro
Submitted
Hi everyone!
I am submitting this challenge where I found real difficulties placing the elements in the correct place. Please do not hesitate to check out the code if you have any feedback or suggestion, I will really appreciate it! I wish you all a wonderful day!
@MarcusTuliusCiceron
Posted
Hey congrats on this challenge,
One little thing you can do that will help you position your element is to insert some style reset at the begining of your code:
*, *::before, *::after{
box-sizing: border-box; //allow you to size alement according their border
font-size: 100%; //make the font size fill the line
margin: 0;
padding: 0;
line-height: 1;
}
hope this will help you :)
Happy coding :D
Marked as helpful
@NadiaFrShLm
Submitted
It looks like my css file is huge, still can't understand how to minimise css proprieties.
@MarcusTuliusCiceron
Posted
Hey, happy to see a fellow french citizen here :) However I'll stick to english for the sake of everyones understanding.
There is nothing wrong about your css file size. it is not that big. You simply can't afford to not use the css properties you need. if you want to reduce your file size you will have to increase the number of file you have. This is usually a good practice when the layout to implement become richer. Another thing you can try is learning Sass, it's very close to css but have some extra features that in some case can reduce the size of your css (loops, conditions, nesting, etc)
Hope this will help you
Have a good day :)
Marked as helpful
@Reinamimi
Submitted
I found out difficult aligning the code component vertically to the centre. Also I would like to know if there are better ways to achieve the solution compared to my code solution. Feedback welcome
@MarcusTuliusCiceron
Posted
Hi congrats on completing this challenge, One little advice I can give you is to write your style in separate css file. To center the card how's you can do in a css file:
body{
display: flex;
flex-direction: column;
align-items: center; //that will center vertically everything in the body
justify-content: center; //that will center everythin horizontally in the body
height: 100vh
}
In terms of accessibility you can also try to wrap all your page content in a main landmark
Hope this will help
Happy coding :D
@jplawrence
Submitted
Hey everyone! I'd appreciate it if you gave some feedback on my solution with regards to the HTML and CSS, or possibly anything you would've done differently :) Have a lovely day!
@MarcusTuliusCiceron
Posted
Hi congrats completing this challenge, Here my comment regarding your code: -In the HTML you could wrap everything into a main landmark to improve accessibility of your code
<body>
<main>
</main>
</body>
-when you're doing style reset don't forget to also reset styles for your pseudo element
* , *::after, *::before{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Outfit', sans-serif;
}
-when you're setting height or width of an element, try to use one of the following unit: vh, vw, %, vmin, ... This will help make your layout responsive in bigger project
Hope those tiny advice from beginer to another will help you, happy coding :D
Marked as helpful
@David-Paulos
Submitted
Done without JavaScript
@MarcusTuliusCiceron
Posted
Hi congrats on this challenge
I did not know detail landmark, but indeed that's quite clever use of it. I'll try to keep that possiblity in mind. However in terms of end result doing CSS only your not able to animate the closure. In that case I think you should choose between: -No JS and no animation even for opening -CSS and small JS to add closing animation
Anyway thanks for this clever use of that landmark
Happy coding :)
@MohamedAridah
Submitted
Hello Coders!, How do you find my code? if anything need fix ,please let me know..
Have a good day everyone^^
@MarcusTuliusCiceron
Posted
Hi, congrats on completing this challenge,
Your code is really clean, one little remark (its really not a big deal), rem unit are not always adapted to width and height and will make design less responsive, it is better to stick to %, vh, vw, vmin or other relatives unit. rem is usually better for font size and line height.
Hope this will help, and again this isn't really a big deal.
Happy coding :D
Marked as helpful
@matheuspergoli
Submitted
I had to think for a while to get the selected buttons, it took me some time xD but then I finally did it, if you have any suggestions for me I'd appreciate :)
@MarcusTuliusCiceron
Posted
Hi congrats for completing this challenge.
I found a small issue, user can select multiple ranks. To fix this here how you could do:
document.querySelectorAll('.rate').forEach(rate => {
rate.addEventListener('click', () => {
document.querySelectorALL('.rate').forEach(rateElem => {
rateElem.classList.remove('selected')
})
rate.classList.toggle('selected')
})
})
hope this will help you :)
Happy codding :D
Marked as helpful
@obinneji
Submitted
This is my first project on javascript, I would love to know your opinion. I also experience some difficulty in using colors, especially for the button, if you have suggestions on how to go about it I will be happy to learn from you.
@MarcusTuliusCiceron
Posted
Hi congrats on this challenge,
First remark is when user didn't select rank and click on submit, page should not switch. You can try to create a local JS variable storing the last rank selected by user and on click on submit check if this have a value > 0.
Then regarding color you create a class active state and add it to the rank button you clicked. Don't forget to remove it from the other rank button or else you will have multiple active button at same time and it will be confusing for user.
I hope this is clear and will help you
Happy coding :D
@thanhtinh1227
Submitted
Why input[type="range"] appear so differently on Chrome, Firefox, Edge?
@MarcusTuliusCiceron
Posted
Hi, all browser have different default style for input tag, if you dont take time to reset all the style it may have some differences between different browser on your end result. You can try to use that default style reset block to make it similar on all browser:
button,
input,
optgroup,
select,
textarea,html input[type="button"],
input[type="reset"],
input[type="submit"],button[disabled],
html input[disabled],button::-moz-focus-inner,
input::-moz-focus-inner, input[type="checkbox"],
input[type="radio"], input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button, input[type="search"], input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{
border:none;
background-image:none;
background-color:transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
Hope this will help :)
Happy coding :D
Marked as helpful
@Asantae
Submitted
I have 2 main questions/issues that I definitely need help with
-Does anyone know how you can limit or restrict the input of certain things ie negative numbers or decimals. I couldnt figure this one out either. much thanks
@MarcusTuliusCiceron
Posted
Hey, for the difference between mobile and desktop using mobile inspector, maybe the difference come from the browser itself, if you're using chrom on desktop and safari on mobile it can cause some differences.
To prevent user press multiples dot I suggest You update a boolean var on first press on dot and check the value of this before adding another dot, then you can reset the boolean when user press equal. I hope it is clear, as for negative number I'm not really sure why you want prevent user to enter it.
Happy codding :)
@Git-Lux
Submitted
Struggled with the positioning of the cards in the desktop version of the page. Overall I feel like I did good but would really appreciate any feedback and tips on what and how to improve. Is there a better way to position the cards in the desktop version? I plan to start using and learnin grid on the next few projects, fell like it will allow me to do exactly that. Anyways, have a great day everyone.
@MarcusTuliusCiceron
Posted
Hey, I did this exact challenge few days ago using grid and it was really interesting to learn how to use it, I was even able to come with a tablet version pretty easily with that. My favorite ressource to use grid on a daily basis is css tricks grid guide
https://css-tricks.com/snippets/css/complete-guide-grid/
If you understand how grid template works it will make your life so much easier. You can have a look on my profile to look at the grid solution for this one. Hope this will help you :)
Looking forward to see your next challenges :)
