Hicham Abderrahim
@hichamweblogAll comments
- @For1207Submitted 11 months ago@hichamweblogPosted 5 months ago
Hi there,
Here are some thoughts on your project:
-
Positives:
-
Design Consistency.
-
Responsive Design(Good use of media queries for responsiveness)
-
Effective use of CSS variables
-
-
Suggestions for Improvement:
-
Try to Refactor the CSS to remove redundancies and improve efficiency.
-
Consider adding a background color to the page.
-
If you want to make three equal columns in the
header-content
on bigger screens, you can add the following flexbox rule:
-
@media screen and (min-width: 1440px) { .header-content>* { flex: 1 1 100%; } }
Overall, you've done a fantastic job with the project. Keep up the great work!
0 -
- @Shreyas235Submitted 5 months ago@hichamweblogPosted 5 months ago
Hello,
Good job tackling this challenge, but your solution is not responsive for several reasons:
-
Fixed Dimensions: The .group class uses fixed widths and heights (25rem for columns, 15rem for rows), limiting adaptability to various screen sizes. Additionally, fixed heights for elements (257px) restrict responsiveness.
-
Inflexible Grid Layout: The primary layout relies on a grid with fixed dimensions and lacks intermediate breakpoints. The grid does not adjust for different screen sizes, resulting in poor adaptability.
-
Testing on Devices: Make sure to test the layout on different devices and orientations to ensure expected behavior, utilizing tools like Chrome DevTools for simulation.
Keep up the good work!
Marked as helpful0 -
- @iamporrrrrrrrrSubmitted 7 months agoWhat are you most proud of, and what would you do differently next time?
None
What challenges did you encounter, and how did you overcome them?None
What specific areas of your project would you like help with?None
@hichamweblogPosted 7 months agoGreat job tackling this challenge! Here are some tips to improve it:
- Test the webpage on various devices and screen sizes to ensure proper responsiveness.
- Consider using relative units like rems for font sizes and padding to make sure elements scale appropriately on different devices.
Keep up the good work!
0 - @luccaaoSubmitted 9 months ago@hichamweblogPosted 9 months ago
Great job tackling this challenge! Here are some tips to improve it:
- Instead of fixed heights, consider using min-heights.
- Ensure responsiveness in landscape mode.
- Utilize the picture element with srcset to adapt the image according to media size.
- For mobile devices, the image should occupy the full width.
- On desktop, consider reducing the image size to just 50%.
Keep up the good work!
Marked as helpful1 - @kiluiaSubmitted 9 months agoWhat specific areas of your project would you like help with?
How to add the lines or hr tags after each tr tag in the nutrition div
@hichamweblogPosted 9 months agoNice effort in tackling this challenge! Here are some suggestions for further improvements:
- Ensure to include
<!DOCTYPE html>
at the beginning of your HTML file. - Remember to add the
alt
attribute to your images. - Check that your heading elements are ordered sequentially, such as
h1
,h2
,h3
, etc. - When specifying colors, make sure to prepend "#" to the hexadecimal value, like #F3E5D8.
- Note that "justify" is not a valid value for
justify-content
.
Keep up the good work!
Marked as helpful0 - Ensure to include
- @amandalynn1204Submitted 9 months ago@hichamweblogPosted 9 months ago
Great job tackling this challenge!
Just a quick tip: consider using
rem
instead ofpx
, and try to update the link to your repository in your solution.Keep up the good work!
0 - @zaid333saSubmitted 9 months ago@hichamweblogPosted 9 months ago
Great work on solving this challenge! However, here are some tips to enhance it:
- Ensure your project is responsive, especially in landscape mode.
- Instead of using fixed height, consider using
min-height
. - Utilize
rem
instead ofpx
for better scalability. - Incorporate the
box-sizing: border-box
; rule in your reset to ensure consistent box model behavior. - Ensure heading tags are used in sequential order; avoid placing
h4
beforeh1
. - Utilize Flexbox to easily center the card instead of using positioning. Here's a suggestion:
display: flex; align-items: center; justify-content: center;
Keep up the good work!
0 - @Mali-beeSubmitted 9 months agoWhat are you most proud of, and what would you do differently next time?
This was a nice simple little exercise, perfect for beginners, a great way to het one into front-end website development. Look forward to more challenges.
What challenges did you encounter, and how did you overcome them?n/a
What specific areas of your project would you like help with?n/a
@hichamweblogPosted 9 months ago- Great job on the project! You've certainly put in some solid effort.
- Consider using
min-height
instead of a fixed height for better responsiveness. - Try using
rem
units instead ofpx
for improved scalability and accessibility. - Avoid giving images fixed widths; use
max-width: 100%
for images and set a maximum width for their container. - Minimize the use of inline CSS styles for better organization and maintainability.
- Incorporating these suggestions will elevate your project even further! Keep up the good work!
0 - @tedikoSubmitted 9 months ago
Hello! 👋
This time I decided to take on the Design portfolio challenge. It seemed like a good place to start learning the CSS Grid, which is a very powerful tool and I will definitely use it more often now. Instead of using multiple media queries for paddings and spacing, I tried to use clamps for that. There is less code, but in my opinion the readability is a bit worse and it is more difficult to make changes. I probably won't use it that way.
The biggest challenge was writing an accessible slider from scratch. For this purpose, I used
cloneNode()
JavaScript method to clone the first two and last two slide items. To obtain the effect of an infinite slider when the user changes the slide to cloned one, I turn off the CSS transition and restart slider position to either first slide or last slide, depending on direction. Based on the width of the window and the width of the slide, the value for which the slider needs to be moved is calculated to keep the slide in the center of the screen. To keep the slide centered in the container when the user resizes the window, I used the resize event listener, which can cause performance issues. To prevent that I used debounce function. Debouncing is a performance enhancement technique that is widely used to manage function execution rates. To make slider accessible I followed W3C WAI instructions. In short - there's liveregion container witharia-live
andaria-atomic
attributes that announce which item is currently visible every time slide has changed, and each slide apart from current one is hidden witharia-hidden
attribute. Slider can be controled with the arrow keys. Slider can be controlled using the arrow keys as well as by dragging (click or touch screen and drag slide).💡Here's some new things I used or learned:
- Used clamp calculator to find a
clamp()
preferred value expression to perfectly tween a minimum and maximum value between two viewport sizes. - Followed W3C Web Accessibility guidelines to make accessible slider
- Implemented JavaScript Debouning function for resize event listener - Debouncing is a performance enhancement technique that is widely used to manage function execution rates.
- Learned CSS Grid. Grid is a powerful tool for creating two-dimensional layouts on the web.
- I used simple pseudo-content trick to make entire item clickable for these colorfull tiles.
- Learned about
:has()
'parent' selector with some extra superpowers and used it to style an element based on whether one of its children has:focus-active
. "focus-visible-within", a pseudo-class that doesn't exist
🛠️Build with: (can be found also in my others projects)
- Sass CSS pre-processor. Sass is a stylesheet language that’s compiled to CSS. It allows to use variables, nested rules, mixins, functions, and more, all with a fully CSS-compatible syntax. Sass helps keep large stylesheets well-organized and makes it easy to share design within and across projects.
- Sass file structure called 7-1 Pattern. It offers great way to modularize Sass file structure and help keep things easier to maintain. It's all about having everything in order so it is easier to work with code.
- Reduced browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on by using CSS Reset by Andy Bell
- BEM - Block, Element, Modifier methodology, which is a popular naming convention for classes in HTML and CSS. BEM is useful when it comes to larger, more complex projects when code organization becomes crucial. The idea behind it is to speed up the development process, and ease the teamwork of developers by arranging CSS classes into independent modules.
- mobile-first approach. It is one of the best strategies to create either a responsive or adaptive design. Started with the smallest mobile screen and worked my way up.
:focus-visible
pseudo-class to increase usability for sighted users who use keyboard navigation. The :focus-visible pseudo-class is a native CSS way to style elements that are in focus but only applies when you actually want a visual indicator to help the user see where the focus is.- Instead of repeating code for reusable elements I write some helper classes to reuse them throughout the project. I created reusable classes for headings, paragraphs or containers. This saves time as well as unnecessary code repetition. I will definitely try to improve in this aspect.
❓Questions:
- Even though I followed the guidelines to create an accessible slider I am not sure if this is correct since there were few Incompatibilities. E.g. in guideline author focus the selected carousel item by setting its tabindex attribute to -1 but only on navigation buttons, if user change slide with control buttons (like in my solution) it wasn't the case.
- I added an event listener to the document to listen to keydown to change slides. It seems to me that listening to the entire page whether the user pressed a button to control the slider is not the best solution.
- Any suggestions on how I can improve are welcome!
@hichamweblogPosted 9 months agoI learned a lot from your project, especially how you explained your process.
I'll take another close look at it.
Just a quick suggestion: there's an overflow issue, you can fix it with
body{ overflow-x: hidden; }
2 - Used clamp calculator to find a