Skip to content
OverviewSolutions
34
Comments
4

Tatyane Gonçalves

@tatyanepgoncalvesBrazil520 points

Desenvolvedora Front-End | Designer Gráfico

Latest solutions

View more solutions

Latest comments

  • Alleson Sales•460
    @allesonsalesSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Frontend Mentor - Advice generator app solution

    This is a solution to the Advice generator app challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

    Table of contents

    Overview

    The challenge

    Users should be able to:

    • View the optimal layout for the app depending on their device's screen size
    • See hover states for all interactive elements on the page
    • Generate a new piece of advice by clicking the dice icon
    Screenshot

    Links

    My process

    Built with
    • Semantic HTML5 markup
    • CSS custom properties
    • Flexbox
    • CSS Grid
    • Mobile-first workflow
    • Javascript
    • API & Cache
    What I learned

    This project made my interaction with api's easier, it also gave me the challenge of working with fetch using the cache to make the project more fluid for the user, within script.js we have the version I made without help, but every time I clicked on the button it makes a new request, then the code was updated to leave the request in cache. 😊

    Author

    Advice-generator

    1
    Tatyane Gonçalves•520
    @tatyanepgoncalvesPosted 2 months ago

    Hello Alleson, how are you? First of all, I would like to congratulate you on the challenge you accomplished. It was great.

    To improve the project so that it doesn't have a scroll bar in the version for larger screens, I suggest the following changes:

    In index.html: Place the attribution class inside the main tag. Like this:

    <main>
<div class="container">
<div class="advice-top">
<div class="advice-id">
<span>Advice #117</span>
</div>
<div class="advice-text">
"It is easy to sit up and take notice,
What's difficult is getting up and taking action." </div>
 </div>
 <div class="advice-wrapper">
 </div>
 <div class="advice-button" id="button">
 <img src="https://raw.githubusercontent.com/allesonsales/advice-generator/43f05256c9d462ea3df637f52527282fdea09948/images/icon-dice.svg" alt="Generate new Advice">
 </div>
 </div>

 <div class="attribution">
 Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
 Coded by <a href="https://www.frontendmentor.io/profile/allesonsales">Alleson Sales</a>.
 </div>
</main>

    In style.css: 1- Add rotate to the icon of the advice-button class.

    
.advice-button:hover img {
 transform: rotate(45deg);
}

    2 - Add to the attribution class.

    .attribution {
 position: fixed;
 bottom: 1rem;
 font-size: 11px;
 text-align: center;
 margin: 1rem;
 color: var(--Neon-Green);
}
    Marked as helpful
    0
  • Tatyane Gonçalves•520
    @tatyanepgoncalvesPosted 4 months ago

    Hi Timothé, how are you? Congratulations on the completed project! It turned out really well.

    For some reason, the text in the header and main__questions__tile classes is not visible on the site.

    It turned out great! Congratulations!

    0
  • SIRSAMUEL014•100
    @SIRSAMUEL014Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    Ability to develop a responsive web page.

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

    I encountered challenge in making the page responsive.

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

    Javascript.

    HTML CSS & FLEXBOX

    2
    Tatyane Gonçalves•520
    @tatyanepgoncalvesPosted about 1 year ago

    Hello,

    For the layout to be responsive you should use media queries and to make it better instead of flex-direction: row; you should have put flex-direction: column;.

    In this link you can find a little about it.

    0
  • JAYMALA•30
    @JAYMALA-963Submitted about 1 year ago
    What are you most proud of, and what would you do differently next time?

    This was my first CSS challenge done independently.

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

    I faced some difficulties due to my lack of experience in writing CSS. Despite this challenge, I put forth my best effort to match the output with the expected design.

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

    How can I improve my CSS code? I completed this challenge using vanilla CSS instead of utilizing a framework like Tailwind or Bootstrap because I find it challenging to grasp CSS.

    QR code component with vanilla CSS

    2
    Tatyane Gonçalves•520
    @tatyanepgoncalvesPosted about 1 year ago

    Parabéns pelo seu trabalho!

    0