Farid_Danilo

@FaridDaniloColombia140 points

Committed to learning more and improving on the technologies and tools to use in my daily life.

Latest solutions

TestimonialsGridSectionLayout
Farid_Danilo•140
Submitted 11 days ago
I would like help learning and improving Flexbox, as it's quite important these days, and it would be great to master it to create web pages that stand out with this mechanic.
1 comment
Flexible Cards Layouts
Farid_Danilo•140
Submitted 20 days ago
I would like more help and support in learning and improving with CSS Grid, as it is something new for me and something new to learn and strengthen in my daily life.
2 comments
CardProductResponsive
Farid_Danilo•140
Submitted 24 days ago
I would like help accommodating and improving further the ability to create fluid pages that adapt well to devices (especially mobile devices) without losing that sophisticated and attractive design that draws attention.
2 comments
Recipe Page Responsive
Farid_Danilo•140
Submitted 26 days ago
This time I don't have any specific area at the moment that requires guidance or help, but I know that I still need to improve and I know that I could further improve the design and the versatility and reduction of code for a more optimal page for everyone. Anything you have to tell me to change or correct, I know that it will be of great help to continue growing and advancing even more.
1 comment
Social Links Profile Design
Farid_Danilo•140
Submitted about 1 month ago
I would like guidance on how to improve my ability to properly align the divs and HTML tags on my web page, especially to position them where I want them on the page.
2 comments
Card Blog Design
Farid_Danilo•140
Submitted about 1 month ago
I would like some help or guidance to improve my CSS skills, especially with alignment properties. I've encountered some challenges when changing and modifying the position of divs so they align correctly. I'd like to learn more about how to use CSS to achieve better layout and alignment in my projects.
1 comment

View more solutions

Latest comments

P
CoderAlchemy24•190
@CoderAlchemy24
Submitted 24 days ago
Responsive testimonials grid
1
Farid_Danilo•140
@FaridDanilo
Posted 11 days ago
Hi, great work on the design. Here I'll highlight some semantic points for you to keep in mind:

HTML
1. Too much use of <div> for the main structure.
- Problem: You're using div class="container"> for the card group. For semantic reasons, it's better to use <main> or <section>.
- Recommended correction:
```
<main class="container"> or <section class="container">
```
1. Heading hierarchy.
- Problem: Each card uses <h2 class="card_name">. If this grid is the main content, it would be ideal to have a general <h1> for the page and then <h2> for the names.
- Recommended correction: Add a general title before the grid if you don't have one (example: <h1>Testimonials</h1>).
1. Accessibility: Card roles.
- Recommendation: If each card is a standalone unit (testimonial), use <article class="card ..."> instead of <div class="card ..."> to give them semantic meaning and help screen readers.
1. Empty elements.
- Line 24 <div class="quote_sign" ></div>
STYLES
1. @font-face.
- Problem: You use the family names 'Barlow Semi Condensed', but in the variables you use 'Barlow Semi Condensed Semibold' and 'Barlow Semi Condensed Medium'.
- Fix: Always use the same family name ('Barlow Semi Condensed'). Control the weight with font-weight, not the family name.
- Even better: If you use Google Fonts, you can directly import the weights and avoid local files.
1. CSS Variables.
- Issues:
- Using names like --color-White and --color-Black in PascalCase is inconsistent with CSS recommendations (use kebab-case: --color-white).
- Variables like --font-family-preset-1 are poorly defined. You are using family names that don't exist (e.g., 'Barlow Semi Condensed Semibold' is not a registered font; it should be 'Barlow Semi Condensed' with font-weight: 600).
- --font-weight-preset-1 variables contain size values, not weight values.
- Variables like --letter-spacing-preset-1: 0%; don't make sense; they should be 0 or normal.
- Fixed:
```
:root {
--color-white: #fff;
--color-black: #000;
--color-dark-blue: #19202D;
--color-gray-100: #E7EAEE;
--color-gray-200: #CFCFCF;
--color-gray-400: #676D7E;
--color-gray-500: #48556A;
--color-purple-50: #EDE4FF;
--color-purple-300: #A775F1;
--color-purple-500: #733FC8;

--font-size-p: 13px; 
--font-family-base: 'Barlow Semi Condensed', sans-serif; 

--font-weight-bold: 600; 
--font-weight-medium: 500; 

/* Spacing */ 
--spacing-500: 40px; 
--spacing-400: 32px; 
--spacing-300: 24px; 
--spacing-200: 16px; 
--spacing-100: 8px; 
--spacing-50: 4px;
}
```
1. Reset and Box Model.
- Problem:
```
* { 
margin: self; 
...
}
```
This sets margin: auto to everything (including elements like <p>, <h2>, <img>, etc.). This breaks the layout.
- Fix: Use only margin: 0; for reset, and apply margin: auto; only where needed.
1. Body.
- Problem:
```
height: calc(max-content + var(--spacing-500)*6);
```
The max-content cannot be used like this.
- Fix: Use min-height: 100vh; to ensure full height.
1. Container.
- Problem:
```
max-height: calc(max-content + var(--spacing-500)*4);
```
This is invalid.
- Fix: Remove the use of max-content in math operations.
1. Media Queries.
- Issue: Unnecessary repetitions of .card. Using position: absolute; in .container can break the flow on mobile. Values like height: calc(fit-content + ...) are invalid in CSS.
STRICT CHANGE SUMMARY
- Fix CSS variable names and usage.
- Only use margin: 0; in universal reset.
- Don't use invalid values in calc().
- Don't apply position: absolute; unnecessarily.
- Always use the same family in @font-face and control the weight.
- Avoid redundant code and inconsistent selectors.
- Check color contrast.
- Use media queries only to overwrite what is necessary.
I hope this comment is helpful and helps us all continue learning and improving :)
Marked as helpful
John Gorman•150
@Johng117
Submitted 20 days ago
What are you most proud of, and what would you do differently next time?
I think that I managed to implement the grid positioning system quite well. More planning ahead of time in terms of working out the size of typography for each view would have helped as I spent a lot of time tweaking things.
What challenges did you encounter, and how did you overcome them?
Working out how to split the grid up horizontally and vertically was challenging. It took a lot of experimentation and trial and error to work out the best way to do it.
What specific areas of your project would you like help with?
Moving from mobile view to tablet view, how things should look in tablet view.
Four-card-feature-section
1
Farid_Danilo•140
@FaridDanilo
Posted 20 days ago
Feedback sobre tu solución

