Skip to content
OverviewSolutions
5
Comments
34
Saul Gabriel Aranguren
@saularanguren

All comments

  • Daniel 🛸•44,310
    @danielmrz-devSubmitted about 2 months ago
    What 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 🅰️

    2
    Saul Gabriel Aranguren•320
    @saularangurenPosted about 1 month ago

    Hi Daniel, your project is really impressive, however, there are some details missing, such as the search engine.

    1
  • Maicol Rodriguez Martinez 💻•60
    @MaicolRomaSubmitted about 2 months ago
    What 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

    blog preview card - solution

    1
    Saul Gabriel Aranguren•320
    @saularangurenPosted about 2 months ago

    Hi 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 helpful
    0
  • Dolla464•190
    @Dolla464Submitted 2 months ago
    What 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

    QRcodeFrontEndMentor

    1
    Saul Gabriel Aranguren•320
    @saularangurenPosted 2 months ago

    Hi 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 helpful
    0
  • Saul Gabriel Aranguren•320
    @saularangurenPosted 3 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, .vscode and node_modules, these folders should not be in the remote repository, node_modules are 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.

    .vscode is a folder that stores extensions that the programmer needs to download just for that project, this folder as well as node_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.

    docs is 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, the README.md is more than enough.

    I recommend you add these lines of code to all your projects, inside the .gitignore file:

    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@latest

    npm create astro@latest

    You choose which technology to create the project with: React, Vite, Vanilla JS, but don't complicate things when creating a project, happy coding 😁

    0
  • Umar Lawan Sani•10
    @XfarouqSubmitted 3 months ago
    What 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

    QR-CODE-COMPONENT

    2
    Saul Gabriel Aranguren•320
    @saularangurenPosted 3 months ago

    Greetings 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
  • Joshua Hovis•200
    @joshhovisSubmitted 3 months ago
    What 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!

    Entertainment App - React, NextJS, Authentication, APIs

    1
    Saul Gabriel Aranguren•320
    @saularangurenPosted 3 months ago

    Good job bro

    0
  • Saul Gabriel Aranguren•320
    @saularangurenPosted 3 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 helpful
    0
  • haquanq ®️•1,585
    @haquanqSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    Hello everyone 🗿

    This challenge gave me some headache from looking at the design because i saw some inconsistency in term of spacings between certain elements. Anyway, i picked a rock and ate it (not really, should i pick a frog?).

    🌱 Built with

    • Mobile-first workflow
    • Semantic HTML
    • Pure CSS
    • Vanilla JavaScript

    📝 What i have done

    • Made the solution as close to the design as possible.
    • Added custom effects on interactive elements.
    What challenges did you encounter, and how did you overcome them?

    The challenge was there, but i overcame it anyway.

    What specific areas of your project would you like help with?

    Would love to hear your opinions on any topic.

    Responsive notifications page w/ CSS Flexbox - JS

    1
    Saul Gabriel Aranguren•320
    @saularangurenPosted 4 months ago

    God job bro

    0
  • Saul Gabriel Aranguren•320
    @saularangurenPosted 4 months ago

    Buen trabajo amigo, si deseas podemos cordinar algunos rectos para desarrollar en equipo

    0
  • Koda👹•3,830
    @kodan96Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Made with:

    • HTML 🦴
    • CSS 🎨
    • JS 🤖
    • modile-first workflow 📲📲
    • animated with GSAP and its ScrollTrigger plugin 📖📖
    • used jQuery for DOM manipulation 📃📃
    • smooth scrolling provided by lenis 🧈🧈
    What specific areas of your project would you like help with?

    As always, if you notice anything... 👇👇

    Animated Coffeeroasters Multipage Website ☕☕ w/ HTML, CSS & JS

    3
    Saul Gabriel Aranguren•320
    @saularangurenPosted 6 months ago

    Good job bro 💪

    2
  • SIDA•190
    @GSida015Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    It was really easy for me,its not first time I do this.

    What challenges did you encounter, and how did you overcome them?

    It was really easy idk.

    Qr code card featuring Responsivnes and flexbox

    3
    Saul Gabriel Aranguren•320
    @saularangurenPosted 6 months ago

    Greetings, your solution is really impressive, however, I am going to help you with some tips so you can improve your web layout skills.

    Start by eliminating code blocks (grouped lines) that are unnecessary in your project:

    <!-- displays site properly based on user's device -->
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->

<!-- 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
  
<div class="attribution">
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. 
    Coded by <a href="#">Your Name Here</a>.
</div> -->

    These lines of code, including the comments, are not playing any role.

    Let's continue with improving your semantic html, replace the <div class="qr-code-container"></div> tag with the <main class="qr-code-container"></main> tag and replace the <div class="text-cont"></div> tag with <section class="text-cont"></section>, this is how your project should look:

    <main class="qr-code-container">
    <img src="images/image-qr-code.png" alt="" class="qr-img">
    <section class="text-cont">
        <h3>Improve your front-end skills by building projects</h3>
        <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
    </section>
</main>

    Finally, you must eliminate the <div class="wrapper"> tag and the last </div>, it should not be equieta, that is what body is for because this will be as its name says the main body of your page, and don't forget to change the .wrapper class in the css to body, eliminate the width: 100%; css rule, it is not necessary and modify the height: 100vh; rule to min-height : 100vh;, by saying min-height you are telling the browser: it does not matter if my website is much longer than the user's screen, it will not be limited, otherwise it will be limited and will not let you scroll if the page is longer

    body {
    min-height: 100vh;
    background-color: hsl(212, 45%, 89%);
    display: flex;
    align-items: center;
    justify-content: center;
}

    happy codign 😁

    Marked as helpful
    1
  • Saul Gabriel Aranguren•320
    @saularangurenPosted 6 months ago

    Greetings, your solution is really impressive, however, we can improve it by changing the following aspects that I will show you, let's start by eliminating the lines of code that are totally unnecessary

    Delete these lines of code inside the html file:

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<div class="container"> 
the last </div>

    your html code should look like this:

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Frontend Mentor | Blog preview card</title>
  <link rel="stylesheet" href="css/style.css">
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
  <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
</head>

<body class="container">

    <div class="card">
      <div class="card-content">
        <img src="assets/images/illustration-article.svg" alt="illustration medium" class="img">
        <p class="learn">Learning</p>
        <p class="publish-date">Published 21 Dec 2023</p>
        <p class="topic">HTML & CSS foundations</p>
        <p class="sub-content">These languages are the backbone of every website, defining structure, content, and presentation.</p>
        <div class="user-card">
          <img src="assets/images/image-avatar.webp" alt="">
          <p>Greg Hooper</p>
        </div>
      </div>
    </div>

</body>
</html>

    do not break the lines of code into several parts, just because it is not visible on the screen, it is bad practice and if you want you can delete the files: style-guide.md AND README-template.md, when you finish developing your project

    happy codign 😁

    1