Skip to content
OverviewSolutions
15
Comments
10
Tiago José
@tiago-jv0

All comments

  • Kaman Diwash Shrestha•20
    @KamanDShresthaSubmitted about 2 years ago

    Regarding the responsiveness, how much is my solution responsive? How can I learn to build a better responsive webpages and web applications? Are there any resources that could help me learn that?

    Also, how could I make my code better ? Is the way that I use the div tags correct? What's the proper usage of div tags in real-world applications?

    QR code using HTML and CSS flex

    3
    Tiago José•300
    @tiago-jv0Posted about 2 years ago

    Hello Kaman, great job solving this challenge !!!

    I saw your code and here are some tips in which you could follow to improve it :

    • Your site should have at lest 1 h1 semantic heading so that web crawlers and screen readers know what is the most important piece of content in your site, here's a detailed explain about H1 Tags
    • You should use more landmarks elements to improve your html markup, like section , main headeretc...
    • About the responsiveness part of your question, use you can use @media css feature to change your layout based on some media type and query feature, unfortunately i didn't see any @media in your code, but even tough your site hasn't any @media rule it is still responsive because you used mobile-first approach and it can be views from different screens, however, your site is not adaptative, the same layout on mobile is being presented in table and desktop, please use media queries to make your site more adaptative and improve the design of your solution in tablet and desktop views, you can learn more about media queries here : Media Queries
    • Using div is okay as long as you don't abuse it, before putting a div everywhere in your markup, always think if there is a better element to describe the content you want to put inside, divs are meaningless, if you put divs and spans elements everyone it won't help you with SEO and will make you site not acessible at all.
    Marked as helpful
    1
  • Lisa T•40
    @lisacodesnowSubmitted about 2 years ago

    I found putting a color on top of the photo the hardest but was able to fix by wrapping the image in another div and giving that div a background color. I had a hard time making the photo and business card info the same height in desktop. I used grid and set the height and width to 100% and fixed it.

    Overall, this was a fun project and was proud that I fixed some problems that I was having.

    If anyone has the time to look at my code do you have any advice as a way to come up with the same solution differently? Or by writing shorter code? Thank you.

    Flex and CSS Grid responsive preview card

    2
    Tiago José•300
    @tiago-jv0Posted about 2 years ago

    Hello Lisa, Congrats on solving this challenge !!

    I saw you code and here are some recommendations to improve it :

    • Inside your h1 tag you used span to style the insights word, however, that word is an important one and should be emphasized to the user, a better solution here would be to user the strong tag
    • You used 2 images tag to switch between the mobile and desktop header, i don't need that, in fact, the best way to go about images that switch between device's viewport is to use the picture tag, you can see more details about this tag here : Picture Tag
    • Give a chance to BEM ( Block Element Modifier ) class naming convention, it will improve the readability of your code and give more context about the elements on your markup, you can learn more about it here : BEM Methodology
    • You should use landmark elements to improve your site's acessibility like main and section

    I hope these tips will help you, keep on coding and you will become a great developer !!

    0
  • Tiago José•300
    @tiago-jv0Posted about 2 years ago

    Hello venkat, great job solving this challenge

    I saw your code and here are a few tips you can have a look :

    • An page should have at least 1 h1 tag to describe important content to web crawlers and users, probably it should be the title in this scenario
    • You could improve your SEO by using semantic landmark tags in you HTML like main section footer article header to indicate to the user in which part of the website they are.
    • Consider using BEM methodology as your CSS class naming convention, it will be widely used in your developer job as a frontend.
    • Every image on your page should have an alt attribute that describes the content inside the image, please improve the alt text of the images you used.
    • Take a look at CSS pre-processors like SCSS, it will improve your developer experience when writing css and alonside it will make your css file cleaner

    Good job, keep on working!!

    Marked as helpful
    0
  • Tiago José•300
    @tiago-jv0Posted about 2 years ago

    Hello Macaulay, great job solving this challenge, here are some tips that you can use to improve your code :

    • Your page should have only one h1 tag, you should take a moment to consider about the relevance of your texts and give them a properly use of the HTML tags
    • Give a chance to the BEM methodology, it will help you and others understand the context in which elements are being used and about its styling and possible states
    • Improve your SEO by using correct landmarks to better match your content sections, I really like that you've used main and footer, however, you should separte the sections of your website with the section tag

    Great Job and continue coding, you will be a great developer in the future!

    Marked as helpful
    0
  • Tiago José•300
    @tiago-jv0Posted about 2 years ago

    Hello Benny, great job solving this challenge, about your question, i think that you could use grid-template-areas to help others understand better you layout organization, it is really helpful when you have to lay out a complex design, you can read more about this feature here : https://css-tricks.com/almanac/properties/g/grid-template-areas/

    Marked as helpful
    0
  • Anuar Zamudio Cortes•40
    @ZaphDevSubmitted about 2 years ago

    I tried to do the javascript part with the little knowledge i have atm and i think it could've been more efficient and short, but it gets the job done so i'm ok with that and i learned a lot checking others solutions when i finished :) I would like to know, could there be performance issues of any kind with the way i made the Js code?

    Interactive Rating Component with Sass and Js

    2
    Tiago José•300
    @tiago-jv0Posted about 2 years ago

    Hello Anuar, hope you are doing well, i saw your solution and I have a few tips that will help you improve your code quality :

    • About your ratings section, i saw that you created the ratings section using divs and toggle the active state using javascript, in order to improve this section, you can use custom checkboxes this will improve your semantics as well as code quality, doing that you can get ride of the javascript part where you set the active state when the use clicks the div

    Great job, carry on and you will be a great developer!!

    Marked as helpful
    1
  • Elaine•11,400
    @elaineleungSubmitted over 2 years ago

    Just updated this challenge with error handling and also accessibility functions. I also added a loading screen animation with a slight delay added. Quite like the end result, hope the tabbing works on other screens as well!

    Responsive component with API and data fetching

    2
    Tiago José•300
    @tiago-jv0Posted about 2 years ago

    Hello Elaine, hope you doing well, I am really amazed about your skills in front-end development, you solution is great, one thing that i would recommend is that you add a disabled attribute to your button when your request begins, i noticed that if the user clicks the button N times, it sends N requests, so it would be nice to prevent this behavior, overall, it is a fantastic solution.

    Marked as helpful
    1
  • Tiago José•300
    @tiago-jv0Posted over 2 years ago

    Hello antonio, i saw your solution and i'd like to give you some tips:

    • Use custom radio inputs instead of buttons for your ratings section, that way you will no longer need to switch styles using javascript ( in case you don't know about custom radio inputs, i recommend this tutorial : https://www.youtube.com/watch?v=5K7JefKDa4s)

    • Improve your html semantics, you are using a lot of div elements, there are a lot of semantic tags that you could use in your solution, for example : main, section , button (for your submit button)

    • Try to give a chance to BEM css methodology for your css classes, it will improve your code readability a lot.

    • Try to use sass/scss, it will improve you developer experience when writing css

    0
  • Romen•50
    @romenterSubmitted over 2 years ago

    This challenge its can only be for newbies if you used some library like React or Angular.

    If you be used JS vanilla you be to know:

    Practice and study DOM, i recomend you take a view to ARIA method. Please read the indications in github code if you going to copy this solution.

    have a nice code day 🚀🧡

    interactive-rating-component with ARIA

    1
    Tiago José•300
    @tiago-jv0Posted over 2 years ago

    Could I ask a question ? I'm really curious why you didn't use radio inputs for this one, did you see any benefits using buttons instead of radio inputs ? i think from the perspective of accessilibity it does not makes much sense.

    0
  • Tiago José•300
    @tiago-jv0Posted over 2 years ago

    There are a few things i would recommend you to learn, for exaple :

    1. BEM methodology - is used to improve your css selectors and make your html structure more descriptive

    2. Usage of new layout techniques like Grid or Flexbox as mentioned above

    3. Css variables - so you can put all your repeatable css values inside a central place

    Marked as helpful
    0