首页 >web前端 >css教程 >Week f #DaysOfCode: Flexbox, Typography, Accessibility, and More!

Week f #DaysOfCode: Flexbox, Typography, Accessibility, and More!

DDD
DDD原创
2024-09-24 06:19:19328浏览

Week f #DaysOfCode: Flexbox, Typography, Accessibility, and More!

Day 8: Today I completed the "Learn CSS Flexbox by Building a Photo Gallery" module on #freeCodeCamp! ? Flexbox is such an essential tool for responsive layouts, and I learned how to align images, create flexible grids, and structure a beautiful, responsive photo gallery. It's exciting to see how powerful Flexbox can be when it comes to making layouts flexible and adaptive. Feeling more confident with it now! ?

Day 9: Today was all about typography in web design. I delved into font families, font weights, and letter spacing to enhance readability and give my designs a more polished, professional look. Typography has so many subtle details, and I’m starting to understand how things like font size and spacing can dramatically improve a user’s experience. ?

Day 10: Completed a quiz project to learn accessibility on #freeCodeCamp. This project challenged me to think about web accessibility and how to make websites usable for everyone, regardless of disabilities. Ensuring all elements were styled correctly was tough, but it’s satisfying to know that I’m making more inclusive web designs. It also made me realize that I need to go deeper into HTML & CSS to master the core concepts. ?

Day 11: Spent hours diving deep into HTML & CSS through #W3Schools. I never realized just how vast CSS is—it’s far more extensive than I imagined! From basic styling to complex animations, there’s so much to learn. Still reading, but I’m excited to apply what I’ve learned so far. ?

Day 12: Completed a tribute page project dedicated to Dr. Norman Borlaug using HTML & CSS! ? This was another challenge from #freeCodeCamp. I learned so much about layouts, image captions, and responsive design. It was challenging but rewarding, and I’m happy with the outcome. These days, I've been diving deeper into CSS through #W3Schools, and it's helping me get clearer on concepts that were difficult for me before. CSS is huge, but I’m enjoying the journey so far! ?

Day 13: Worked on my "Learn-about-pseudo-by-building-a-balance-sheet" project. This project introduced me to pseudo-elements and pseudo-classes in CSS. It was quite a new concept, but learning how to style specific parts of elements without adding extra HTML was mind-blowing. This project gave me a deeper understanding of CSS selectors and how powerful they can be.

Day 14: Wrapped up my "Learn-intermediate-css-by-building-a-cat-painting" project. It was a super creative challenge! Using CSS to build artwork was a unique experience. It took some time to get the shapes and colors right, but the process gave me a new appreciation for what CSS can do beyond layouts and styling—it's a tool for art too!

Challenges:
Flexbox took time to master, but now I feel more confident with it for responsive designs.
Typography, while seemingly simple, required a lot of fine-tuning to make text both readable and visually appealing.
Accessibility was the biggest challenge—it was hard to balance good design with accessibility standards, but I’m making strides.
Pseudo-elements were tricky at first, but I’m starting to understand how they can improve styling without adding extra markup.
Progress So Far:
I’m more comfortable using Flexbox for responsive layouts.
Typography is starting to feel more intuitive, and I’m implementing better practices.
I’ve gained a deeper appreciation for accessible web design and am paying more attention to it in my projects.
My understanding of CSS pseudo-elements and CSS art has expanded, and I’m eager to apply these skills in future projects.
Stay tuned for more updates as I keep moving forward in my #100DaysOfCode journey! ??

Here’s a glimpse of the HTML and CSS codes I worked on so far. You can check out my GitHub repository where I’m documenting all my progress: https://github.com/heritech9/100-days-of-code.git

以上是Week f #DaysOfCode: Flexbox, Typography, Accessibility, and More!的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn