@Mo1382Submitted 10 days ago
Saul Gabriel Aranguren
@saularangurenAll comments
- @saularangurenPosted 10 days ago
Hi friend, I was looking at your solution, it's really impressive, however, I come with a tip that will help you practice a little more and it will be great for users who see your project, try to make a smooth transition between the change from dark-mode to light-mode, try to make that improvement, so that the change is not so "abrupt"
happy coding ๐
1 - @SmasheroonieSubmitted about 1 month agoWhat are you most proud of, and what would you do differently next time?
This was a great opportunity to recap the basics of HTML and CSS. I had a lovely time using the vanilla layouts and rules, and I'm proud of the result! It's so interesting figuring out all the ways elements can be aligned and positioned. I'm particularly interested in learning as much as I can about Flexbox.
What challenges did you encounter, and how did you overcome them?Starting a new project can be intimidating, but I impressed myself with how well it came together.
What specific areas of your project would you like help with?CSS is something that I would like to become a lot more comfortable with.
@saularangurenPosted about 1 month agoHello @Smasheroonie, your solution is really impressive. However, I am going to help you make it even more perfect. Firstly, you should remove that line of HTML that prints the information at the bottom. This is to make your solution as close as possible to the design.
delete:
<footer> <div id="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" >Frontend Mentor</a >. Coded by <a href="https://github.com/Smasheroonie">Luke Goncalves</a>. </div> </footer>Lastly, I recommend adding a box-shadow effect to the component. If you can see in the design, there is a shadow that creates the card. Try to replicate this in your code.
Happy coding ๐, and I look forward to your next project! ๐
2 - @khaduj03Submitted about 1 month agoWhat specific areas of your project would you like help with?
Any feedback would be appreciated.
@saularangurenPosted about 1 month agoHello, my friend. Your solution is very impressive. I would like to ask: how did you create the animations? And my next question is based on personal criteria. I understand that in comparing your solution with the design provided by the platform to visualize whether the solution is as close to the design as possible, it seems that only the header is present. Of course, I understand that this happens because of the animations, but don't you strive to make your solutions as identical to the design as possible? I emphasize again that this last question is based on personal criteria, as I believe in developing solutions that are as similar to the design as possible.
Marked as helpful0 - P@danielmrz-devSubmitted about 2 months agoWhat are you most proud of, and what would you do differently next time?
๐ธ Hello FEM Community! I'm Daniel and this is my solution for this challenge! ๐
๐ ๏ธ Built with:
- Angular ๐ ฐ๏ธ
- SASS ๐จ
- Typescript ๐ค
- BEM Notation ๐ ฑ๏ธ
- Template Driven Forms approach ๐งพ
- Validations using Angular Directives โ
- Mobile first workflow approach ๐ฒ
It took me a few days to finish this one. I wasn't sure if my current knowledge about Angular would be enough to finish this project, but I tried anyway and I'm very glad I did. As always, I ended up learning a lot during the process and I'm much more comfortable using Angular.
Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. ๐
What specific areas of your project would you like help with?If you have any suggestions on how I can improve this project, feel free to leave me a comment!
Feedback welcome ๐
@saularangurenPosted about 2 months agoHi Dani, bro I advise you to use the
outline: noneproperty, so that the black frame is not seen in the inputs, excellent solution and happy coding ๐0 - P@jdillard2532Submitted about 2 months ago@saularangurenPosted about 2 months ago
Greetings friend, excellent solution, you just need to update the screenshot of your challenge within the platform, because it looks aligned at the top and not in the center as it is in your code, be careful, you just have to press, generate a new screenshot here in frontendmentor, happy coding ๐
Marked as helpful0 - P@danielmrz-devSubmitted 3 months agoWhat are you most proud of, and what would you do differently next time?
๐ธ Hello FEM Community! I'm Daniel and this is my solution for this challenge! ๐
๐ ๏ธ Built with:
- Angular ๐ ฐ๏ธ
- SASS ๐จ
- TypeScript ๐
- BEM Notation ๐ ฑ๏ธ
- Third Party API ๐ด
- Mobile first workflow approach ๐ฒ
That's my first advanced level project. I'm happy that I could finish, even though I wasn't able to get the filter to work 100% as it should. It's working, but it has some bugs I can't seem to fix right now. Despite that, it's working very well and I could practice a lot of Angular concepts while doing it.
Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. ๐
If you have any suggestions on how I can improve this project, feel free to leave me a comment!
Feedback welcome ๐
REST Countries API with color theme switcher built w/ Angular ๐ ฐ๏ธ
#angular#angular-material#sass/scss#typescript#rxjs@saularangurenPosted 3 months agoHi Daniel, your project is really impressive, however, there are some details missing, such as the search engine.
1 - @MaicolRomaSubmitted 4 months agoWhat challenges did you encounter, and how did you overcome them?
I had problems adjusting the padding and margins of the containers,
What specific areas of your project would you like help with?responsive desing
@saularangurenPosted 4 months agoHi friend, your solution is really impressive, however I want to help you with the following tips, when you write your css styles, you should not create so many media queries for each measurement, start giving styles for the phone version, from 1024px you apply the styles for desktop, if you see it necessary to create other configurations for 1280 and 1440, you can create it, but it is not necessary to repeat code within the media queries, only the measurements and properties that are going to change should be there, and when you want to center an element in its entirety do not add this line:
margin: 1rem auto;You are making the container lose its center. Finally, I advise you to search for CSS courses on YouTube and do a small CSS project to see and learn how to create a project. If you want, I can teach you how to do it. Just write. Happy coding.
Marked as helpful0 - @Dolla464Submitted 4 months agoWhat are you most proud of, and what would you do differently next time?
.links button:hover { background-color: hsl(75 , 94%, 57%); color: hsl(0, 0%, 8%); cursor: pointer; }
What challenges did you encounter, and how did you overcome them?.links button { text-decoration: none; border: none; background-color: hsl(0, 0%, 20%); height: 40px; width: 250px; color: hsl(0, 0%, 100%); border-radius: 5px;
What specific areas of your project would you like help with?css
@saularangurenPosted 4 months agoHi friend, your solution is really amazing, but there is a problem when loading your stylesheet, you must change this line of code:
<link rel="stylesheet" href="css/style.css">for this other one here: the explanation of why is because your index.html is looking for a style sheet that should be inside a folder called css, but that folder does not exist, therefore you must change that line for this one:
<link rel="stylesheet" href="style.css">When you do it, you will notice changes on your website, only there is one detail, you deleted the image of the QR, you must return it to the project folder, I hope this recommendation is helpful
Marked as helpful0 - @wolf2lyonSubmitted 4 months ago@saularangurenPosted 4 months ago
Greetings friend, your solution is really amazing, however, we can improve it.
Let's start by removing from the online repository, which is on GitHub, the folders:
docs,.vscodeandnode_modules, these folders should not be in the remote repository,node_modulesare dependencies that each programmer downloads if necessary to view, develop, edit the project, they are not necessary and it is even bad practice to have them in the GitHub repository..vscodeis a folder that stores extensions that the programmer needs to download just for that project, this folder as well asnode_modules, should only be in the local repository (the repository that you have on your machine and which you are editing), these two folders you will have in your local repository if they are really necessary.docsis the folder to store the project documentation, it is usually seen in large projects, I don't see it necessary to have it, however, if you want to have it, it should have the project images, functionalities, uses and so on, but if you are doing a small project, theREADME.mdis more than enough.I recommend you add these lines of code to all your projects, inside the
.gitignorefile:node_modules/ .vscode/Last but not least, the server.js file, I understand what you want to do, but for this I recommend you create a project with vite.js, astro or another technology, an example would be:
npm create vite@latestnpm create astro@latestYou choose which technology to create the project with: React, Vite, Vanilla JS, but don't complicate things when creating a project, happy coding ๐
0 - @XfarouqSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
how i did it swiftly and very fast
What challenges did you encounter, and how did you overcome them?I didn't encounter any problem to be honest
@saularangurenPosted 5 months agoGreetings friend, your solution is really impressive, however, I want to help you: you must add
min-height: 100vh;to your stylesheet, specifically inside body {}, the result should look like this:body{ background-color: var(--light-blue-color); margin: 0; font-family: "Outfit", sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; }If you apply it you will be able to see that you managed to center the card, happy coding ๐
0 - P@joshhovisSubmitted 5 months agoWhat are you most proud of, and what would you do differently next time?
Disclaimer: There is some unfinished content still within this project. If you come across something that looks clearly unfinished, such as an empty page, then I likely already know about it. If you come across bugs or errors, however, please feel free to let me know in the comments as I am sure some things were missed.
I am proud of being able to implement as much as I was able to do. I spent more time on this project than I wanted to, but I learned a lot which is what it's all about. This was the first project where I did all the backend code myself (authentication, api data fetching, etc). Figuring out the authentication and implementing additional custom auth logic or custom fetch logic felt good.
Things I would do differently next time would definitely be to follow a more TDD approach. I went back and forth a lot with bugs because there were things that would work in local, but not work in prod. There were things that worked fine, but then upon adding new code to implement a new feature, those things that worked previously, would be broken now and I wouldn't notice until I looked around on prod. There was just a lot of things during the process that I think could've been avoided had I followed the TDD approach.
What challenges did you encounter, and how did you overcome them?Sorting and filtering the fetch data proved difficult in certain parts. The part of this that I probably struggled with the most, was appending results to the pages when clicking the view more button. I had an issue where when clicking the view more button, it would replace the results on the page instead of appending to it. This took some trial and error to make work properly.
Implementing OAuth was a bit difficult as well due to never having done it before. I spent lots of time on stack overflow and talking to other people to figure out what I was doing wrong. Most of the time, the problems I had were just due to dashboard configurations in my google cloud profile and clerk authentication dashboard, not necessarily anything code related.
What specific areas of your project would you like help with?I feel like I wrote a lot of code with this project, I'm sure a lot more than necessary. I have plans to go back and heavily refactor my code as best as I can to adhere to better standards. There is a lot in here that is repeated, so centralizing certain pages/components/styling to cut down on project size is in the plans.
There isn't anything that I really need help with, but if you have any suggestions or ideas then feel free to leave a comment!
- @abdelkarim-el-manssouriSubmitted 5 months ago@saularangurenPosted 5 months ago
Hi friend ๐ , your solution is really great, however, I want to help you improve it with the following tips.
- Start by removing this block of code from your project: The reason is because this code is not necessary.
<div class="attribution"> Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank" >Frontend Mentor</a >. Coded by <a href="https://github.com/abdelkarim-el-manssouri" >Abdelkarim El Manssouri</a > </div>- I advise you not to write your nested CSS rules: They may not be applied in the browser the user is using at the time or there may simply be an error.
.main-section { display: grid; place-content: center; height: 100%; text-align: center; .container { background: var(--clr-accent-100); padding: 1.3rem; border-radius: 1rem; .main-image { border-radius: 1rem; } .main-para { color: var(--clr-primary-500); font-size: var(--fs-650); line-height: 1.3; margin-bottom: 2rem; }- Finally, I encourage you to learn Sass, on YouTube you can find a lot of material that can help you with that and never delete the README.md from your repository, better edit it to your liking and correctly describe your project.
Links:
happy coding ๐
Marked as helpful0
