Skip to content
OverviewSolutions
4
Comments
5
Giacomo Scampini
@scamgi

All comments

  • Solo Incrementing•40
    @Solo-IncrementingSubmitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    The design is perfectly replicated and is responsive. Next time I would use the BEM class naming convention for maintainability.

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

    I didn't know how to add the line between table row elements so I researched that and found a solution online.

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

    How do I improve my workflow? At the moment I feel I am spending too long writing styles for a relatively simple webpage.

    Responsive omelette recipe page

    1
    Giacomo Scampini•120
    @scamgiPosted 8 months ago

    I didn't know the BEM convention thanks.

    I think that to speed up your workflow you could use sass. To use it follow these steps:

    1. Install sass globally
    npm i -g sass
    1. Then you run this commend:
    sass --watch style.scss style.css

    So the terminal will compile sass every time you make a change. It's very useful especially if you declare the variables for the colors.

    Another way to write code faster is to learn snippets with VSCODE like this: p0 => padding: 0; m3 => margin:3px; jcc => justify-content: center;

    Marked as helpful
    0
  • lij110397•230
    @lij110397Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    1. More familiar with building html and css files in the following process:

    • Setup Github remote and local repository
    echo "# git-test" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com//git-test.git
git push -u origin main
    • Check design files and list all elements included
    • Completed html files which includes all listed elements
    • Completed style file in order of root color, font import, global color and font, size and layout
    • Make css more responsive by using "rem/em" unit, flex/grid layout
    • Check the website in browser starting from mobile size; adjust according to the screen scale
    • Check whether it meets WCAG standards
    • Upload to Github and Github Page
    • Edit README.md file
    • Upload README.md file and submit

    2. How to place the element in the middle of its parent container

      body{
	    width: 100vw;
	    display: flex;
	    justify-content: center;
	    align-items: center;
    }

    ==if this is not working, add following code==

        main {
	    /* Place main in the middle of body*/
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
    }
    What challenges did you encounter, and how did you overcome them?

    About margin management?

    In the previous task, I found margin management confusing. In this task, I only used margin-bottom attribute instead of setting all different paddings and margins.

    • What is good about this way? If I need to change the margin between two elements, I don't need to change both of the margin. I just need to change one margin-bottom to adjust the marin. The css file will be more neat and controllable.
    • About margin collapse Margin collapse should be avoided usually as it may cause unexpected collapse and unexpected layout. According to most of lessons, it occurs between block elements in the same level or between the last element and its parent element. However, in reality, I just never see margin collapse happens?
    What specific areas of your project would you like help with?

    1. Is there better way to management all margins and paddings of layouts?

    2. How to handle margin collapse?

    social- link-profile-component

    2
    Giacomo Scampini•120
    @scamgiPosted 8 months ago

    Hey @ lij110397

    I wanted to say to you that it's right the way you center the div. There's also the display: flexbox method if you wanna try.

    I don't know if the margin collapse is actually a bad thing.

    I wanted to add that I think you added too much code for managing the font. You can do this:

    • go to
    • copy and paste this code:
    .html {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "slnt" 0;
}
    • then when you wanna select a different weight, you write:
    .class {
  font-weight: 700;
}

    And it's done.

    Marked as helpful
    0
  • Aish•60
    @wajasha02Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    Finally completed my second challenge.

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

    nothing at this time

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

    If there is something I should work on, please feel free to tell me, I would really appreciate your feedback.

    Blog preview card using HTML and CSS

    2
    Giacomo Scampini•120
    @scamgiPosted 8 months ago

    Nice code bro! I would just add an <a> tag that contains the h2. The rest is clean code

    Marked as helpful
    1
  • forhisglory85•20
    @forhisglory85Submitted 8 months ago
    What are you most proud of, and what would you do differently next time?

    I was able to take a lot of what I learned from building the QR Code project and apply to this project, so my code was cleaner. I also incorporated section elements this time which seemed appropriate.

    I find myself changing main element tags like p or adding a div far into the process which I feel like I should know whats needed where at the beginning of the project. I should be able to properly structure my html and the start.

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

    I didnt understand if the "active" state included both the H1 and P elements to be highlighted at the same time when hovered over with the cursor. I tried to do that, but I couldn't figure it out. I ended up having their active states happen separately with a different class selector for both elements.

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

    Can the active state for H1 and P happen at the same time but with different styling? (The H1 changes to yellow when hovered, while the main P changes to gray).

    Blog Preview Card using HTML/CSS box shadowing

    1
    Giacomo Scampini•120
    @scamgiPosted 8 months ago

    I think the active state was referred to H1 only.

    Yes, you can change the color the color of H1 and P when you get over them with your cursor. A possible solution could be this one:

    You create a <div class="h1-and-p-container"> and you put H1 and P inside it.

    <div class="h1-and-p-container">
  <h1>...</h1>
  <p>...</p>
</div>

    Then you write this css code:

    .h1-and-p-container:hover h1 {
  color: yellow;
}

.h1-and-p-container:hover p {
  color: gray;
}
    1
  • Giacomo Scampini•120
    @scamgiPosted 8 months ago

    The solution is completely different. There's a form instead of the image of the challenge.

    Marked as helpful
    0