The initial advice and header are just placeholders.
Should I have handled the API differently? It seems to respond very slowly to requests after the first.
Any feedback about CSS and accessibility is highly appreciated!
@johnv2309 you did well on this project.
There's nothing wrong with your JavaScript, It's probably your internet. Every other thing is ago but if you still insist on changing the code for the API calls, you can check my solution here.
Cheers!
Finished this a while back and forgot to post the solution. Had some trouble at first to get the api to work with github pages but found a solution to that. Any feedback is welcome! Thank You!
Hello @shaughnroque, congrats. You made a beautiful project. I have some suggestions for improvements which you can add upon your consideration.
h1 before any other headings. You can change this <h2 class="id">ADVICE #</h2> to <h1 class="id">ADVICE #</h1>.Also, change <h1 class="quote">""</h1> to a paragraph element or blockquote.
I know you can solve this. Cheers!
The mobile nav design was an interesting one .. I did it my way tho :)
Hi @Merxibeaucoup, congrats on completing this challenge. I have a few things I think you should do if you would:
The nav bar can't be closed, I had to refresh the page to make it go away. Kindly, follow the replies above to solve that.
The background image for your .header div is moving from its place. Add a background-position: center; to make it go nowhere.
Keep pushing forward on your coding journey. Cheers 👍
i know its not perfect but it was fun 2 make it work :)
Hello @vampmora, well-done on trying to make the code work but there is a little change that can be implemented if you will:
role="contentinfo" attribute to your .attribution div. The former becomes:<div class="attribution" role="contentinfo">
</div>
👍 Enjoy your coding journey. Cheers!
Building the layouts of this landing page is what i find difficult and placing text on the page was challenging. I would love get some feedback for this project.Thank you
@Omeshcoding great work. Kudos
There are a few things you can do as per accessibility.
For the rest, I must say, you're good.
The quote generator is done.
Constructive criticism is welcome
@Katleho-codes you did a good job but you didn't use the API provided. You can take a look at my solution @ my solution
Your img tags don't have alt attributes. It's good practice to always include that
<img src="./images/icon-dice.svg" alt="Dice image">
I guess this is greAT. wELLDone
do you have any suggestions? What do I still need to work on?
@stac4uo, a good job done. You need to work on the fonts, try using the fonts specified in the style guide. You can go through this website and learn how to use Google Fonts
Your website is responsive which is good. Kudos!
It was a difficult design for me, but I learned many things. Please take a look and tell me what to do better
@OUSSAMAACHICHE. Well done on this project. You've definitely put in the effort. Kudos!
Your website is responsive which is great but there's a little problem with the attribution. It would be okay to add
.parent {
margin: 20px auto 40px;
}
which will create space beneath the .parent class.
As for the attribution, this would be fine
.attribution {
font-size: 11px;
text-align: center;
position: relative;
bottom: 20px;
}
Good luck and keep practising.
I also recommend viewing the reports generated for you.
So far this is what I could come up with. Your reviews will be very appreciated. Thank You
Hello Dennis, great work! If you don't mind, I've got some tips for your project's accessibility.
After using an h1, it's good practice to use an h2 but you used an <h3 class="parHeader">. Changing this in all places you used it to an h2 is better for your website's accessibility. Mind you, only one h1 is needed on a web page.
Add an attribute role="contentinfo" to your <div class="attribution">. It represents the footer tag which happens to be absent in your HTML code.
Great work building the mobile view. Visit W3Schools to learn more on Responsive Web Design.
I haven't Learned JSON data handling, so entered the data manually. Any further improvement and suggestions will be appreciated. Happy Coding :)
Hello @codefolk, great work you've got here. Congrats! If you don't mind, I've got some tips for you.
Span tags are used for inline formatting. In your <span class="column-view"> change the span to div
Also, for the seven cards you created, use a section tag, not an article tag. Article tags are meant to have headings and in this scenario, there are no headings.
Great work with the mobile view.
You can check my solution for more clarifications @ time-tracking-dashboard
questions: (1). how do you make it a mobile view? (2). I did'nt quite get a clear css style guide so i had to make mine, do you think it's close?
Hello Alozie, great job you did here. Congrats!
@media screen and (max-width: 375px) {
/* your code goes here */
}
For more study on Responsive Web Design, visit W3Schools. Don't forget to google search for queries like how to make your website responsive. You can also visit the Resources page on Front-End Mentor.
Layout: Your viewport for desktop should be 1440px and for mobile 375px.
Colors: The colors for your project begin from the hsl keyword e.g Soft blue: hsl(215, 51%, 70%) means hsl(215, 51%, 70%).
Font size: Your paragraph should have a font size of 18px.
Font: Go to the URL https://fonts.google.com/specimen/Outfit and select the font weights: 300, 400 and 600. Link the font to your CSS as such @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap'); at the top of your CSS page. Then do this:
body {
font-family: 'Outfit', sans-serif;
font-weight: 400;
}
Note: Change your font-weight where applicable.
I hope I was able to answer your questions to a helpful level. Do enjoy your coding journey
Please tell me how to fix bad value problem.
Hello Yashvir Singh, great work you've done here. Thumbs up!
In addition to the corrections @correlucas pointed out. These are some things you could do to fix your project's accessibility and HTML validation issues.
Accessibility
role="main" to <div class="profile">. This makes your document have one main landmark.HTML Validations
For your images, bg-pattern-card.svg and image-victor.jpg. Use your internal CSS for the styling, rather than inline. The syntax you used is deprecated.
Change this <hr width="100%" height="1px" style="margin-top: 8%;"> to <hr style="margin-top: 8%;height: 1px; width: 100%;">
I hope this helps and I wish you a happy coding journey!