Skip to content
Submitted 11 months ago

Basic HTML and CSS learning box model and git.

Michael King•90
@mking0823
A solution to the Blog preview card challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I'm proud of the fact that its finally starting to click. I'm also proud of the fact that I was able to use the feedback I got from my last project ( improving centering items with grid) right away. It took me a few times to get to this point but unless I did something wrong that I'm not aware of I wouldn't change it.

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

I'm still a little confused on when to push things to git hub and what I should put for my commit messages. I usually do the initial commit and then not push again until I'm done with the project.

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

If possible some tips on git and git message like when to push updates and I think I'm still not centering my cards vertically correctly.

Code

Please log in to post a comment

Log in

Community feedback

  • Amin Alizadeh•200
    @M-AminAlizadeh

    Hey @mking0823

    I hope you are well

    About learning Git I suggest you to watch this video -- it's old but gold for beginners

    The core commands are:

    • git clone
    • git status
    • git add
    • git commit
    • git push

    I suggest you don't overcomplicate it to yourself

    Marked as helpful
  • P
    Daniele•300
    @dedo-dev

    Hey there @mking0823,

    About Git, before starting the learning path I had never used it, I used GitHub Desktop, but to push the updates I had to go into the application. So every time I created the repository and then I forgot to push the progress into the repository which I promptly did when I closed VS Code or even when I reopened GitHub.

    I also brought this flaw into the first two challenges of the learning path, obviously, this thing takes away all the work utilities of Git or GitHub itself, but this is to tell you that you are not alone.

    Now the advice:

    • If you haven't done so, install git on VS Code, it's really useful and I honestly find it more intuitive than the console;
    • Push to the repository whenever you make progress, for example, do you create a CSS reset file? Push it to the repository with a message like reset initialized. Do you write the first element of HTML? Push it. Example card structure made

    So summarize what you did and push every time to your repo so you're enable to scroll through the history and if you need you know the meaning of every step.

    About centering the card vertically I think you need to change this code grid-template-rows: 94% 1fr; with this grid-template-rows: 1fr; or this grid-template-rows: 1fr auto;

    I will suggest also using Relative Units as rem & em instead of px, Logical property as padding-inline-start instead of padding-left, wrapping all the card elements in an article tag and last but not least think Mobile-first when you start the next challenge, because the card isn't responsive on a mobile device.

    Hoping you find this helpful ✌️

                           Keep learning 📖 Keep coding💻
    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord