Skip to content
OverviewSolutions
10
Comments
8
Isabela Fernanda
@Isabela-Fernanda

All comments

  • Shakil ahmed•260
    @Shakil-aSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud:

    • I added javascript to my mobile and desktop design
    • used the display none in css and figured out how it worked
    • played around with positioning

    next time i will:

    • look more into javascript and events and find a better way to toggle the share popup
    What challenges did you encounter, and how did you overcome them?

    challenges:

    • on the desktop version i havent figured out how to effectively toggle my profile content with the share popup and therefore i need to look into this and redo my project soon
    What specific areas of your project would you like help with?
    • suggesting other methods i could have used for my pop up

    article preview component

    1
    Isabela Fernanda•170
    @Isabela-FernandaPosted 4 months ago

    Hi, your project turned out very good. Regarding the pop-up, one tip I have is that you could have made the share arrow within a single button, it would serve both to make the pop-up appear and disappear, so you wouldn't need another share arrow inside the popup.

    1
  • Ralph•190
    @RalphPastel972Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    I am just proud of my consistency.

    What I would do differently? I would spend more time to plan the best layout and the best approach for a challenge.

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

    I am still way to slow.

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

    Nothing specific. But I am open to any critics that will make me improve.

    Responsive Testimonials grid section

    1
    Isabela Fernanda•170
    @Isabela-FernandaPosted 6 months ago

    Seu projeto ficou muito bom, parabéns! Mas uma coisa que eu percebi é que o seu site conforme o tamanho da tela vai diminuindo até chegar em 1050, o último valor antes dele mudar para mobile, a parte esquerda dos posts começa a ser cortada. Sugiro retirar min-width: 250px; que você definiu para a classe .card para resolver esse problema.

    0
  • Randomgituser69•230
    @Randomgituser69Submitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Atleast making it come close

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

    I was having no idea how can i put each item to different sides like left,right,top or bottom. I tried many ways but it didn't work. At one time i set the display of the container that includes cards to grid then gap some pixels or fr which i forgot how much and then grid template column to 1fr 1fr 1fr or something like that and that fixed the problem

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

    Idk

    Finished this ANNOYING PROJECT, FOUR Card feature section project

    1
    Isabela Fernanda•170
    @Isabela-FernandaPosted 6 months ago

    Hello, I took a look at your code and some tips I can give you are:

    1. Create a separate file just for styling (style.css, for example);
    2. In HTML, the <div class="head"> can be replaced by the <header> tag and placed outside the main, this would make your HTML more semantic and make it easier to style the <main> (you wouldn't need the < div class="grid-container">, you could simply make the div of the cards);
    3. I recommend you take a look at the grid-template-areas property, it makes it much easier to work with the grid in this type of design. I'll put below a code example on this property that would solve this design with just a few space changes between items.
    main {
        display: grid;
        grid-template-areas: "card1 card2 card4" "card1 card3 card4";
      }   
.card1 {
    grid-area: card1;
  }
.card2 {
    grid-area: card2;
  }
.card3 {
    grid-area: card3;
  }
.card4 {
    grid-area: card4;
  }
    0
  • WebDevJoe•70
    @JoeWebDevelopmentSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    Use more utility classes, and rely more on global variables. I'm proud that this one has a lot of responsiveness.

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

    I had a challenge with the picture/image changing, but googled the solution using a srcset and media to match the media queries. I was also having issues of white space as it grew, but just used a break point of the media query to prevent that and max the width along with creating a mid-width to have consistency.

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

    Please give it a look over. I know I need to add more for accessibility and screen reader users but that is not an area I have much knowledge in.

    Product Card Mix of Grid and Flex

    2
    Isabela Fernanda•170
    @Isabela-FernandaPosted 6 months ago

    Great HTML semantics. The responsiveness is also good, but if you want to increase it you can make two @media, one for tablets with @media(min-width: 768px), and another for desktop with @media(min-width: 1440px)

    Marked as helpful
    1
  • leodev•290
    @hangtime319Submitted 7 months ago
    What are you most proud of, and what would you do differently next time?

    Foi um projeto bem diferente e excelente para praticar CSS. Eu sempre começo a desenvolver a página pelo layout de desktop. Nesse projeto, é melhor começar pelo layout de tela menor.

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

    O maior desafio que encontrei e não consegui concluir foi realizar os ajustes nas listas. Não consegue alinhar igual ao desafio.

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

    Ajustar os textos em listas como está no projeto.

    Recipe page using CSS Flexbox and responsive layout.

    1
    Isabela Fernanda•170
    @Isabela-FernandaPosted 6 months ago

    Good HTML structure

    Marked as helpful
    1
  • Sadiki Benda•180
    @SadikibendaSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    feel good to finish in short amount of time.

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

    fixing the profile pic and put it in the middle, was little bit of challenge

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

    figuring out the font color, weight, and size of a given design

    Social link profile

    2
    Isabela Fernanda•170
    @Isabela-FernandaPosted 6 months ago

    You can find out the font color, weight and size in the style-guide.md file that comes with the challenge when you download it. If you don't have this file, you can use the PerfectPixel extension to try to adjust the font size and another extension like ColorZilla to discover the colors.

    Sorry for any spelling mistakes, I'm using Google Translate.

    0
  • raheem king•80
    @Raheem-kingSubmitted 6 months ago
    What are you most proud of, and what would you do differently next time?

    mixing css and flex-box

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

    none

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

    none

    responsive design using css grid and flex-box

    1
    Isabela Fernanda•170
    @Isabela-FernandaPosted 6 months ago

    Ficou bom, algumas diferenças de tamnho e espaçamento dos itens nada muito grave, mas os active-states não foram aplicados, sugiro usar '''h1:hover { color: hsl(47, 88%, 63%) }''' e '''main:hover {box-shadow: 15px 15px 0px rgba(0, 0, 0, 1); }''' no CSS para fazer as estilizações necessárias.

    0
  • Isabela Fernanda•170
    @Isabela-FernandaPosted 6 months ago

    Podem ser feitas melhorias na responsividade do site, o layout fica bem em vários tamanhos de tela e a solução não difere muito do design

    Marked as helpful
    0