Skip to content
OverviewSolutions
3
Comments
5
P
Roberto Keppler
@rkeppler42

All comments

  • Roberto Keppler•130
    @rkeppler42Posted about 2 months ago

    Hey, Brian!

    Great job, mate!

    The only thing I can think that could improve your solution is that there is no main tag in your html. You could put your container div inside of one!

    Pretty cool use of JS!

    Cheers!

    Marked as helpful
    0
  • Roberto Keppler•130
    @rkeppler42Posted about 2 months ago

    Hey, Sebastian! Great job!!! It is a pretty close solution.

    I would only include a border in the card and a shadow too - similar to the original design.

    HTML I would use more semantic tags (main, for example). Don't rely too much on divs alone. You can use them but, what part of the site are they in? It is good practice for your future you and others who will see and work with your code. It is important too because of accessibility and SEO.

    On the CSS front I think that someone with more experience could help you with responsive design.

    Great work! Cheers!

    Marked as helpful
    0
  • Roberto Keppler•130
    @rkeppler42Posted 2 months ago

    Fala, Denner, tudo certo?

    O intuito do exercício é fazer a página ficar o mais parecido o possível com o proposto. No caso, as cores, dimensões, imagens, textos, tudo. É como se nós trabalhássemos com um designer. O designer nos fornece o que ele quer e nós passamos para o código. Para isso, nesse caso, o site fornece as dimensões com os paddings, margens, etc, que vc deve implementar e as cores, formas e imagens a serem colocados no projeto. Também fornece qual tipografia está sendo utilizada.

    Tente refazer o exercício. Você está indo bem. Veja se consegue fazer algum reforço no inglês pois é muito necessário nessa área, principalmente para ler documentação. Não precisa ser fluente nem nada do tipo, apenas para pegar o básico.

    Abraços!

    Neste caso o seu card não cumpriu os requisitos. Você já está com a forma do card quase pronta: deve ajustar apenas o height e width. Depois faça como na imagem e coloque o background color como branco. Linke a imagem utilizada no exercício. A página fornece os downloads. O background do body também é diferente do atual. No arquivo style-guide (ou algo do tipo) são fornecidos estas informações.

    No html tem um fechamento de div a mais

    Marked as helpful
    0
  • ebenkanin•70
    @ebenkaninSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    My use of media queries

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

    Getting the image to fill the entire width and height of the div. I added it using a url in the CSS file (background-image property). I was really elated when i was able to figure that bit out.

    Blog preview card built with HTML and vanilla css

    1
    Roberto Keppler•130
    @rkeppler42Posted 2 months ago

    Hi, ebenkanin!

    Nice job!

    Would only point out that the card is bigger than the original one, and the top padding too.

    The original "Learning" content has a round border and is smaller in the original one.

    You can also use semantic tags on your html, such as main, section and/or article, etc.

    Marked as helpful
    0
  • moonji-spoonji•230
    @moonji-spoonjiSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of completing this project and making it look similar to the design and using the figma file as ra eference to more details. Next time I would like to try using a framework like React or Svelte, and maybe create a root pseudo-class for making unique CSS variables.

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

    My challenge was mainly with github and deploying the websitelol

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

    I would like help with using more efficient techniques of styling, especially positioning and sizing. I would really like to learn the best practices for things such as centering "cards" and making them repsonsive when the screen size changes.

    Flexbox

    2
    Roberto Keppler•130
    @rkeppler42Posted 2 months ago

    Hey! I really liked your design! Some points that I think you can improve:

    • Use semantic tags (like main for ex.) to envelope your content.
    • Your card is a little bit smaller than the original design.
    • Your image is a little bit smaller too.
    • There is more padding in your design.

    That's it. I don't think there are major changes you need to do!

    Cheers!

    Marked as helpful
    1