Skip to content
OverviewSolutions
37
Comments
25
tortaruga
@tortaruga

All comments

  • AmIKamil•140
    @AmIKamil
    What are you most proud of, and what would you do differently next time?

    I am proud that this web may be open on phones too It is not perfect, but I am still a newbie in responsive web dev I am glad that I have learned how to add fonts directly from files and not from a web And finally, I am quite good at centring elements :)

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

    Centring img in a card was bit challenging but I've solved it with some web research and a bunch of practice Also I had to find out how to set correct spaces between paragraphs

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

    Well, please check and advise if I have correctly positioned all items. Additionally, could you advise regarding responsive design? Best wishes from Poland! :)

    Flexbox, adding fonts directly form file

    2
    tortaruga•790
    @tortaruga

    Good job! to make even better responsive designs, you can look into media queries, or use relative units like vw so that elements scale according to the viewport's width.

    for example, if you want a .card element to be bigger on big screens, you could do something like this:

    .card {
    width: 20rem;
}
@media screen and (min-width: 600px) {
   .card {
       width: 30vw;
       max-width: 40rem; 
   }
}

    this ensures that the .card has a width of 20rem on screens smaller than 600px, while for bigger screens the card will have a width of 30% of the viewport's width, and so it will automatically adjust in relation to the screen size, while also ensuring that the card will never be wider than 40rem.
    by playing around with different values and combinations you can create a design that looks good on all screens! hope it helped, good luck

  • FrontendDev•60
    @Ali-Learner
    What are you most proud of, and what would you do differently next time?

    Somewhat proud of making the first website. Havent done anything special, only basic html and css

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

    Getting used to with the overall process was the difficult part and it can be overcome with practice only

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

    How to perfectly center a div using only html and css nothing advanced?

    QR page using basic HTML and CSS

    1
    tortaruga•790
    @tortaruga

    hi! on large screens it looks good, but since your .container has a width of 18% it becomes too narrow on smaller screens.

    to center a div in a simple way you can use margin: auto, or you can use flexbox on the parent element:

    .parent {
display: flex;
justify-content: center;
align-items: center;
}

    this will center the child element both vertically and horizontally inside of .parent! hope it helps, good luck

    Marked as helpful
  • Ibrahim•30
    @Ajibose
    What are you most proud of, and what would you do differently next time?

    i designed it using a mobile first approach. in my next project, i will like to experiment with CSS Grid instead of flexbox for centering and layout control to compare the flexibility and simplicity of each approach.

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

    Initially, I struggled to vertically center the .main-container for larger screens. i thought using margin: auto; will automatically center vertically as well but later found out thatit has to have a defined parent height.

    Solution: I switched to using Flexbox on the body with align-items: center and justify-content: center, which solved the issue.

    i also had issue with knowing the size to use for an average size mobile

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

    Are there better ways to ensure the design remains consistent on even larger screens because i noticed that the design seems a bit off for some screen size

    Could I improve how i’ve used media queries to handle responsiveness more efficiently?

    Am I following best practices for accessibility? For example, is the alt text in my <img> tag descriptive enough? and are there other things i could add to make the page more accessible

    Responsive QR Code Component Design

    1
    tortaruga•790
    @tortaruga

    hi! i think the reason it looks weird on bigger screens is because on screens larger than 768px the width of .main-component is set to 15%, which is a bit small. you can try playing around with other percentage values, or even setting a fixed value like 320px, until you are satisfied with the way it looks. the rest is looking good, keep it up!

  • tortaruga•790
    @tortaruga

    Good job! The only issue is the image not showing, if you deployed using GitHub you can fix it by adding the image file to the repository (and making sure the src path is correct)

  • Toyeeb Ambali•10
    @Lanzyk11
    What are you most proud of, and what would you do differently next time?

    I am proud of my improvement. learn better ways to style my code.

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

    pushing my code to github and i used the internet to overcome them.

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

    how do you style an image with a border-radius

    CSS styling for margin

    1
    tortaruga•790
    @tortaruga

    hi! good job on the challenge. to style an image with border-radius you can just use the border-radius property like you would on a div element:

    img {
border-radius: 15px;
}
  • tortaruga•790
    @tortaruga

    hello, congrats on completing the challenge! it looks like there's an issue with the image, i think it's because you didn't add the image file to the github repo

    Marked as helpful
  • Jordan Davenport•1,180
    @jjdavenport
    What are you most proud of, and what would you do differently next time?

    I learned how to use tailwind css and add transitions and animations to the site.

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

    The main challenge was intergrating the tailwind classes with js for the transitions.

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

    Any feeback is welcome.

    Bookmark landing page

    #tailwind-css
    1
    tortaruga•790
    @tortaruga

    it looks really good, however i think there's a problem with your updateFeature function, because the feature tabs don't change when you click on the tab buttons. other than that good job!

    Marked as helpful
  • tortaruga•790
    @tortaruga

    really good!

    Marked as helpful
  • Maryam•260
    @Maryam1982
    What are you most proud of, and what would you do differently next time?

    I'm glad with the result specifically responsiveness and the next time I wont declare variables which I will need to change based on device width as SCSS variables but CSS variables (I declared media queries for these variables but that's not possible for SCSS variables)

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

    I think I spent most of time on making the page responsive. Since I used SCSS and 7-1 architecture I had to move around all those folders but the result was a more strcurured and more readable project.

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

    Maybe with how to organize SCSS files.

    Responsive landing page using SCSS

    #sass/scss#bem
    1
    tortaruga•790
    @tortaruga

    good job!

  • Tharun Raj•1,330
    @Code-Beaker
    What are you most proud of, and what would you do differently next time?

    This solution is submitted as a part of the Advanced CSS Techniques learning path.

    Tools:

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

    No difficulties as I have done this before.

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

    Any suggestions are welcome!

    Responsive NFT Preview Card [HTML, SCSS, Parcel Bundler]

    #parcel#sass/scss#bem
    1
    tortaruga•790
    @tortaruga

    really cool I like the blur effect when the image is hovered!

  • Filip Juszczak•710
    @filipjuszczak
    What are you most proud of, and what would you do differently next time?

    I'm proud of re-creating the most complex design yet (for me).

    100 score in Lighthouse.

    E-commerce product page

    1
    tortaruga•790
    @tortaruga

    it looks so much like the original design! congrats

  • alvarozama•360
    @alvarozama
    What are you most proud of, and what would you do differently next time?

    I'm proud of how little time it took me to get the styling right. Planning ahead for how I'm gonna use Grid had been pretty tricky in the past, but this time around it all seemed much more intuitive. What I'd like to try doing differently is using button element and styling their content with the svgs rather than placing the svgs directly and using them as buttons to open/close the menu.

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

    No challenges other than the fact that I still can't quite wrap my head around the whole WAI-ARIA thing. I'm pretty sure I missed some important labeling or something.

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

    Checking for missing accessibility features on my HTML markup.

    News Homepage Challenge

    1
    tortaruga•790
    @tortaruga

    congrats on completing the challenge it looks very good

  • alvarozama•360
    @alvarozama
    What are you most proud of, and what would you do differently next time?

    As always, I'm just proud that I was able to complete the challenge and come up with a way to have the contact form do all it was supposed to. Also, I found it tricky to use the svgs in a way that ended up looking as the design, but I eventually found out a way with some help from YouTube.

    What I'd do differently next time is the form validation as a whole. The process is, I feel, unnecessarily convoluted. I have a single function in charge of validating all inputs, and I feel like it's better to have many functions do one thing very well than having one function do everything.

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

    Two main ones that I actually didn't know how to solve and just ended up giving up:

    1. The way I implemented the error styling made it so that whenever the border-color of an element was changed to red, said element totally lost all focusing functionallity. Given that this challenge was about accessibility, loosing the focus states is a pretty big deal.
    2. My page doesn't seem to be displaying any focus states for the radio buttons. I'm pretty sure I'm missing something obvious, but at this point, my brain is fried.
    What specific areas of your project would you like help with?

    Pretty much the above stated points. Any help with that would be greatly appreciated.

    Contact Form challenge

    1
    tortaruga•790
    @tortaruga

    hi, for the error styling getting rid of focus I think it's because you have set outline to none, so technically they don't get visually focused even when the border is not red. i just removed the border and used the outline instead:

    input:focus, textarea:focus {
    outline: 1px solid var(--dark-green);
    border: none;
}

    and then changed the color of the outline to red when the input is invalid.

    for the radio buttons (and i think the checkbox too) the problem might be that the focusable element is the input itself, which in your case is hidden so that you could use the svg icons in its place. I think you could try resolving it by using the property tabindex="0" which makes normally non-focusable elements focusable, but I'm not sure how because the element you have to apply it to is the ::before element of the label. sorry i'm not very good at this, I didn't use the icons I just styled the inputs like this

    input[type="checkbox"], input[type="radio"] {
    accent-color: var(--dark-green);
}

    i hope something was useful!

    Marked as helpful
  • alvarozama•360
    @alvarozama
    What are you most proud of, and what would you do differently next time?

    I'm proud of having learned how to make an accordion, since it's something I was planning on implementing on a different personal project. I had no idea how to go about making one and had to check a few different sources/tutorials, which helped me understand the different approaches that can be taken as well as how to plan for my HTML markdown with the accordion design in mind.

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

    Other than not havin any idea of how to create the accordion, I just struggled a bit with the sizing of the main component. However, this time around I worried myself more with functionality than with design.

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

    None that I can think of.

    Faq accordion challenge

    1
    tortaruga•790
    @tortaruga

    really good I like the smooth transition when you hide and show the answers!

  • alvarozama•360
    @alvarozama
    What are you most proud of, and what would you do differently next time?

    Not much this time around. Completed the challenge fairly quickly, but then again, it wasn't super hard.

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

    None, thankfully.

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

    The component shows what it has to, but I'm not sure if the handling of the form is right. I'd appreciate it if someone could take a look at that.

    Interactive Rating Component

    1
    tortaruga•790
    @tortaruga

    very well done! i think the form is handled fine

  • P
    RadaidehDaniel•430
    @RadaidehDaniel
    What are you most proud of, and what would you do differently next time?

    The logic was challenging but fun. I need to make my code DRY as possible.

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

    It was adding a class to the label element associated with input.

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

    I start with the mobile design first. It adds more complexity to make it responsive. I read about mobile-first vs desktop-first. I did not find strong evidence to start with mobile design first. It is more like an opinion. I will stick to desktop design first, as it is more productive in terms of time and effort.

    Tip Calculator

    1
    tortaruga•790
    @tortaruga

    good job!

  • Nadji CHABANE•590
    @CHBNDJ
    What are you most proud of, and what would you do differently next time?

    none

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

    none

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

    none

    Responsive Time tracking using JS

    1
    tortaruga•790
    @tortaruga

    congrats it looks really good! only thing that is missing is when hovered weekly, daily and monthly should become white

    Marked as helpful
  • Dustin Knie•210
    @nullpuppy
    What are you most proud of, and what would you do differently next time?

    I'm pretty happy with the modal display in chrome, but I'm disappointed the transition doesn't seem to work in firefox. The mobile experience could probably be better, but I'm content with what's here.

    Most of this was pretty easy to throw together, and I'm mostly happy with what I came up with.

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

    The success modal on mobile gave me some grief. I've gotten more comfortable with flexbox, but it seems it's maybe not the best solution for that component. I'm happy with what I was able to get to work, but I'm disappointed it required some margin magic rather than being able to rely on align/justify settings.

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

    Any feedback is appreciated!

    Responsive Newsletter Signup Component with form validation

    1
    tortaruga•790
    @tortaruga

    oh wow it looks basically identical to the design!! congrats