Skip to content
OverviewSolutions
9
Comments
5
Tom Roche
@TomrocheDev

All comments

  • Robert level•190
    @Rlevel87
    What are you most proud of, and what would you do differently next time?

    Proud that I am able to complete this project with little help. Only help needed was for the arrows. Feel I need to learn a better way to program the positioning of elements. Felt I used way to many margins.

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

    Creating the phone and fitting the objects was challenging.

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

    Writing the code in a more simply way. I feel I could have coded this with much fewer lines.

    Responsive CSS masterpiece

    1
    Tom Roche•330
    @TomrocheDev

    Hi Robert,

    Great take on this project! You asked for feedback on a more simple way of writing code. First of all, your code is very consistant in my opinion, so you are doing a great job.

    A tip I could give you is to use more explainatory classes. In your code I read a lot of classes like "lefttextbox" and "lefttextbox1". That is something I personally would avoid, because if you want to change something, it could get hard to find the exact element you want to select (especially on bigger projects). The chronology could also be disrupted when you, for instance, add a new element in between two elements that are named for instance "class1" and "class2". What I would recommend is try to use more classes that discribe what the element is or does. It makes it a lot more readable and professional. I also would recommend to use dashes between words in classnames. I would write "lefttextbox" as "left-text-box". That is more readable.

    For positioning of elements I would recommend to do some research on flexboxes and grids. These technologies are great for the positioning of elements. At first it can be hard to understand, but give it some time. It will help you A LOT with postioning.

    Resources for flexbox and grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout https://developer.mozilla.org/en-US/docs/Web/CSS/flex https://www.youtube.com/watch?v=rg7Fvvl3taU -- (A video by Kevin Powell -- This is also a great channel to follow on YouTube)

    Hope this helps!

    Marked as helpful
  • Ejiofor John•490
    @echocode1
    What are you most proud of, and what would you do differently next time?

    I did it and it worth it. next time I will design it with React

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

    validating the form was quite confusing but became easier with more tries.

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

    I tried adding color to my placeholder with JavaScript but it did not apply. I need help with a better way to do it next time

    Responsive newsletter-signup (first attempt)

    1
    Tom Roche•330
    @TomrocheDev

    Hey Echocode1,

    Really nice take on this project. Very solid code. You asked help about styling a placeholder. If I interpreted your question correctly, this is something you don't necessarily have to do with JavaScript. This is really easy with CSS-only.

    You can easily style a placeholder with the ::placeholder psuedo element. For example:

    ::placeholder { color: green; font-weight: 700; }

    Check out this resource for further expaination: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder

    Hope this helps 👍

    Marked as helpful
  • Tom Roche•330
    @TomrocheDev

    Great take on this project. Really consistant code! The only thing I would recommend is to experiment with spacing. Your solution is quite compact (for example: sections are very close together). As a result of good consistant spacing, your website will appear much more professional. Hope this helps.

    Overall great solution!

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

    I believe if I do it again, I would do it better.

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

    Designing the grid was my biggest challenge.

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

    I would appreciate any help to improve the code.

    html,css

    1
    Tom Roche•330
    @TomrocheDev

    Good take on this solution! The design looks really good and professional.

    You request on help with cleaning up your code: First of all, your code looks fine to me. You use the right tags, which makes your code structured. What I would avoid, is the over-use of classnames. Not all tags need a classname (in my opinion). The thing I also would avoid, is the long classnames like "container__section_header_div_name", "container__section_texto1" and "container__section_texto2". These long classnames make your code hard to read, and it also makes elements hard to target when you want to change something. Like, when I read your CSS, I have to puzzle my way out to find out which properties are assigned to which element.

    I would recommend to use short and declaritive classnames and try experimenting with targeting elements without classnames. This way you will learn how to target elements effectively without overusing classnames. A great resource for this is CSS Diner. https://flukeout.github.io/

    Hope this helps!

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

    I'm happy I'm understanding bootstrap

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

    The excessive use of divs was difficult to cope with... But overall, it improved my Critical Thinking and Problem Solving.

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

    Any Suggestions would be appreciated.

    Responsive Landing Page With HTML and Bootstrap

    #bootstrap
    1
    Tom Roche•330
    @TomrocheDev

    Great take on this project! Bootstrap is a really good choice for this one. I really like the well-structured code and responsiveness in your solution.

    I do have some suggestions for your future projects: I would suggest to use some padding inside your boxes. It will make you design look a lot more professional.

    In the challenge design, the mobile menu makes a horizontal entrance on the right side while yours does it vertically. Although, there is nothing wrong with the standard vertical bootstrap menu, don't get me wrong. If you want it to make it's entry vertically, try to use the bootstrap offcanvas component. Link: https://getbootstrap.com/docs/5.0/components/offcanvas/

    Again, overall a great solution!

    Marked as helpful