@iNavac03Submitted about 1 year ago
Hi! ๐ I'm Melvin, and I'm passionate about web programming. I'm currently studying to become a full-stack developer ๐, and I'm excited to share my projects with you !
Iโm currently learning...๐นNext.js ๐๐ธTypeScript ๐๐นAccessibility ๐๐ธTailwind CSS ๐จ๐นAlgorithms in C++ ๐ฅ๏ธ
Latest solutions
REST Countries API (Next.js & Server Actions + TypeScript + Tailwind)
#accessibility#next#tailwind-css#typescript#lighthouseSubmitted about 1 year agoPayAPI multi-page website (Next.js + TypeScript + Tailwind + ESLint)
#backbone#next#tailwind-css#typescript#lighthouseSubmitted about 1 year agoSocial proof section (Tailwind CSS ๐จ)
#accessibility#lighthouse#pwa#tailwind-css#semantic-uiSubmitted about 1 year agoFAQ accordion (Tailwind CSS)
#accessibility#animation#pwa#tailwind-css#lighthouseSubmitted over 1 year agoSkilled e-learning landing page (Tailwind CSS)
#accessibility#lighthouse#pwa#tailwind-css#semantic-uiSubmitted over 1 year agoFour card feature section (Tailwind CSS)
#accessibility#lighthouse#pwa#tailwind-css#semantic-uiSubmitted over 1 year ago
Latest comments
- @MelvinAguilarPosted about 1 year ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- The indentation of the code is inconsistent, making it difficult to read and understand. It's recommended to use a code formatter tool, such as Prettier, in your code editor to automatically format your code and maintain consistent indentation.
- For instance, you've placed your
<footer>tag outside the<body>tag, which is incorrect.
- For instance, you've placed your
-
The media query is fine, but you can enhance the width by directly using
max-widthwith a fixed value instead of usingwidth: 50%;. -
Consider replacing "Your Name Here" in the footer with your actual name/nickname.
-
Instead of
<div class="main">, you could use a landmark element<main>. -
It might be beneficial to separate styles into another file to organize the code more efficiently.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
3 - The indentation of the code is inconsistent, making it difficult to read and understand. It's recommended to use a code formatter tool, such as Prettier, in your code editor to automatically format your code and maintain consistent indentation.
- @cipdanilaSubmitted about 1 year agoWhat are you most proud of, and what would you do differently next time?
Since is my second project, I like it!
What challenges did you encounter, and how did you overcome them?I found it quite difficult to make the main image (illustration-article.svg) fit the project requirement on the 'mobile-design' side. For some reason, the image is displayed in the browser at a height of 181px, whereas in reality, it should be 201px! Any help is welcome!
What specific areas of your project would you like help with?As I mentioned, on the 'mobile-design' side, the main image does not fit the requirement. I must be missing something, I assume...
@MelvinAguilarPosted about 1 year agoHello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
Alt text ๐ท:
-
To make the alt attribute as useful and effective as possible, avoid using words such as "image", "photo", or "picture" as they are redundant because the image tag already conveys that information. Also, the
altattribute should not contain underscores or hyphens. Instead, try to make the description as human-readable and understandable as possible.- For a photo of a person, use their name as the alt text
If you want to learn more about the
altattribute, you can read this article. ๐.
CSS ๐จ:
- Simply use max-width: 400px in your component. This eliminates the need for using a percentage width and a media query to adjust the width.
- Avoid using
position: absoluteto center an element as it may result in overflow on some screen sizes. Instead, utilize the flexbox or grid layout for centering. Get more insights on centering in CSS here here ๐.
I hope you find it useful! ๐ Above all, the solution you submitted is great!
Happy coding!
Marked as helpful2 -
- @AlyssonDemariSubmitted about 1 year ago@MelvinAguilarPosted about 1 year ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
- Use
<ul>and<li>for the content under "Why Us": Since the content is a list of items, it's more semantically correct to use an unordered list (<ul>) and list items (<li>) instead of using paragraph (<p>).
- The link should have the same color and height as your div with the class "button." The entire element should function as the link, not just the central part.
I hope you find it useful! ๐
Happy coding!
Marked as helpful2 - Use
- @SilentOw1Submitted about 1 year ago@MelvinAguilarPosted about 1 year ago
Hello, the values of 375px and 1440px provided in the style-guide.md are simply the dimensions in which the design screenshots of the solution are presented. All challenges include images named "desktop-design.jpg" and "mobile-design.jpg," and these dimensions represent the size at which these screenshots were taken.
These values don't correspond to the width of the component or breakpoints; they serve merely as references.
In this particular challenge, since the mobile and desktop views are the same, you could potentially skip using a media query by directly applying
max-width: 300px;to the component. This simplifies your styles when dealing with a consistent design across different screen sizes.Marked as helpful4 - @drefleSubmitted about 1 year ago@MelvinAguilarPosted about 1 year ago
Hello there ๐. Good job on completing the challenge !
Hi, have you tried Render.com? It's free and allows you to deploy Express APIs.
Also, I've reviewed your GitHub, and NEVER, I repeat, NEVER upload your
.envfile to a GitHub repository โ ๏ธโ ๏ธโ ๏ธ. You should add it to your.gitignoreto prevent it from being uploaded. If you do upload it, you expose sensitive information like credentials. Even with just your MONGODB_URL, someone could delete your entire MongoDB database without needing your MongoDB account. Be cautious.You need to configure your application in the hosting to add environment variables.
Happy coding!
Marked as helpful2 - @a-fox-on-the-moonSubmitted about 1 year ago@MelvinAguilarPosted about 1 year ago
Hello there ๐. Good job on completing the challenge !
I have some suggestions about your code that might interest you.
-
You should remove the
overflow: hiddenfrom the body element. This could prevent scrolling, and you should test your solution on a mobile device in landscape orientation, where you might notice that the content doesn't fit on the screen, and the use ofoverflow: hiddenprevents scrolling.The scroll issue in your solution is caused by the default margin of the body tag. You should set its margin to 0 or use a CSS reset to clear default styles imposed by the browser.
- Define the height of the image using fixed units such as pixels/rem/em. On my laptop, the image stretches too much because of using
height: 35%.
I hope you find it useful! ๐
Happy coding!
Marked as helpful1 -
