Skip to content
OverviewSolutions
21
Comments
8
P
awwsalah
@awwsalah

All comments

  • awwsalah•290
    @awwsalahPosted 9 months ago

    Hello there

    Thank you for the valuable advice, I truly appreciate it. I'm always eager to improve and learn new things. Your guidance has enlightened me about the Settings Sync feature, which I wasn't aware of before. Rest assured, next time you come across any of my code, you'll see that I've implemented your suggestions.

    If you happen to notice anything else or have some spare time to review any of my other projects, I would be absolutely thrilled. Your insights and feedback are incredibly valuable to me. Thank you once again for your help!

    0
  • awwsalah•290
    @awwsalahPosted 9 months ago

    this was my forth time i made this project but it was worth it

    0
  • awwsalah•290
    @awwsalahPosted 9 months ago

    Hello kacabibrahim

    first try to name you html file index.html and your main css to style.css . in your html code first before you write your html open the image design and plan what kind of tag it needs,

    Practice to use, Semantic HTML elements

    like

    <nav>, <aside>, <main>, <header>, and <footer>

    are important for accessibility. They give screen readers contextual information about the different parts of a page. It gives assistive technology a better understanding of the different parts of a page

    so in this challenge use <main> and add class="container" or "card" this explaination i will use container

    <main class="container">
  <article class="card">
    <div class="card-title">
      <img src="images/avatar-jessica.jpeg" alt="" />
      <div>


        <h4>Jessica Randall</h4>
        <h5>London, United Kingdom</h5>


      </div>


      <p>"Front-end developer and avid reader."</p>


    </div>


    <div class="card-btns">


      <button>GitHub</button>
      <button>Frontend Mentor</button>
      <button>LinkedIn</button>
      <button>Twitter</button>
      <button>Instagram</button>


    </div>


  </article>
</main>

    in the css code we can use this

    :root{

    --background-color: hsl(0, 0%, 8%);
--forground-color: hsl(0, 0%, 12%);
--btn-color: hsl(0, 0%, 20%);
--secondary-color: hsl(75, 94%, 57%);
--text-color:hsl(0, 0%, 100%);

    }

    body{

    background-color: var(--background-color);
color: var(--text-color);
font-family: "Inter", sans-serif;
width: 100%;
height: 100dvh;
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;

    }

    .container{

    width: 300px;
height: 450px;
text-align: center;
margin-bottom: 60px;

    }

    .card{

    display: flex;
flex-direction: column;
gap: 1rem;
padding: 20px;
background-color: var(--forground-color);
border-radius: 15px;

    }

    .card-title{

    display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
font-weight: 700;

    }

    .card-btns{

    display: flex;
flex-direction: column;
gap: 1rem;

    }

    button{

    height: 40px;
width: auto;
background-color: var(--btn-color);
border: none;
border-radius: 6px;
color: var(--text-color);
font-weight: 600;
transition: 1s; /* this slow the hover animations into 1 second */

    }

    button:hover{ /* :hover it can change the behaviour of the button when u hover over it */

    background-color: var(--secondary-color);
color: var(--btn-color);
cursor: pointer; /* this change when you hover on the button, this code change the cursor*/

    }

    sorry i cant explain every detail but if u have any question in certain area of the code let me know.

    Marked as helpful
    1
  • Yrwin Avellona•70
    @CoderExplore365Submitted 9 months ago
    What are you most proud of, and what would you do differently next time?

    I am mostly proud of completing this project because I know that it is a step in the right direction. Which means I am learning to progress more once I understand how to do these type of projects one step at a time.

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

    I rarely encountered any of these challenges because I am basically learning how to fix things by myself.

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

    The specific areas I wanted to work on is the container positioning because I wanted to know how to put the container in the center to make it clean as possible.

    QRCodeProject

    1
    awwsalah•290
    @awwsalahPosted 9 months ago

    Hello there you did great but you can improve your css code try to remove the center class no need,

    and add your css body{

    width: 100%;  /* this will define your body with */
height: 100dvh; /* this for the device height so it will help to center your card  */
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;

    and no need for this class = .image-class for detail you can check my code or other people code it will help you improve. if u need help let me know

    0
  • awwsalah•290
    @awwsalahPosted 9 months ago

    sorry please, try to refresh your Page i fixed the text

    0
  • awwsalah•290
    @awwsalahPosted 9 months ago

    hello Matthieu

    try to flex in your html <main> tag create two div classes one for the buttons and another for the image and the title.

    after that in the css call the main class and add this code

    {

    display: flex;
flex-direction: column;
gap: 1rem;

    }

    and change the <a> tag to <button> and add the fix buttons into a div class u can call what ever u prefer, after u create the buttons use this code in the css

    button{

    height: 40px;
width: auto;
background-color: var(--btn-color); /* u can add the color here */
border: none;
border-radius: 6px;
color: var(--text-color);
font-weight: 600;
transition: 1s; /* this is for the hover animation it make it slower */

    }

    button:hover{

    background-color: var(--secondary-color);  /* the green color here */
color: var(--btn-color); /* u can add the white color here  */
cursor: pointer;

    }

    let me know if u need further help, two weeks ago i didn't know much about CSS so practicing is the key

    0
  • awwsalah•290
    @awwsalahPosted 9 months ago

    to remind you, the github link is not working, maybe i forget to add the link so check it.

    0
  • Mohd Azam•10
    @Mo1ZamSubmitted 9 months ago

    I didnt find it difficult cause i have know most of Html, Css cause it is basic foundational of web dev.

    Recipe page challenge

    2
    awwsalah•290
    @awwsalahPosted 9 months ago

    just reading your code i learn lot from it, even the media query css code u made a separate page, that is clever way to put it. and while you were using html <span> i was using <strong> bullet list coloring part this is the code that i used "li::before { content: counter(li); color: red; display: inline-block; width: 1em; margin-left: -1em }" . i don't know how it worked but it did. that is the magic of coding so thanks for sharing your process

    Marked as helpful
    0