@tunaerten
@jfcode101
Submitted
working on this project has been a very good introduction to JavaScript, it became a good opportunity for me to learn how it works with HTML and CSS to make the web app interactive. The code might need some tweaking, but as of now, that will do!
@tunaerten
Posted
Congratulations on completing the challenge 👋 I really liked your HTML code. I had only used input, but you used form, which seems more correct. -There was also supposed to be an error message in the project, which I think you missed. Adding it could make it more realistic. -You can also improve the readability and usability of your JS code by separating it into more functions.
Best of luck in your future projects!✌️
@WillAsampong
Submitted
@tunaerten
Posted
Hello there! 🙋🏼 Unfortunately, your code lacks the current and previous time; it's quite incomplete. You can update them by manipulating the DOM in JS (e.g., appending HTML using backticks). Good luck!
@itachidevs
Submitted
What are you most proud of, and what would you do differently next time?
I a m proud of improving myself in form validation using JS. Next time I try form validation using CSS.
What challenges did you encounter, and how did you overcome them?
DDuring Writing conditions for validation. But the articles helped me out.
What specific areas of your project would you like help with?
I want help with the image align-alignment for mobile and responsive also.
@tunaerten
Posted
Overall, you've done a great job, congratulations! 👍
max-width to maintain a consistent size. For images that need to adapt to different screen sizes, utilizing the <picture> element is recommended. For instance: <source media="(min-width: 768px)" srcset="{desktop image path here}">
<img src="{mobile image path here}" alt="{alternative text here}">
</picture> ```
- I was particularly impressed with the form section. To enhance realism, you could dynamically display the correctly entered email address using JavaScript, replacing the placeholder with the user's input.
I wish you continued success in your future projects. ✌️
@mike15395
Submitted
What are you most proud of, and what would you do differently next time?
It took a lot of time to complete the mobile footer toggle functionality, I am proud that somehow i completed it.
What challenges did you encounter, and how did you overcome them?
Writing JS code for mobile footer was challenging, i took help of stack overflow to fix my issues.
What specific areas of your project would you like help with?
There is bug in my code, when i resize window to dekstop view from mobile view then last text section disappears. I don't know why? please help me fix it. Also the solution is not pixel perfect, help me achieve close to it.
@tunaerten
Posted
Congratulations on completing this challenging task! 👍 👏
display: none This way, you can adhere to the DRY principle. The issue between desktop and mobile views stems from this.-Additionally, the sizes of the images you used differ from those in the design. You might want to pay a bit more attention to this.
Good Luck ✌️
@wolf2lyon
Submitted
@tunaerten
Posted
Hello there 👏 You've done a pretty good job.
Your project works responsively and aligns well with the design. I have a few suggestions:
<picture> tag with min-width to display different images for various screen sizes. <picture>
<source
media="(min-width: (your value))"
srcset="./assets/desktop/image-hero-left.png"
/>
<img
src="./assets/tablet/image-hero.png"
alt=
/>
</picture>
<picture>
<source
media="(min-width: (your value))"
srcset="./assets/desktop/image-hero-right.png"
/>
<img
src="./assets/tablet/image-hero.png"
alt=
/>
</picture>
cursor: pointer for all buttons.I hope my suggestions have been helpful. Happy coding!
@RKennedyy
Submitted
What are you most proud of, and what would you do differently next time?
I feel more confident with Grid and how it works, I also discovered grid-template-areas and how to set grid placement without using 1 / 1 / 1 / 1 format.
What challenges did you encounter, and how did you overcome them?
I got stuck with adding the background image but found the solution via googling
What specific areas of your project would you like help with?
Any advice welcome!
@tunaerten
Posted
Hello @RKennedyy!
Congratulations on finishing the project!
The project looks awesome!
Here are a few general suggestions for your project:
᭼ You might want to try using em instead of px. This can help with making the site more responsive.
᭼ Starting class names with lowercase letters instead of uppercase might be a more conventional way.
᭼ Additionally, the quotation mark is not in the correct position. You can look more carefully at the project example.
@Ryan-OHanlon
Submitted
What are you most proud of, and what would you do differently next time?
What I'm most proud of from this challenge is that I'm starting to understand to make a responsive website will involve using both CSS Grid and CSS Flexbox.
Learning that you can use grid-template-areas and use periods to take up space on the grid is a neat trick for being able to place elements in a cross formation like in this challenge.
main{
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-template-areas:
".team-builder."
"supervisor team-builder calculator"
"supervisor karma calculator"
". karma .";
gap: 2rem;
}
What challenges did you encounter, and how did you overcome them?
The main challenge I encountered was learning how to implement both CSS Grid and CSS Flexbox at the same time. Having to design custom CSS rules for both mobile and desktop really makes designing and using HTML elements extremely complicated that you feel like you need to create multiple or elements to solve the challenge as both Grid and Flex involves being able to use attributes for a parent-child relationship.
The way I overcame this was to use Grid for the webpage design and use Flexbox for the content. This is the practice I would like to move forward with to develop my knowledge of both Grid and Flexbox.
What specific areas of your project would you like help with?
The area I would like help from with this project is understanding how to stop the text and images from being responsive using CSS.
I know I try and make an exact match of each challenge, but I can't stop the text from being responsive when the window size increases or decreases as seen in the mobile-design and desktop-design pictures.
I would also like help with figuring how to figure out how big or small containers should be for each challenge. Because either I make them responsive or set a specific size and I don't know what's the best practice.
@tunaerten
Posted
Bravo, your project looks great. I had done mine using flexbox, but you did an excellent job with grid as well. The colored borders on the cards end in a straight line; to achieve this effect, you can add a pseudo-element and use the background color of the cards. This way, you can get a result that is a bit closer to the original. Although this project is small, I think it would be more beneficial to work with class names. Lastly, when the screen width is around 1100px, the sections of the first and last cards are off the screen, so maybe you can think of a solution for that too. Congratulations!
@AngeATT
Submitted
What challenges did you encounter, and how did you overcome them?
-My main problem was how i could get 2 columns for desktop version, i tried colum-count : 2 but it was hard to have a good responsive, so i used flex and it was so easy
@tunaerten
Posted
In terms of design, it is quite close to the original, but the fonts and colors are different from those specified. I don't think adding padding to the body in the CSS file is a good option; instead, I would add it to the necessary place (e.g., container or another element). I think I would use classes instead of IDs for larger projects because this way, I could use the same elements in multiple different places
Marked as helpful
@tunaerten
Submitted
What are you most proud of, and what would you do differently next time?
It took longer than I expected. I saw that the project had a lot of details. The Figma file was really helpful. At first, I didn't use flexbox or grid to build the project. After finishing the project and starting to set up media queries, I noticed that when the page began to shrink, it caused many small problems. Therefore, I went back to the beginning and redesigned the page with a grid. This time, I got the result I wanted. In my next project, I will definitely consider this from the start. For the first time in CSS, I used the (:not) operator. I had seen it a few times but had never used it before. Other than that, it was a very enjoyable project. I am eagerly looking forward to the next project.
What challenges did you encounter, and how did you overcome them?
I used table for the first time. I frequently referred to MDN pages to recall what I had learned.
What specific areas of your project would you like help with?
I definitely need help with landmarks. I read the article, but I keep making mistakes in every project when I try to implement them. I would be very grateful if someone could show me how to use landmarks in my project.
@tunaerten
Posted
@sergrosu Thanks for the tip. I think I will use em and rem instead of px in my future projects. They are much easier for responsive design
@Aaliyan10
Submitted
@tunaerten
Posted
Your code looks quite good and clean. I liked it. I would definitely use the alt attribute in HTML. It's very important for screen reader users. In the preparation time section, there's a lack of padding at the top and bottom. Maybe you could add that. For the colors, you might consider using custom properties. It could be more useful to understand names rather than just reading percentage signs.
@MLDharsan
Submitted
@tunaerten
Posted
-The links should have a hover effect. -There is no border in the original project. -You might want to reconsider the width of the element. I recommend you reconsider the design.
@tunaerten
Submitted
What are you most proud of, and what would you do differently next time?
I downloaded the Figma files and used Figma for the first time. I didn't use Figma in my first project, but I found it very useful and will use it in all my projects from now on. Edit: I made some changes. When I first completed the project, I hadn't noticed the hover effect. First, I added that, and second, I placed the cursor from the Figma file. (Thanks to @SaruMakes for the tip.)
What challenges did you encounter, and how did you overcome them?
I had the most difficulty making the cursor pointer have a black and white border. I struggled with this for a long time. It took me a considerable amount of time because I searched extensively on the internet for a solution to color the cursor pointer but found none. As a result, I ended up using an icon instead. I learned that a URL could be added to the cursor, which also took me a long time to figure out.
What specific areas of your project would you like help with?
If there is a way to color the cursor, please show it to me. I would be very happy.
@tunaerten
Posted
Thanks I will examine the design file in more detail
