Frontend Mentor | Oshu's profile

Latest comments

P
Schindler Dumagat•340
@schindlerdumagat
Submitted 5 months ago
What are you most proud of, and what would you do differently next time?
In this project, I was able to use react with typescript together with Sass. This is my very first frontend mentor project that I have built with this technologies. Thought I was able to create something with it, I still need to improve on my React skills. For that reason, I need to learn more about react, read their whole documentation and be able to implement it to my projects in the future.
What challenges did you encounter, and how did you overcome them?
I had struggle planning on the components to build. I overcomplicated things even though this is just a small project which made me finish the project longer than I expected. In the end, I ended up keeping it simple since it is just a small project.

I also struggled in integrating Sass in my react application. Initially, I made the setup incorrectly but after doing some research, I found out a better way to set it up.
What specific areas of your project would you like help with?
I 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.json and vite.config.json files. 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.
1. I wanted some help in solving the problem mentioned above.
2. I also wanted to get some feedback on how I structured my files.
3. I also wanted some feedback on the decisions that I have made on what components I need to create for my react application.
Responsive Order Summary Component using React TypeScript and Sass
#react#typescript#vite#sass/scss
1
Oshu•760
@oshudev
Posted 5 months ago
Hello there 👋. Good job on completing the challenge!

About your question, you should replace your tsconfig with this:
```
    "baseUrl": ".",
    "paths": {
        "@/*": ["./src/*"]
    },
```
then install this vite plugin, vite-tsconfig-paths.

That will solve your issue with alias import.

I hope you find it useful! 😄

Happy coding!
Marked as helpful
ronilucylucy•200
@ronilucylucy
Submitted 7 months ago
What challenges did you encounter, and how did you overcome them?
still struggle a lot with aligning/centering and etc.. its hard as fuck for me rn
What specific areas of your project would you like help with?
idk, just generall help
html+css
2
Oshu•760
@oshudev
Posted 7 months ago
Hello there 👋. Good job on completing the challenge!

About your struggle, I suggest you learn how to structure the html elements properly first. Being able to structure it well will help you style it properly. Since you're already done with the project, I suggest you take a look on my solution on how I did it. Just take it with a grain of salt because everyone has different ways of doing it.

I hope you find it useful! 😄

Happy coding!
Marked as helpful
P
Arek93•260
@ArekR93
Submitted 10 months ago
What challenges did you encounter, and how did you overcome them?
I got one problem which I dont solved, dont know why I cant change color of svg graphic with 'fill' property.
Equalizer landingpage
#accessibility#sass/scss
1
Oshu•760
@oshudev
Posted 10 months ago
Hello there 👋. Good job on completing the challenge!

About your question, you can't use fill property if the svg file is inside the img tag. What you can do is copy and paste the svg code inside your html. Alternatively you can use filter property to change the color. I found an article explaining how to do it, Swapping Fill Color on Image Tag SVGs (Using CSS Filters!).

I hope you find it useful! 😄

Happy coding!
Marked as helpful
Halexando Panama Putra•10
@halex-panama
Submitted 12 months ago
What specific areas of your project would you like help with?
Is there any way to make the heading and paragraph text looks exactly like the design?
QR Code Component
#pure-css
1
Oshu•760
@oshudev
Posted 12 months ago
Hello there 👋. Good job on completing the challenge!

About your question, there is a way to make the heading and paragraph look exactly like the design. Try add a container to h1 and p tags. It looks something like this:
```
<div class="text-container">
        <h1>Improve your frontend skills by building projects</h1>
        <p>
          Scan the QR code to visit Frontend Mentor and take your coding skills
          to the next level.
        </p>
</div>
```
Then try adding inline padding to .text-container to push the text inward. Adjust it to your liking to achieve similar results.

I hope you find it useful! 😄

Happy coding!
Marked as helpful
Matthew•40
@gmatt20
Submitted 12 months ago
What are you most proud of, and what would you do differently next time?
This is my personal record! I have successfully made this simple project in under 2 hours. I am extremely proud of myself for this accomplishment. I used barely any help and references. I was able to be in a constant flow state which had greatly enriched my coding experience.

A major thing I learned in CSS is target very specific elements by using the > key. What I would do differently next time is plan the layout and deeply analyze before actually writing code. For example, I can draw sketches.
What challenges did you encounter, and how did you overcome them?
The only challenges were jogging my memory on pseudo-classes. Other than that, it went smoothly.
What specific areas of your project would you like help with?
I need to learn better responsive web design. For example, I need to understand the pixel size differences between a computer, phone, and other technologies. I need my project designs to be consistent with every platform. I also want to delve deeper into how I can make my websites accessible. Generally, I shall improve my craft of HTML and CSS before moving onto JS.
Short and Sweet Programming
2
Oshu•760
@oshudev
Posted 12 months ago
Hello there 👋. Good job on completing the challenge!
- You should proper HTML semantic. Instead of using span for name, location, and description, you could've use h1 or p tags. You can learn more about HTML semantics here Semantics - MDN Web Docs Glossary: Definitions of Web-related terms | MDN.
- Instead of using flex to center text content, try using text-align: center.
- It seems that you forgot to add a basic CSS reset. You can learn more about it here A Modern CSS Reset.
- About responsive web design, there are plenty of strategies that you can use to achieve responsiveness, you can learn more here Responsive design - Learn web development | MDN.
I hope you find it useful! 😄

Happy coding!
Marked as helpful
P
Arek93•260
@ArekR93
Submitted 12 months ago
Social Link page
#sass/scss
1
Oshu•760
@oshudev
Posted 12 months ago
Hello there 👋. Good job on completing the challenge !
- When writing HTML, you should always use proper landmarks for Accessibility. For Example:
```
<body>
    <main>
       <div class="container"></div>
    </main>
    <footer></footer>
</body>
```
- You forgot the active state when the link is hovered or clicked.
Overall great job!🎉

Happy coding!