All comments

Daniel 🛸• 44,230
@danielmrz-dev
Submitted 12 days 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
@saularanguren
Posted 10 days ago
Hi Daniel, your project is really impressive, however, there are some details missing, such as the search engine.
1
Maicol Rodriguez Martinez 💻• 60
@MaicolRoma
Submitted 20 days 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
@saularanguren
Posted 20 days 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• 140
@Dolla464
Submitted about 1 month 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
@saularanguren
Posted about 1 month 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
Jose Sebastian• 300
@wolf2lyon
Submitted about 2 months ago
newsletter-sign-up-with-success-message-main
1
Saul Gabriel Aranguren• 320
@saularanguren
Posted about 2 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
@Xfarouq
Submitted about 2 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
@saularanguren
Posted about 2 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
P
Joshua Hovis• 200
@joshhovis
Submitted 2 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
@saularanguren
Posted 2 months ago
Good job bro
0
EL MANSSOURI ABDELKARIM• 180
@abdelkarim-el-manssouri
Submitted 2 months ago
simple QR Code card
2
Saul Gabriel Aranguren• 320
@saularanguren
Posted 2 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:

Sass documentation

Sass course in Spanish

Sass course in English

happy coding 😁
Marked as helpful
0
haquanq ®️• 1,585
@haquanq
Submitted 3 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
@saularanguren
Posted 3 months ago
God job bro
0
Emmanuell Ansoja• 160
@Emcahell
Submitted 5 months ago
Calculadora de edad con html css y javascripit
1
Saul Gabriel Aranguren• 320
@saularanguren
Posted 3 months ago
Buen trabajo amigo, si deseas podemos cordinar algunos rectos para desarrollar en equipo
0
P
Koda👹• 3,830
@kodan96
Submitted 5 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
@saularanguren
Posted 5 months ago
Good job bro 💪
2
SIDA• 190
@GSida015
Submitted 5 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
@saularanguren
Posted 5 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:

  

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

VictorEZCodes• 40

@VictorEZCodes

Submitted 5 months ago

Responsive Blog Preview Card Using FlexBox

Saul Gabriel Aranguren• 320

@saularanguren

Posted 5 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 😁

Saul Gabriel Aranguren

All comments

REST Countries API with color theme switcher built w/ Angular 🅰️

blog preview card - solution

QRcodeFrontEndMentor

newsletter-sign-up-with-success-message-main

QR-CODE-COMPONENT

Entertainment App - React, NextJS, Authentication, APIs

simple QR Code card

Responsive notifications page w/ CSS Flexbox - JS

Calculadora de edad con html css y javascripit

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

Qr code card featuring Responsivnes and flexbox

Responsive Blog Preview Card Using FlexBox