Skip to content
OverviewSolutions
16
Comments
5

Osiel Hernández

@xXOsielXx190 points

I'm a junior programmer who is learning web development. I'm still in the early stages of my career, but I'm eager to continue learning new languages ​​and technologies.

Latest solutions

View more solutions

Latest comments

  • haquanq•1,575
    @haquanq
    What are you most proud of, and what would you do differently next time?

    Make elements interactable with tabIndex attribute, users can navigate the chart with tab, arrow keys.

    What i used

    • Mobile-first workflow
    • HTML, CSS, JavaScript (no libs)
    • 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.
    • 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 across all components.

    Bar chart that can be navigated using keyboard (arrows)

    #accessibility#bem
    1
    Osiel Hernández•190
    @xXOsielXx

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

  • Osiel Hernández•190
    @xXOsielXx

    @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
  • Vasavi Dwivedi•80
    @vvvasavii
    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
    @xXOsielXx

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

  • YersonRodriguez2005•20
    @YersonRodriguez2005
    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
    @xXOsielXx

    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!

  • Pedro Silva•140
    @pmcsilva90
    What are you most proud of, and what would you do differently next time?

    Using a tool I haven't used before, SASS

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

    .

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

    Just some feedback would be nice :)

    Product preview card component using SASS

    2
    Osiel Hernández•190
    @xXOsielXx

    Well done!

    Your page is very similar to the design. It's almost the same!

    And you're using SASS for this project, that's cool.

    Keep it up and... Happy coding!