Frontend Mentor | Osiel Hernández's profile

@haquanqSubmitted 4 months ago

What are you most proud of, and what would you do differently next time?

Hello 👋👋👋

Thanks to fronendmentor team, this challenge gave me an opportunity to learn more about accessibility when building custom component and it is fun! 😁😁😁

🚀 Built with

Semantic HTML
Pure CSS
Vanilla JavaScript
ARIA APG Guides

🐲 What i have done

Built an accessible bar chart component with keyboard support using ARIA APG patterns, tested on desktop with NDVA, there will be an instruction for the first time navigating the bar chart.
Used my own judgement to get 98% similar to the design without figma files.
Overridden default focus outline visual (you can focus on each bar in the chart).

🐦 Things to improve next time

Figure out a system to handle CSS font custom variables accross all components.

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

None 🐱

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

Any feedback is appreciated 🙏

Accessible bar chart, mobile-first, pixel-perfect w/ HTML & CSS & JS

1

Osiel Hernández•190

@xXOsielXxPosted 4 months ago

@haquanq Hi buddy. How's it going?

I was looking your projects and all of them are pixel perfect. That's awesome! Do you use any tool for doing that?

One thing... Your solution titles... I think the idea is write something descriptive like this: "Responsive landing page using CSS Grid". That communicates the type of page you made and tells us something about the technologies you used. Correct me if I'm wrong. Anyway, keep that detail in mind.

Take care and... Happy coding!

0

zbuli-t•190

@zbuli-tSubmitted 5 months ago

What are you most proud of, and what would you do differently next time?

I managed to use nth-child properties. I managed to use hover.

Social-links-profile using div as blocks

2

Osiel Hernández•190

@xXOsielXxPosted 4 months ago

@zbuli-t Hi there. Congrats for solving the challenge!

I want to give you some suggestions related to the profile container to improve your code...

I guess you want to center your container. For that reason you setted .outer_layer {margin: 30%}. But that is so much margin and, in this case it's not the idea.

Instead of that use a fixed width like:

.outer_layer {
        width: 100% /* for mobile devices */
	max-width: 300px; /* for larger screens */
}

and then...

.outer_layer {
	margin: 0 auto;
}

Also, add a padding to .outer_layer instead of the image:

.outer_layer {
	padding: 32px;
}

You can add a padding to the body too:

body {
	padding: 64px 32px;
}

I hope this helps you. Happy coding!

Marked as helpful

1

Vasavi Dwivedi•80

@vvvasaviiSubmitted 5 months ago

What are you most proud of, and what would you do differently next time?

I'm proud of how easily i was able to use flexbox this time since last time it was a bit tough for me. Next time,i would try to not procrastinate and complete my challenges early.

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

Was stuck for a solid 5 min trying to lift the greg hooper text up a bit because the avatar was also changing position along with it. Overcame it by giving it a thought and applying the flexbox property indivuially to the element.

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

Pls review my code if you happen to have some spare time and point out any mistakes or useless pieces of code. I really look forward to feedbacks,negative or positive :)

Blog Preview Card using html and css

3

Osiel Hernández•190

@xXOsielXxPosted 5 months ago

@vvvasavii Hi, congratulations for passing the challenge!

Your web page is very similar to the design and, you setted the active states, nice! However, I like to give you some suggestions...

Card: You setted a padding of 21px to the left of the .preview-card, but... Why not set a padding: 21px for all sides of the container? Just, look at the design.
Image: You are embedding the image using a svg tag, this isn't incorrect but, I think the idea is linking the image with a <img> tag like this: <img class="illustration" src="assets/images/illustration-article.svg" alt="Illustration">, then you can add styles to it like this:

.illustration {
    width: 100%;
    border-radius: 8px;
}

Naming conventions: Your classes with long names had names like "Learningtext", but that is less readable that using other conventions like this:
- camelCase: "learningText" (I use this one for JS code)
- snake_case: "learning_text"
- kebab-case: "learning-text" (I use this one for HTML and CSS code)

That's all. Hope this can help you.

Have a nice day and... Happy coding!

0

YersonRodriguez2005•20

@YersonRodriguez2005Submitted 5 months ago

What are you most proud of, and what would you do differently next time?

estoy orgulloso de poder lograr aprender de nuevos elementos de css para los contenedores y su lenguaje en cascada. proximamente haré que la pagina sea responsiva en lo maximo posible.

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

mi problema fue que al momento de centrar la imagen dentro del contenedor no lo lograba ya que faltaba un elemento que no reconocia hasta ahora.

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

mas elementos de css, los elementos y difernetes opciones de estilos del css.

Blog-Preview

1

Osiel Hernández•190

@xXOsielXxPosted 5 months ago

Hola. Felicidades por haberle dado solucion a este challenge!

Tu diseño se parece bastante al original; aun asi, quiero darte algunas sugerencias para que mejores tu codigo.

Imagen: No necesitas envolverla en un contenedor y centrarla, solo establece esta regla para ella: img {width: 100%}, de esa manera tomara todo el ancho del contenedor padre, en este caso, si modificas el codigo seria .card
Attribution: La atribucion te recomiendo que la saques de la .card. Esto ya es decision tuya, pero en mi opinion se ve mejor afuera, y mas dandole unos estilos personalizados. Por ejemplo, yo lo hago asi:

.attribution {
	margin-top: auto;
	background-color: inherit;
	text-align: center;
	padding: 8px;
	border-radius: 16px;
	z-index: -1;
}

.attribution a {
	text-decoration: none;
}

@media only screen and (min-width: 600px) {
	.attribution {
		position: absolute;
		bottom: 0;
	}
}

Y estos estilos son fundamentalmente los mismo para todas mis paginas

Active states: Te falto agregarle los active states a algunos elementos. A mi cuando los hice tambien me faltaron jeje, pero una persona se dio cuenta, me lo dijo y lo corregi. En la carpeta que se encuentra en el archivo que debiste descargar, hay otra carpeta que dice "design" y dentro de esta estan los diseños en los que te debes basar. Una de esas imagenes te muestra los active states que debe tener tu pagina, se llama "active-states.jpg".

Pues eso es lo mas importante, espero que te sirvan mis sugerencias.

Que tengas un buen dia y... Happy coding!

0