ctspecht12

Latest comments

• 

  Codecblvck•20

  @Codecblvck

  Submitted 4 months ago

  What are you most proud of, and what would you do differently next time? 🎉 What I'm Most Proud Of

  I'm most proud of how I was able to bring everything together—from semantic HTML and responsive CSS, to integrating a custom local font (Figtree) using @font-face. It was satisfying to see the design match the original layout across different screen sizes. I also learned how to use Git and GitHub effectively, which helped me track my progress and publish a live version using GitHub Pages!

  🔁 What I'd Do Differently Next Time

  Next time, I would:

  • ✅ Use CSS Custom Properties
    To maintain consistency and make it easier to update colors, spacing, and fonts across the entire stylesheet.

  • 📱 Improve Responsiveness Further
    Start with a mobile-first approach and refine layout breakpoints for better control between 320px and 1440px screens.

  • 🌐 Focus More on Accessibility
    Use better contrast, semantic HTML elements, and ensure the design works well for screen readers and keyboard navigation.

  • 🔍 Write a Clearer README
    Include instructions for setup, font usage, screenshots, and live preview links to make the project more shareable and professional.

  • 🛠️ Experiment With New Tools
    Try out Tailwind CSS, SASS, or even a basic JavaScript enhancement to add interactivity.

  What challenges did you encounter, and how did you overcome them? 🧠 Challenges I Faced & How I Overcame Them

  • Responsive Layout Issues
    Challenge: The layout was not consistently looking good across different screen sizes, especially on mobile (320px).
    How I Overcame It: I adopted a mobile-first approach by using flexbox for layout control, adjusted the widths to percentages, and fine-tuned my breakpoints with media queries to ensure the layout adapts smoothly to different devices.

  • Font Integration Using Local Files
    Challenge: I was unfamiliar with integrating local fonts (like Figtree) into my project, and encountered issues with linking .ttf font files.
    How I Overcame It: I learned how to use @font-face in CSS to integrate custom fonts. After verifying the correct path and ensuring I specified the right font weights, I successfully applied the Figtree font across my project.

  • Too Much Space Between Elements
    Challenge: There was excessive space between elements like .info and the footer, which disrupted the layout.
    How I Overcame It: I used Chrome DevTools to inspect the layout and discovered the issue was related to unnecessary padding and margin values in the inner containers. After adjusting these values, everything aligned as intended.

  What specific areas of your project would you like help with? ❓ Areas Where I’d Like Help

  • Responsive Design Tweaks
    While the layout is mostly working on mobile and desktop, I'm still struggling with some of the fine-tuning for medium screen sizes (e.g., tablets). I would appreciate advice on better handling media queries and improving the responsiveness across all devices.

  • Font Loading & Performance
    I used a custom local font (Figtree), but I’m concerned about performance. I’m not sure if using @font-face is the most efficient way to load fonts. Any suggestions on better practices for font loading (like font-display or using preload) would be really helpful.

  • CSS Performance Optimization
    I’m looking for tips on improving the performance of my CSS, especially as my styles grow. Are there any performance issues I should be aware of with my current setup, or best practices for writing efficient and fast CSS?

  

  Responsive Blog Card using FlexBox

  2

  10
  

  P

  ctspecht12•90

  @ctspecht12

  Posted 4 months ago

  Overall, I think you nailed it. Just minor suggestions based on the challenges you reported:

  For loading fonts: I rarely use local fonts, and would recommend using Google Fonts to load the fonts. With Figtree for example, all you have to do is select the "Get Font" button and then select "Get Embed Code," which will give you this:

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
  

  By copying and pasting this into the <head> section of your HTML, you'll have full access to the font.

  For media queries, you can create CSS styles for any page size. What I do is start with the desktop layout and shrink the window until something breaks. Then I use Inspect to check the window size. I'll then set my first @media query to (max-width: 720px) (Or whatever size just before it breaks) and then write the CSS to adjust it. I usually only have to go through this 2-3 times to cover all screen sizes.

  You're really doing great, and I hope this was helpful. Please let me know if you have any follow-up questions.

  0

  Marked as helpful