Skip to content
OverviewSolutions
3
Comments
7
P
DJ Neill
@djneill

All comments

  • Adam Whitehouse•130
    @adamwhitehouse95Submitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm happy with my ability to reseacrch solutions and overcome a problem when i hit a roadblock in this project. Next time i would do more commits as i had to start over once when i was half way through, although i appreciate the extra practice.

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

    I didnt know how to make a child elements property change when i hover over the parent element but after a quick google it all made sense.

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

    I'm not confident with my code and even though everything looks good im not sure its good quality so some feedback would be nice.

    Blog Preview Card

    3
    DJ Neill•130
    @djneillPosted 2 months ago

    You did a great job and this looks great. Something that can help is using media queries with your CSS, this will target how your CSS will look on different screen sizes. Some other HTML tags may help with readability so instead of having a page full of divs you can use, main, section, article, and aside.

    Dave Gray has a YT on media queries - Link

    MDN beginners guide to media queries

    HTML cheatsheet

    MDN website structure

    0
  • ikethedev•260
    @ikethedevSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    I'm proud to have successfully implemented JavaScript in my project. While I've focused heavily on DOM updates, I've realized the importance of visually appealing CSS. For my next project, I plan to prioritize both clean JavaScript and pixel-perfect CSS design.

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

    My biggest challenge was styling the input range and I overcame that challenge with a lot of Googling and Youtube videos!

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

    I would love to have help with using the Figma files. I do not understand how to use the information provided to get width and height from the files provided.

    Password Generator app

    2
    DJ Neill•130
    @djneillPosted 2 months ago

    If you double-click the element that you want to know the size of, for example, the input box that displays the password. On the right-hand side, it will have a 'w' for width and 'h' for height, the numbers displayed are the size in pixels. I can't share a screenshot here but if you look at the below link a similar question was asked in the Figma "ask the community" forum.

    Figma support forum, unit measurement

    Marked as helpful
    0
  • ikitamalarose•400
    @ikitamalaroseSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I am proud to have been able to customise the slider as well the copy clipboard option. This project seemed easy at first glance but after starting i learned a lot. It was great :)

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

    I had trouble realising the slider but after several searches i was able to do it. I use tactile events touchstart and mousedown etc....

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

    I would like to know how yo change the colour of a SVG because when i target it with CSS it doesn't work. That way i could add the options hover

    index.html

    SVG

     .header-icon:hover {
       color: var(--almost-white);  
 }

    Password Generator

    2
    DJ Neill•130
    @djneillPosted 3 months ago

    I used React & Tailwind but I'm sure you can accomplish the same with HTML & CSS. Instead of using an image tag for the check mark put the SVG inline and remove the fill="#000". You should then be able to target it with your CSS class. Here's an example of how I did it.

    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" className="ml-2 transition-colors group-hover:fill-[#A4FFAF]" > <path d="m5.106 12 6-6-6-6-1.265 1.265 3.841 3.84H.001v1.79h7.681l-3.841 3.84z" className="fill-current" />

    0
  • Edidiong•580
    @ScarAgathorSubmitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I used this project to practice tailwind because I'm trying to compare it to sass. So far I do prefer scss just because Its easier for me to write but I can see how tailwind can still be useful especially because I don't have to come up with class names. Although there were definitely some things I didn't like. I couldn't make the custom slider using tailwind alone and he re was also the issue of tailwind removing classes that aren't being used at the moment the page loads. I understand that is one of its uses but it did get annoying and I had to define the classes in the input CSS file. Any advice on how to make this process easier will be appreciated.

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

    Advice on how to dynamically add classes using js and tailwind and also how to design the custom slider in tailwind. I also couldn't figure out how to make the custom slider accessible. I.e, I couldn't complete it using my keyboard alone dso I would appreciate advice on this

    responsive password generator app using tailwindcss

    1
    DJ Neill•130
    @djneillPosted 3 months ago

    I couldn't find much info on range sliders either. It was noted that they're not used much in the real world due to inaccuracies. Since you're using HTML this article was shared in the group that may be able to help you.

    https://www.smashingmagazine.com/2021/12/create-custom-range-input-consistent-browsers/

    0
  • James Brown•260
    @jamesbrown173Submitted 3 months ago
    What are you most proud of, and what would you do differently next time?

    I think this is some of the worse JS code I've ever written, it's super messy and not clear in places but it works. If I have time I'd like to refactor the code to make it more clear.

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

    Loads of challenges, mainly how to update the strength icons.

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

    Is there any easy way to display error messages besides window.alert?

    js-calculator-app

    1
    DJ Neill•130
    @djneillPosted 3 months ago

    There is a toastify you can use with HTML. The repo has some pretty good documentation and examples. https://github.com/apvarun/toastify-js/tree/master

    You could also add checked to a couple of the checkboxes' input tags so they will be checked when the page loads. <input type="checkbox" id="upperCheckbox" name="vehicle1" value="Bike" class="checkBox" checked />

    Marked as helpful
    1
  • Rohan Tayal•310
    @rohantayalSubmitted 3 months ago
    What challenges did you encounter, and how did you overcome them?

    i had some problems designing the range and checkboxes.

    i could design the range by first resetting the entire thing and designing it using -webkit-slider-runnable-track and -webkit-slider-thumb.

    but I am still unable to give the boxes of checkbox background color.

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

    I would like some help designing the checkbox boxes, specifically with the background color.

    password-generator-app

    1
    DJ Neill•130
    @djneillPosted 3 months ago

    I used React with Tailwind CSS for my challenge. Since you're using HTML, CSS, JS my first guess would be this. I would have a checked and unchecked CSS class. Then I would use an event listener in JS to toggle the classes onClick. .checkbox{ background-color: transparent; border-color: #FFFFFF; } .checkbox:checked { background-color: #A4FFAF; border-color: #A4FFAF; }

    0
  • Sam Hooker•610
    @35degreesSubmitted 4 months ago
    What are you most proud of, and what would you do differently next time?

    I planned the layout ahead of time, and took advantage of sections and Flexbox layout.

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

    Centering a div, image widths can be tricky. Learned how to style a table, still didn't do it perfectly.

    HTML CSS Omelette Recipe

    2
    DJ Neill•130
    @djneillPosted 4 months ago

    It still looks great, CSS can be tricky. Flexbox Froggy is a good fun way to learn flexbox, and I would say go through their game course first. I really like Flexbox Zombies, it's free and sponsored by the MDN. It's a bit more in-depth, by the end you'll be a flexbox pro.

    0