Skip to content
OverviewSolutions
20
Comments
128
Dylan Heslop
@dylan-dot-c

All comments

  • Kairung Vangmanaw•230
    @VangmanawKairungSubmitted about 1 hour ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of creating a responsive layout using CSS Grid and Flexbox, as it helped me structure the design effectively for both mobile and desktop views. Additionally, leveraging SCSS allowed me to write clean and maintainable code, which I found very rewarding. Next time, I would focus on:

    • Improving accessibility by adding more comprehensive ARIA roles.
    • Optimizing performance through better asset management and smaller CSS files.
    • Exploring JavaScript interactivity to make the design more dynamic and engaging.
    What challenges did you encounter, and how did you overcome them?

    The main challenge was creating a fully responsive layout, which I solved using CSS Grid and Flexbox for flexibility. Maintaining consistent styles was another hurdle, overcome by leveraging SCSS variables and mixins. Debugging layout issues with Chrome DevTools also played a key role in resolving problems efficiently.

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

    I would like help with further optimizing the responsiveness of the layout for more screen sizes and refining accessibility features, such as improving ARIA roles and ensuring compatibility with assistive technologies. Additionally, I’d appreciate guidance on enhancing performance through better CSS optimization and exploring ways to add more interactivity with JavaScript.

    Single price grid component by HTML and CSS (Sass)

    1
    Dylan Heslop•1,570
    @dylan-dot-cPosted 25 minutes ago

    media (min-width: 1440px) {

    everything looks good, only issue is that media query you have is too large as it will only work for laptops that are really large and not for the smaller ones like 1024px. ANd even my laptop (about 1340px) is seeing them vertically. SO that's one thing you can fix.

    For the css body main.container section#pricing-section button I think you are overusing the selectors, which it's not really a bad practice, but having clear and short selectors are a bit like having good variable names. I think a bottom top approach would be really good in these. Anyways you can apply a classname for the button and it would be clearer...also what happen if you want to add a hover to the button? ANyways... section#pricing-section button is better but still a bit lengthy especially since you only have 1 button.

    Other than that everything else is good, you might also wanna look into css variables to help make your code more modular

    0
  • Dylan Heslop•1,570
    @dylan-dot-cPosted about 12 hours ago

    Not a bad solution but there are a lot of places where you can improve on.

    Component structure. In react you can make reusable components and can make them small or large as possible. The way you implemented the project using 2 components, DestopDesign and MobileDesign is really not a good practice for if someone like me wants to contribute to your project say add a new step, it should be easy and I should have to play with so much code.

    I normally try not to put too much code in a single component as to not let it get bloated and over complex which will make it almost impossible to refactor in the future.

    So just try and break up the components into smaller pieces. Maybe have a component for each step, have one for each option and that way if I want to change/update a step I can do it easily.

    Also... You probably didn't want to pass props and use complex state management so you just did it all in one file, in a real world application you may not want to do this for the reasons mentioned earlier. You can use ContextAPI or another state management like Zustand(which I used)

    There is a lot more, but if you are planning to commit to react I suggest you start out with the smaller challenges(I suggest the time tracking dashboard) that you can break up into smaller components and work with state from a simpler to a higher level.

    I also completed this challenge in react and although I'm no expert I suggest that you take a look to see how my components are structured and the state management I used.

    So all the best and try to follow DRY principles when building out these complex challenges.

    0
  • Luciel V.•40
    @vanderloopSubmitted about 16 hours ago
    What are you most proud of, and what would you do differently next time?

    i'm most proud of how i figured out how to get the 'learning' to not spread across the whole row. next time, i'd try not to think as hard about how to center the div, because that messed me up a few times.

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

    centering the div, so i looked up how to center the div online. also, how to get the yellow 'learning' part to only be around the word and not the whole line, so i played around with it in vscode.

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

    the avatar and text, and just overall constructive criticism.

    Used inline block and div

    2
    Dylan Heslop•1,570
    @dylan-dot-cPosted about 13 hours ago

    Well done! This is a good solution but there are a few ways you can improve.

    • make use of semantic HTML tags like main and article this can help screen readers and replace the divs you have
    • I think you have overused the heading elements and they could be used better. I think there should be only one heading tag here and that would be the title, HTML&CSS... and it can be an h2 as it doesn't need to be an h1. The rest of the tet could be paragraphs.

    Also for the avatar, you could use flexbox to get it aligned vertically and look good. You might also need to put it into a separate container.

    Also make use of css variables in your code especially for the colors

    Overall you did a great job so take care and all the best

    0
  • VADER900000•50
    @VADER900000Submitted 2 days ago
    What are you most proud of, and what would you do differently next time?

    I solved this solution really fast and felt really confident while making it

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

    Nothing :)

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

    how do i make the stats stick to the bottom lol

    Stats Preview Card

    1
    Dylan Heslop•1,570
    @dylan-dot-cPosted about 13 hours ago

    Hey would you like me to review this one as well?

    0
  • VADER900000•50
    @VADER900000Submitted about 14 hours ago
    What are you most proud of, and what would you do differently next time?

    idk this was really easy but im proud i did it

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

    i couldnt get the text next to the image align vertically but i evtually fixed it

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

    idk this was really easy

    Blog Card Preivew

    1
    Dylan Heslop•1,570
    @dylan-dot-cPosted about 13 hours ago

    Well done on this challenge, you did good!

    There are a few things you'll need to master before going on to harder challenges as these are the key fundamentals of web development.

    • You didn't use any semantic HTML. It's important as it helps screen readers to easily understand the webpage for disabled people. So you need to use elements like main and article to get rid of the landmarks error up there.
    • You also didn't use any heading elements like h1/h2/h3... It's important to have those so screen readers can know what's the most important topic or what the content is for.
    • Back again on screen readers, for illustration images that don't really have much meaning(just there for styling purposes) don't really need an alt tag as it's not important to the main content since if the image wasn't there, the screen reader wouldn't be missing anything related to the content.
    • Screen Reader again... It's not good practice to use br tags in webdev unless it's actually needed to break a paragraph or content in your website. On screen readers it will pronounce them as break and that's not good. If you want spacing between elements I consider you use margin or make it a flex container and use gap.
    • Responsiveness: website isn't responsive as it doesn't look proper on all screen sizes, especially mobile screens. You should always check that using the developer tools in ur browser. Also don't use percentages or fixed height as it will cause overflow if the content can't fit on a small screen. Instead use max/min-width/height to avoid stretching in certain areas.
    • font family: in the real world it would be better if you name the font the actual name of the font as if I wanted to contribute to your code and I see 'myFont' I don't know what that is... Is it a custom font that you made? Is it on Google fonts? Where is the file for it? So I suggest that you just put the right name for it.

    Overall this is an easy challenge but the main purpose of these is not to just complete them and move on but to test your semantic HTML skills and how you write code on a smaller level.

    If you write good code on a smaller level, you can do so with a larger codebase.

    But if you write bad code on a smaller level, how can I trust you won't do the same on more complex projects.

    I'm sorry if I may seem harsh, but don't let me discourage you, its important to be able to take constructive feedback in the workforce so you can get better and not look at someone criticizing you.

    Anyways you can message me here and also look at my solution to see how I did it.

    All the best and take care.

    Marked as helpful
    0
  • Dylan Heslop•1,570
    @dylan-dot-cPosted about 14 hours ago

    Nice try on this challenge!

    You have a lot of work to be done tho.

    Don't use percentages for width/height as it will only look good on a certain screen size and thus making it not responsive.

    You also need to make use of semantic HTML like main tag

    It's not good practice to use br tag for spacing... Better to use margins of flex gap to add the spacing as it's not good for screen readers.

    You need to remove the border from the buttons and they should be links not buttons.

    All the best and work hard!

    0
  • Omiromir•50
    @OmiromirSubmitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I'm proud of my skills finding information, it was a little bit tough

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

    challenges like how to seperate button from icon

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

    more about before and after maybe

    Responsive FAQ accordion

    1
    Dylan Heslop•1,570
    @dylan-dot-cPosted 1 day ago

    This is a great solution, it's accessible and well presented.

    I would like to know how you did the toggle animation as well as the will-change attribute.

    0
  • Tarek Islam•40
    @tarekulSubmitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I am most proud of integrating all the knowledge I gained from the QR code component, Blog preview component, and social links profile into this final project for this LP. I am proud of creating this beautiful Recipe card component with lists, and a table.

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

    I had challenged in understanding how to change the colors of the list markers. I overcame this with learning how to target the markers and change the colors. I also had a challenge with creating the table for the Nutrition section. I did not understand how table elements worked so I did not know how to add the border bottom for each table row. I overcame this with research and came to conclusion that I needed to set the table border-collapse to collapse so that the browser recognizes that table data elements are sharing the same border.

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

    Nothing as of now. Feedback is always appreciated

    Responsive Recipe page

    1
    Dylan Heslop•1,570
    @dylan-dot-cPosted 1 day ago

    Everything looks alright, you do need to add some more spacing, padding and line-spacing to some of the elements.

    You can also make use of semantic elements like section and main to make it better and easier for screen reader users.

    0
  • Suman Das•20
    @webdevsumanSubmitted 1 day ago
    What are you most proud of, and what would you do differently next time?

    I am glad to make it responsive without needing to use media query.

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

    I encountered some challenge regarding setting the gaps in between the components. I mindfully used divs to solve it and get the desired result.

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

    On mobile when I rotate screen to landscape, the website is not exactly what I want. Kindly help me solve this problem.

    Blog Preview Card - Flexbox

    1
    Dylan Heslop•1,570
    @dylan-dot-cPosted 1 day ago

    This is a good solution!

    You made good use of semantic tags and that's awesome.

    Here are some ways to improve responsiveness for the mobile screen.

    • remove the height: 100vh this is normally good on large height screens but it's best practice to not set fixed height on most container elements as when the height is too small it can get cropped and don't overflow/scroll.
    • So just use min-height to fix that.
    • That will also fix the issue of when mobile screens are rotated making the height smaller than the width. In this case you can also add a padding: 2rem 0; to put space from the top/bottom of the webpage.
    • for the footer, making it absolute would be good only if the height is enough to fill the card, else it will position itself over the card. Best thing to do is just make it static(default) and put a margin to separate it from the card if you want.
    • for the hover effect, you can make it smoother by adding a transition: 150ms ease-in-out to create a kinda fade color effect instead of having it jumping colors.
    • also consider using CSS variables in ur code to make it modular and easily updated for the colors and maybe spacing If you want.

    OVerall you wrote some good semantic HTML code and by removing fixed heights and using min-height you can make your websites more flexible.

    Marked as helpful
    2
  • shaikh zayed•50
    @undersigned-devSubmitted 1 day ago
    What specific areas of your project would you like help with?

    any review would be awsm:)

    flexbox

    1
    Dylan Heslop•1,570
    @dylan-dot-cPosted 1 day ago

    Looking good! ou used semantic html but it could be extended a bit.

    • You could make those 2 divs section elements just to be more semantic.
    • You have used margin to put all the content away from the edge, it better to just put a padding on the main container and that will eliminate the need for the weird margin you put on the texts and the image. Also note you should use the box-sizing property and set it to border-box what this does is that whatever width you specify for a container it will make the padding a part of that width, ie: width of a div is 200px but there is a padding: 20px on it, without box-sizing it would add the padding to the width thus make it(200+20(leftpad)+20(rightpad) = 240px, but with border-box it will let padding take up space from the 200px so no matter how much padding you add it will remain 200px.

    Well done, take a look at my challenge and see how I did mine

    Marked as helpful
    0
  • Dylan Heslop•1,570
    @dylan-dot-cPosted 1 day ago

    Well done! From a quick look at your code your are overusing the h1 elements as each webpage should have at most 1 h1. So if there was reads "Bootcamp Testimonials" then that could be a h1. So in this case, just use h2/h3 tags. Also you don't need to make the name and "verified graduate" h2/h3 tags but maybe the summary of each Testimonial could be an h2

    Also it's not good practice to use online css, it's better to just declare a style and then style it accordingly in your css file

    Marked as helpful
    0
  • Dylan Heslop•1,570
    @dylan-dot-cPosted 2 days ago

    Everything is good and perfect!!!

    You have been doing well for the semantic HTML but you missed one key part... the main tag that could actually replace your div wrapper. You even called it main-container😅😅

    Other than that, great job, keep up the good work!!

    1