I've finished the project—well, almost. I'm having trouble with the blue detail behind the images. I tried using pseudo-elements and HTML tags, but it keeps breaking the responsive layout. I'd appreciate it if you could share some ideas on how to do it properly.
Man this is so smooth🏄🏾 You got your transitions on point👌
For the blue background I just used an ::after pseudo-element and it works but it still is not that much accurate.
I think it would be better to use transition with transform instead of displaying the images on and off.
*I'm most proud of having built a fully responsive landing page using modular SCSS, with a design that respects the original mockups in both mobile and desktop versions. I also focused a lot on accessibility, incorporating aria-label attributes, avoiding position: fixed when necessary, and adjusting the tab order.
One of the things I liked the most was working with clamp() and min() to achieve a fluid design without relying exclusively on media queries.
Next time, I would like to better organize the SCSS files from the beginning and apply a clearer naming convention (like pure BEM ). I would also spend more time improving the HTML semantics from the beginning, making sure to use landmarks correctly (<main>, <nav>, <section>, etc.), which was a fix that I implemented in later stages of the project.*
What challenges did you encounter, and how did you overcome them?One of the main challenges was managing the darkened background of the hero with ::before without covering the header content. Initially, the text appeared behind the filter, but I solved the issue by correctly adjusting the z-index and applying position: relative only to the necessary elements.
I also encountered issues with SCSS modularization using @use and @forward, particularly with missing imports or name conflicts. After reviewing the structure, I ensured that all files were properly connected using namespaces and organizing utilities, variables, and mixins correctly.
It was also challenging to make the mobile menu buttons accessible. I received warnings about buttons without visible labels or aria-label, so I added clear descriptions for screen readers.
In the future, I would spend more time improving HTML semantics from the start, making sure to use landmarks correctly (main, nav, section, etc.). This was a fix that I implemented in the later stages of the project.
What specific areas of your project would you like help with?El contenido y como estoy ordenndo todo con SCSS y la parte de accessibility
First of all, the menu looks stunning on smaller devices👌 but you're supposed to align it horizontally on larger devices.
The other improvement you can consider is the grey background on the main area of the page because it is white (transparent) on the design file.
Your main.scss file is more than 500 lines, it is unsearchable (you are using & selector), and it may be difficult to look back into it later in time, so consider implementing the SCSS 7 in 1 architecture. Even I don't implement it fully, but it helps.
Good solution but the card seems a bit oversized. You can also consider using any kind of CSS Methodology like BEM or CUBE CSS.
Figured out how to build the site and quickly wrote the JS file myself
What challenges did you encounter, and how did you overcome them?Adaptive layout. I don't know how, but it looks good.
What specific areas of your project would you like help with?Adaptive layout
You can improve the appearance of the cards at the bottom of the page for the mobile layout. The images should be at the left.
I am proud that i was able to replicate the exact design.
What specific areas of your project would you like help with?i had a problem with replicating the radio inputs, as i had not done that before. I also had a problem with selecting the "checked" state of the radio input in my javascript file. I was able to overcome this challenge with adequate research online, although it took me a while, but i didn't give up.
The two radio inputs can be selected at the same time.
You can avoid this by giving them the same name.
You are linking a different project.
A good solution. The main container is taking up the whole screen, you can minimize it.
A good solution but you might consider meeting the exact design for the hover states on the buttons.
During this project, I gained valuable experience in creating a responsive design that adapts to various screen sizes and implementing interactive features with JavaScript.
Next time I would like to use a CSS preprocessor like Sass to better organize my styles and take advantage of features like nesting and mixins, Implement a more robust JavaScript architecture from the beginning. I would consider using a module pattern or even a small framework like Vue.js to better manage the application state and updates.
What challenges did you encounter, and how did you overcome them?Aligning the activity card icons: Positioning the icons to overlap the card borders while maintaining responsiveness was tricky. I had to do some research on positioning to achieve my outcome.
What specific areas of your project would you like help with?Accessibility: I'm not confident that my solution is fully accessible. I'd appreciate feedback on how to improve keyboard navigation and screen reader compatibility. While I've tested on modern browsers, I'm unsure about compatibility with older browsers. Any tips on ensuring broader compatibility would be helpful.
It is working but you are just toggling classes. You are supposed to use fetch to get the data from the data.json file.
I decided to change things up in a few different ways for this project.
The first thing I did differently was that I did not use the images completely as they were. I noticed that the images given all had preset colors, based on the background color of its category. I didn't think this was very flexible if the user wanted a new background color or a different image, so I configured images to use a combination of CSS filters so that they instead dark the area of the background they are on. This allows them to be a tint of the background, like their original color, while allowing it to be flexible enough to use any image on any background while keeping it looking good.
The second thing I did was add more properties to the JSON data. This was mostly so that I could utilize this information for how I setup my JavaScript.
For my JavaScript, I wanted to create a system that was expandable. I also tried to keep my code concise by splitting it into 5 main files:
fetchData.js is just to get data from my .json filecategoryCard.js is a class that helps me model my categoryCard objectscategoryCardsManager.js reads the data from fetchData.js and instantiates a the categoryCards, and puts them into an object that is exportedelementMaker.js is just used to create an HTML element to append to the main document, however it is used as a property for each categoryCardmain.js is where I setup the buttons and begin appending the card elements to the main pageI think the way this is setup is nice, because each categoryCard contains the information for its own element, which is appended to the main page. This makes it easy to change the info on everything at once, as my function for updating info is based on the categoryCard class, which also has its own info from the JSON file it was made from.
This means that in my main file, I can just loop over my primary list of time cards, and call their functions to update. This was easy to do as there are only 3 buttons (daily, weekly, monthly) which just changes the hours and labels to match the information already given in the JSON file.
The design works well too. Since I am using grid, having more than 6 items actually doesn't look too bad, as they simply wrap down to the next row, leaving everything else perfectly fine. Mobile works fine too as it just makes the column longer.
I didn't knew you were supposed to make the actual card elements using Javascript. I had them already on my HTML and I only uploaded the values. Anyways I think you made a good solution.
[Edited]
I was having a look at your code and I downloaded the .zip file from the repository and when I run it on vs code live server it doesn't work and it only shows the <header>
The preview site is linked to another page
A good solution. You can consider adding the little arrow shape on the tooltip.
You should use the specified font family
The content looks pinched to the top and bottom of the screen. You could consider fixing that.
Happy to finish another project and gain more experience with tables. Next time, I'm confident I'll be able to assemble the table faster in HTML and format it faster in CSS.
What challenges did you encounter, and how did you overcome them?Getting the lines between the table rows was a challenge this time. A quick google search found others wanting to make lines between rows, so I was able to solve it quickly.
What specific areas of your project would you like help with?Best practices that I'm doing incorrectly and/or missing - Inefficiencies
Everything is looking good except the container is a bit pinched to the top of the window.
A very good solution👌
<a> instead of buttons for the social media links since you want them to take the user into another page.