Schindler Dumagat
@schindlerdumagatAll solutions
Interactive Frontend Quiz App using React with Sass
#react#sass/scss#vite#bemPSubmitted 8 days agoHere are the things I am concerned about:
-
It was my first time to build a Frontend Mentor project with React. How well did I utilize react for this project? What do you think about my folder structure and my components?
-
In react, the app component is rendered in the div which has a class of root but div is not a landmark role. Tags that has a landmark role are header, main, footer, etc. Is it ok to leave it this way in a react application?
<body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body>- I used the same sass folder structure the way I do it with projects where I use plain HTML, CSS and JavaScript. Is there a better way to use Sass in React applications?
As usual, any feedback is welcome!
-
Simple Password Generator App using HTML, Sass, BEM and JavaScript
PSubmitted about 1 month agoHere are some of my concerns:
-
My password generation algorithm is simple and I wanted to asked for a better algorithm.
-
My password evaluation algorithm is simple and I wanted to asked for a better algorithm. It seems like my password evaluation is not accurate enough.
Any feedback is also welcome!
-
Responsive Tip Calculator App using Sass and JavaScript
PSubmitted 2 months agoHere are some of my concerns:
-
Is my JavaScript code easy to understand? I created a lot of functions in order to separate the logic and make it more readable. Hopefully, I was able to achieve that.
-
Is my Sass files organization easy to follow? It is my first time using an architecture in organizing my Sass files. I got inspiration from the 7 - 1 architecture by Sass and change it a little bit for my project.
-
Did I use the correct HTML elements for this project? I used a radio group and radio role for the tip percentage selection. I asked AI about it and it seems appropriate for me.
-
How can I improve the accessibility of this project? I used a couple of aria attributes but I don't know if I used it correctly. Just correct me if I am wrong.
-
How is the user experience of my output? I wrote a lot of logic in my code and I want you to try out my solution.
As usual, any feedback is welcome and I will be happy to read it.
-
Responsive Time Tracking Dashboard with Data Fetching
PSubmitted 3 months agoThough I was able to finish the project, I still have doubts on my solution, here are my list of concerns:
- What is the best way to render the data from the file?
In my case, I created all the elements of the report cards for each statistics data in my HTML file and just select all the elements that I want to fill some data in my JavaScript file.
My report card HTML looks like these:
<div class="report__card report__card--orange"> <img class="report__card-logo" src="./images/icon-work.svg" alt="" /> <div class="report__card-content"> <div class="report__card-header"> <h3 class="report__card-title">Work</h3> <button class="report__card-btn"> <svg width="21" height="5" xmlns="http://www.w3.org/2000/svg"> <path d="M2.5 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Zm8 0a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5Z" fill-rule="evenodd" /> </svg> </button> </div> <div class="report__card-body"> <time class="report__current" datetime=""></time> <p class="report__previous"></p> </div> </div> </div>Here is my JavaScript for selecting the necessary elements for editing:
const reportCards = document.querySelectorAll(".report__card"); const editableElements = [...reportCards].map(reportCard => { const reportTitle = reportCard.querySelector(".report__card-title"); const reportCurrent = reportCard.querySelector(".report__current"); const reportPrevious = reportCard.querySelector(".report__previous"); return { reportTitle: reportTitle, reportCurrent: reportCurrent, reportPrevious: reportPrevious, } })-
Should I create the report card elements in my JavaScript file after fetching the data instead of directly creating placeholder elements in my HTML file and then just selecting them in my JavaScript file and editing their contents?
-
What are the accessibility issues you can see in my solution?
I am not in the accessibility learning path yet but I want to know your feedback on this.
Any feedbacks and recommendations are welcome too!
Responsive Sign-Up Form with Client Side Form Validation
#accessibility#bem#sass/scssPSubmitted 3 months agoHere are the things I want to get feedback on:
-
What are your thoughts on my form validation JavaScript logic and how I switch between the form page and the success page?
-
How can I improve my solutions accessibility? Is there any accessibility issues that I need to fix?
Feel free to give any feedback and recommendations.
Thank you.
-
Responsive Article Preview Component with Sass and JavaScript logic
#bem#sass/scss#accessibilityPSubmitted 3 months agoHere are the things that I need help with:
- This project only comes with one card image as an asset that I can import. How do I make sure that my implementation on the image matches the design using only one image? Is it possible to match the design with one one image or do I need to export the images from figma that I need for each screen sizes? Currently, I haven't spent much time trying to align the image according to the design, I just have it displayed as a cover just like this piece of code:
&__img { max-height: 12.5rem; width: 100%; object-fit: cover; border-top-right-radius: inherit; border-top-left-radius: inherit; } @media screen and (min-width: 48rem) { display: grid; grid-template-columns: 1fr 2fr; &__img { max-height: 100%; height: 100%; border-radius: 0; border-top-left-radius: inherit; border-bottom-left-radius: inherit; }-
What do you think about my html structure for the profile section below? Have I made my HTML structure and the CSS styling for the section correct? I have used a dialog for the share popup and a button to toggle the popup. I have used some absolute and relative positioning to position those elements correctly.
-
What do you think about my JavaScript code? This is my first time using vanilla JavaScript so I really wanted to get some feedback out of it.
Responsive Meet Landing Page using BEM and Sass
#accessibility#sass/scss#bemPSubmitted 4 months agoI wanted to improve the implementation of the images and the number component of the page.
Listed below are my questions:
- What is the better way to implement the number component?
In my solution, I have a specific class called
.numberand I just plugged it to an element. Here is my code.
//CSS .number { display: grid; place-items: center; position: relative; font-family: "Red Hat Display", serif; font-weight: 900; line-height: 1.5; color: #87879D; border: 1px solid #D1D1DF; border-radius: 9999px; width: 56px; height: 56px; } .number::before { content: ""; position: absolute; top: -80px; height: 80px; border-right: 1px solid #D1D1DF; } //HTML <p class="number main-content__number">01</p>- What is a better way to handle the hero images? I thought the images in the hero section are decorative, so I have used divs with background images. I could have used img tags with empty alt attribute but I find using divs easier.
Here is my sample code
// HTML <section class="hero"> <div class="hero__img-mobile"></div> <div class="hero__img-desktop--left"></div> <div class="hero__text-content">...</div> <div class="hero__img-desktop--right"></div> </section>I styled my div images using some CSS background properties and I just hide and unhide some of the images based on the screen width using CSS media queries.
-
What is a better way to implement the footer background image? I have tried to match the footer image based on what's in the design but I wasn't able to achieve that. I think it is because of the provide image assets in the initial codebase provided.
-
How is my folder structure in this challenge?
Any suggestions and recommendations are also welcome.
- What is the better way to implement the number component?
In my solution, I have a specific class called
Responsive Order Summary Component using React TypeScript and Sass
#react#typescript#vite#sass/scssPSubmitted 5 months agoI wanted to import the files using aliases like this:
import Card from "component/Card";But I had struggled configuring my react application to use that syntax especially in my
tsconfig.jsonandvite.config.jsonfiles. When I set it up, it was working but I still get a red line on my imports so it raises an error when I build it. I don't know if there is something wrong with my IDE or in my configuration or something else. In the end, I ended up using relative paths to import my files.- I wanted some help in solving the problem mentioned above.
- I also wanted to get some feedback on how I structured my files.
- I also wanted some feedback on the decisions that I have made on what components I need to create for my react application.
Responsive Testimonials Grid Section using CSS Grid and Sass Mixins.
#sass/scssPSubmitted 5 months agoI wanted to gain some feedback on this project and how I can improve the code. Here is the list of my questions:
I declared my CSS grid layout template using this code:
main { height: 90%; width: 90%; display: grid; grid-template-columns: 1fr; justify-content: center; gap: 24px; @media screen and (min-width: 64rem) { height: unset; grid-template-columns: repeat(4, fit-content(15.938rem)); grid-template-rows: repeat(2, 1fr); gap: 30px; } }-
Is there a better way of declaring the CSS Grid layout template for this project?
-
Did I use the correct HTML elements to markup my HTML? What HTML elements do you recommend instead for each project components?
-
Did I use Sass mixin feature to create reusable CSS styles correctly? I have a lot of parameters in my reusable CSS styles made with mixin, is that OK?
-
Sass Mixin and Sass Inheritance has a common goal in mind which is the reusability of CSS styles in the project. Is it better to use the inheritance feature instead of the mixin feature or my approach is good enough?
-
Responsive four card section using CSS Grid and Flexbox with Sass
#sass/scssPSubmitted 5 months agoI already finished the project, but I would like to receive feedback on how I implement CSS grid.
Did I implement CSS grid correctly? How can I make it better?
Product preview card using Sass CSS preprocessor and media queries
#sass/scssPSubmitted 5 months agoI wanted to know if my SCSS code follows the best practices. Is my nesting of CSS selectors just right or too deep? Did I use media queries and pseudo-classes correctly in SCSS? What else I can improve on the code?
I wanted to know how to use icons properly in HTML. How should I import it in my HTML because instead of importing it using the img element, I just copy pasted the SVG markup to the html just like this:
Add to CartI didn't use the img tag because I wasn't able to fix the size of the icon using it. It appeared bigger using the img tag but when I use the svg markup with the width and height already specified, it fits correctly in the button.
Responsive Blog Preview Card using HTML and CSS
PSubmitted 5 months agoWhen you go to the design comparison section of my solution, you can see that I had a little bit of some spacing issues inside of my card container. I tried to follow the design file as close as possible but I can't find a solution for that issue. May I ask what went wrong?
Simple QR Code Component using CSS Flexbox and custom color variables
PSubmitted 5 months agoIn this html code, I am just curious if I should have used the section tag instead of the article tag to apply some semantic meaning. I wanted to know if which is better to use? Should I have used the section tag or stick with the article tag or what tag do you recommend instead?
Improve your front-end skills by building projects Scan the QR code to visit Frontend Mentor and take your coding skills to the next level
