https://github.com/cdanderson76/blogpreviewcard
This is the solution for the Frontend Mentor Blog Preview Card challenge.
https://github.com/cdanderson76/blogpreviewcard
blogpreviewcard css front-end frontenddeveloper frontendmentor frontendmentor-challenge html responsive-web-design scrimba webdesign webdeveloper webdevelopment
Last synced: 7 months ago
JSON representation
This is the solution for the Frontend Mentor Blog Preview Card challenge.
- Host: GitHub
- URL: https://github.com/cdanderson76/blogpreviewcard
- Owner: cdanderson76
- Created: 2024-01-17T09:05:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-26T03:09:14.000Z (over 1 year ago)
- Last Synced: 2025-01-21T10:23:53.641Z (9 months ago)
- Topics: blogpreviewcard, css, front-end, frontenddeveloper, frontendmentor, frontendmentor-challenge, html, responsive-web-design, scrimba, webdesign, webdeveloper, webdevelopment
- Language: CSS
- Homepage: https://cdanderson76.github.io/blogPreviewCard/
- Size: 103 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This is my solution for the Frontend Mentor Blog Preview Card
This is an HTML & CSS-only challenge in which I practiced my HTML and CSS fundamentals, (HTML structure and the box model).
What are you most proud of, and what would you do differently next time?
There wasn't a lot of changes that I could make to this project...maybe just the color scheme. However, I was able to go into figma and change the color of the design to make it stand out from other designs. Not a HUGE deal, but I am proud that I made that change.
As far as what I would do differently next time, I would be sure to add all of my HTML first, and then style it all out at the end. I believe I had more trouble than I should have with the footer this go-around, but I was able to make it happen.
What challenges did you encounter, and how did you overcome them?
When converting from pixes to 'ems', I experienced some unexpected outcomes in which the font was to little or too small, or even when some of the widths became too small. This happened within my '.published' and '.foundations' classes. Here I just stuck with pixels, but made sure I tested the responsiveness to make sure everything was ok.
Another problem that I encountered was getting the footer in the appropriate place. For some reason, whenever I checked the design on my mobile phone, the footer was smashed up against the blog preview card. No matter what changes I made, the footer wouldn't adjust. I finally went back and reviewed a previous project that I did, and found that I didn't use 'align-items: center' for my '#canvas' (contains the card). Once I added that, I was able to adjust the footer to my liking.
What specific areas of your project would you like help with?
I don't think that there is anything that I needed help with, but tips and comments are always useful. I don't think I had too many issues putting this project together, however.