A continuación, te comparto algunos puntos de mejora que pueden ayudarte a perfeccionar aún más tu código:

HTML
1. Error semántico en la estructura principal
  - Detecté que estás combinando dos etiquetas en una sola línea:
    <main section class="main-container">
  - Corrección: Solo deberías usar una etiqueta en ese lugar. Lo correcto sería:
    <main class="main-container">
2. Jerarquía de títulos
  - Actualmente tienes dos etiquetas <h1>: una para el título y otra para el subtítulo. Recuerda que solo debe haber un <h1> por página para mantener una estructura semántica adecuada.
  - Sugerencia de corrección:
    <h1 class="title-normal">Reliable, efficient delivery</h1> <h2 class="title-bolder">Powered by Technology</h2>
3. Encabezados en las tarjetas
  - En cada tarjeta usas <h2> para el título. Para mantener la jerarquía, te recomiendo emplear <h3>, ya que ya tienes <h1> y <h2> para el título principal y subtítulo.
  - Corrección:
    <h3 class="s-title">Supervisor</h3>
4. Nombres de clases CSS
  - Estás utilizando nombres como s-title, tb-info, etc. Si bien funcionan para este proyecto, pueden dificultar la reutilización y escalabilidad del código en proyectos más grandes.
  - Recomendación: Utiliza nombres de clases más genéricos y descriptivos, por ejemplo: card-title, card-info, card-image, etc.
CSS
1. Uso de font-family en el selector universal
  - Actualmente tienes:
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: "Poppins"; }
  - Es mejor aplicar la fuente en el selector body en vez del universal (*), para evitar posibles conflictos en el futuro.
  - Sugerencia:
    body { font-family: "Poppins", sans-serif; }
2. Variables CSS
  - Observé que usas variables como --Grey-500. Es recomendable emplear minúsculas y guiones para mantener la coherencia y facilitar la escalabilidad:
    --grey-500
  - La consistencia en la nomenclatura hace que el código sea más fácil de mantener y escalar.
Espero que estos comentarios te sean útiles :)
Marked as helpful
KKen007•410
@KKen007
Submitted 2 months ago
Solution HTML CSS Responsive carte
1
Farid_Danilo•140
@FaridDanilo
Posted 24 days ago
Hello KKen007,

I indicate the parts that should be improved or changed in your HTML:
1. Duplicate upload of Google Fonts:
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?...&family=Young+Serif&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?...&family=Young+Serif&display=swap" rel="stylesheet">
This is not necessary and This may affect performance, so please only maintain one version.

Styles.css:

Improvements and fixes:
1. You are repeating the "body" property twice:
body { /* 4. Add accessible line-height / line-height: 1.5; / 5. Improve text rendering */ -webkit-font-smoothing: antialiased; }

body { background-color: var(--Cream); padding: 2rem 1rem; color: var(--Grey); font-family: var(--ff-base); font-weight: var(--fw-base); height: 100vh; }

Although CSS allows multiple definitions of the same selector, it's best to unify everything into a single body declaration to avoid:
- Unnecessary duplication.
- Cognitive overhead.
- Maintenance difficulty.
Unified Version:

body { /* Typography */ font-family: var(--ff-base); font-weight: var(--fw-base); color: var(--Grey); line-height: 1.5;

/* Rendering */ -webkit-font-smoothing: antialiased;

/* Background and dimensions */ background-color: var(--Cream); height: 100vh;

/* Spacing */ padding: 2rem 1rem; }
breadpakoda•20
@breadpakoda
Submitted about 1 month ago
I have used VS code editor to make this sample webpage.
1
Farid_Danilo•140
@FaridDanilo
Posted 26 days ago
I see in your HTML structure that you have several spelling errors:

(You must correct these words):

An esy and quick dish → An easy and quick dish

perfect fir any meal → perfect for any meal

Tis classis omelette → This classic omelette

cheese → cheese

begetables → vegetables

Approximately 10 minutes → Approximately 10 minutes

Beat the eggs → Beat the eggs

teblespoon of water → tablespoon of water

fluffy texture → fluffy texture

bubbing → bubbling

Cook the omlette → Cook the omelette

sprinklel ypur chosen filling → sprinkle your chosen filling

another minute → another minute

Repeated use of the "<h1>" tag:
<h1>Simple Omelette Recipe</h1> <h1>Preparation time</h1>
Use only one "<h1>" tag per page; the second should be "<h2>".

Incorrect use of "<div id="table">" as a nutrition table:

You did it like this:
<div id="table"> Calories 277kcal <hr> Carbs 0g <hr> Protein 20g <hr> Fat 22g </div>
It should be structured like a real table, so use the "<table>" tag, which helps achieve the expected result, like this:
<table> <tbody> <tr> <td>Calories</td> <td>277 kcal</td> </tr> <tr> <td>Carbs</td> <td>0g</td> </tr> <tr> <td>Protein</td> <td>20g</td> </tr> <tr> <td>Fat</td> <td>22 g</td> </tr> </tbody> </table>
Unnecessary use of "<br>". You can remove it if you use CSS margins or "<p>" tags to separate them.

Style.css:

The font is not defined correctly:
- { font-family: 'Young Serif'; }
You must import the font, otherwise it won't be applied:

@import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');
- { font-family: 'Young Serif', serif; }
word-spacing: 200px; in #table:

#table { word-spacing: 200px; }

I've seen that this separates words too much, so it's not ideal for displaying data. I recommend, as I said before, using the "<table>" tag correctly.

Here you're calling the "flex-direction: column;" property, but it won't work if you don't have "display: flex;"

#table { flex-direction: column; }

Unnecessary repetition of h2, h3, h4 rules:

#main h1{ color: rgb(128, 62, 132); font-size: 15px; }

h2{ font-size: 15px; color: rgb(124, 62, 36); } h3{ font-size: 15px; color: rgb(124, 62, 36); } h4{ font-size: 15px; color: rgb(124, 62, 36); }

Instead of writing them separately, simplify it like this:

h2, h3, h4 { font-size: 15px; color: rgb(124, 62, 36); }

I see you're using font-family: 'Arial'; directly on several elements like "#main, #font, and #table."

You should simply define it in the body to apply the font, since you don't need to repeat it on multiple elements:

@import url('https://fonts.googleapis.com/css2 family=Young+Serif&display=swap');

body { font-family: 'Young Serif', serif; }
Marked as helpful
P
GeraASM•440
@GeraASM
Submitted about 1 month ago
What are you most proud of, and what would you do differently next time? the next time I'll try to start to remember use 100vh in the body always to start What specific areas of your project would you like help with?
About de SEO another project means this topic about the images so I must to write height and width
I use flexbox and margin-inline i didn't know to use
3
Farid_Danilo•140
@FaridDanilo
Posted 27 days ago
Improvement suggestion:
1. HTML semantics: Improve with proper tags
Replace text-only <li> tags with real buttons or links:
<ul class="social__links"> <li><a href="#" class="network social__github">GitHub</a></li> <li><a href="#" class="network social__frontend">Frontend Mentor</a></li> <li><a href="#" class="network social__linkedIn">LinkedIn</a></li> <li><a href="#" class="network social__twitter">Twitter</a></li> <li><a href="#" class="network social__instagram">Instagram</a></li> </ul>
Advantages:

Improves accessibility (for screen readers and keyboard navigation).

Improves interaction (real links can be clicked and opened).
1. Semantic Organization of Content
You could use tags like <header>, <main>, and <footer> to separate sections if the design were larger. For now, you might consider something like this:
<main class="social">  </main>
CSS Styles:

You've done an excellent overall job. The design is well-structured, and you use variables, relative units, and consistent styles.

THE GOOD Good use of :root to define reusable CSS variables.

Good BEM structure.

Clean and well-organized styles.

Correct use of object-fit, border-radius, hover, transition, etc.

Use of media queries for responsive design.

Improvement and Optimization Suggestions
1. True Vertical Centering on the Entire Screen
You currently use align-content: center; on .body, but it doesn't work because it's not a grid or flex container.

Solution: Change .body to display: grid or flex to achieve true vertical centering, like this:

.body { display: grid; place-items: center; }

This will center .social completely on the screen, vertically and horizontally.
P
stefanstraeter•30
@stefanstraeter
Submitted about 2 months ago
Blog preview card
1
Farid_Danilo•140
@FaridDanilo
Posted about 1 month ago
It seems to me that the design is a bit larger than the original solution. Could you consider reducing the size of the design to match the solution's scale? Otherwise, it's very well done and has a good design :).