Skip to content
OverviewSolutions
5
Comments
6
Camryn Tidsworth
@CamrynTidsworth

All comments

  • i000o•90
    @i000oSubmitted 18 days ago
    What are you most proud of, and what would you do differently next time?

    This one took me less time than the first. I tried to keep the problems as simple as possible. I'm satisfied with the end result.

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

    I had a hard time figuring out how to order the items in the stack like the images and different text elements on the card.

    I tried to use the order: property but I realised that since I had set body to display: flex;, the section element I used for the card was the flex-item, not the elements within.

    When I tried to make a flex container within another by assigning display: flex to section (the card), the problem seemed to become more complicated. So, I just did the simple thing and ordered them the way they appear in the HTML, which wasn't my preference.

    How best to address this when ordering flex items in a container?

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

    Please advise as to the above. I don't imagine that the best way was to reorder the stack in the HTML, but I couldn't figure out how to make proper use of the order property within flex containers. In a situation like this, would you always assign the flex container to body rather than the card itself? I'm not sure...

    Blog preview card

    1
    Camryn Tidsworth•130
    @CamrynTidsworthPosted 17 days ago

    Great design, looks very close to the original! The code is well-written and easy to read.

    I think if you add "display: flex;" to the section element you can then use order on the content inside. I've never done it before so let me know if it does/doesn't work. Out of curiosity, why do you want to have things ordered differently in the HTML? Is it because you want the more relevant headings to get more SEO attention?

    One other tip I learned doing this design was how to add hover states to elements. In this instance, to make the title turn yellow and turn the cursor into a pointer you can add this to your existing CSS:

    h2:hover { color: yellow; cursor: pointer; }

    Marked as helpful
    0
  • Natali 👻 Grimm•1,150
    @Grimm-NSubmitted 25 days ago
    What are you most proud of, and what would you do differently next time?

    I created a small Python script to handle font conversion in this project. It’s a quick and convenient way to generate the necessary formats for seamless integration.

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

    My ongoing battle: Flexbox vs. Grid. Most of the time, I can spot which one’s the better choice right away, but there are those times I only realize it a bit too late.

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

    I’m always open to advice, especially when it comes to JavaScript! Any tips or insights would be really appreciated as I work on improving my skills.

    Responsive section "Coming Soon" (html, js, pure css, py)

    1
    Camryn Tidsworth•130
    @CamrynTidsworthPosted 24 days ago

    This is really cool! I like your personal touch with the social icon container :) I'm gonna be honest, I still waver on when to use Flexbox vs CSS sometimes so this comment is more commiseration than guidance. What I've noticed so far, though, is that Flexbox is a great general tool that is typically able to get the job done. The one area that I definitely prefer using CSS is if I need several cards to fill up a row and wrap responsively. For this, I like "grid-template-columns: repeat(auto-fit, minmax());" because you can control the width more precisely.

    Marked as helpful
    1
  • Camryn Tidsworth•130
    @CamrynTidsworthPosted about 1 month ago

    Good job! The project looks similar to the design aside from some differing colors. The code is well structured and readable, especially the CSS.

    Two suggestions:

    1. There is room here to incorperate more descriptive HTML tags that will make the code more SEO friendly and accessible. For example, you could use tags like <ol> or <ul> for lists, and <table> for the nutrition table.

    2. It may speed up your CSS process to start using custom properties for repeating colors. This can be done by using the var() function to set specific color values that you can then reference instead of writing out the entire hsl value every time.

    Marked as helpful
    0
  • Camryn Tidsworth•130
    @CamrynTidsworthPosted about 1 month ago

    The fade color change on the button hover state is really cool! The only thing I would suggest is using the <button> tag instead of <li> in the HTML.

    0
  • Joe•30
    @YoussefGaafarSubmitted about 1 month ago
    What challenges did you encounter, and how did you overcome them?

    The black border behind the card is a bit tricky, by the look of it it seems to be easily implemented by border-shadow, but it will not work. So to implement this black box you need to use ::before (Pseudo Element).

    Active Blog Preview Card

    1
    Camryn Tidsworth•130
    @CamrynTidsworthPosted about 1 month ago

    The HTML makes use of alt descriptions which is good for accessibility. Accessiblity could be improved even more by including semantic HTML tags like <article>, <footer>, etc. in place of some of the <div> tags. The box-shadow on the main container looks great! It looks like you may be working with active states I'm not familiar with for the border, but if you want a simple static border all the way around like the design shows, you can simply add a border to the container in CSS.

    Marked as helpful
    1
  • zadi•10
    @peck2285Submitted about 1 month ago
    What are you most proud of, and what would you do differently next time?

    A travers ce projet j'ai appris sur flexbox comment utilisé

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

    j'ai pas rencontré de défie pour ce projet

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

    aucun

    Titre de la solution : QR Code Component outils utilisé FLEXBOX et ht

    1
    Camryn Tidsworth•130
    @CamrynTidsworthPosted about 1 month ago

    Looks good!

    0