I used mobile first web design.
Ilesanmi Emmanuel
@IlesanmieaAll comments
- @CarlTheBeginnerSubmitted about 2 years ago@IlesanmieaPosted about 2 years ago
Carl, I am amazed with your works. I took my time to review your code. I liked the way you wrote the codes, the custom CSS, the way you commented your codes, the way you analyze everything.
Cudos and God bless you. Keep improving
0 - @abdelrhmanKhSubmitted about 2 years ago
HI, Community hopes to Help me with a good way to show this bg tablet pattern.SVG on the right place as I did it by position absolute but find out that the page has an x direction scroll So I put overflow-x on the body but nothing changed.
I Tried To change the relative and some other thing but end up with the same result so I removed it and decided to upload it without the tablet
hope you give me Your opinion on the Work done on this project
@IlesanmieaPosted about 2 years agoHello Khalil, Glad you attempted this challenge and completed it, CONGRATULATIONS!!!
Well I personally previewed your codes and your websites both the desktop view and the mobile view so I came up with these suggestions to help your codes to be better.
- Regarding the domain name for your site, try to avoid using your name as the domain or subdomain name for a project like this since it's not your portfolio. These are the reasons below
- Use the name related to the project for domain name during hosting. For a project like this, try to use managehurdle.github.io , manage.github.io e.t.c if taken try another related name to the project you are working on which sometimes even exercise your critical thinking.
-The reason to avoid your name is look professional to recruiters. Also when sharing with familes, friends,strangers e.t.c It gives them an insight into what they want to visit.
- For the background images: I suggest you nest them within the
html
tag and thebody
tag on the CSS external files. This code snippets work for me
background-image:url('images/bg-tablet-pattern.svg'); background-repeat: no-repeat; background-position: bottom 45% left -350px; background-size: 50%; font-family: rocko; } body{ padding: 4vw; background-image: url('images/bg-tablet-pattern.svg'); background-repeat: no-repeat; background-size: 60%; background-position:top -100px right -190px; color:rgb(36, 45, 82) !important; }``` I copied this from my solution to this particular challenge so as to give you idea to how you could solve these problems. With the help of `background-position:` in CSS you could be able to adjust them to suitable screen sizes but you can try to check on my own codes solution to this on Github [ilesanmiea](https://github.com/Ilesanmiea/manage.github.io). But **Khalil** you have done amazing well, I like your CSS custom properties. In all you do, always remember that Sky is not your limit but Heaven is. **Happy Coding!!!**
0 - @MamieNorrisSubmitted about 2 years ago
Hello guys,
Hope you're doing great ! Just finished this project. I must say I am really proud of myself. When I started this one I had absolutely no idea how to display those fours containers but thanks to Google I managed :D
I only have one issue though: I used media query to make my project responsive. It works BUT only on desktop, it doesn't work when I open the website on my phone. I had the same issue for all my projects (realising just now) and I have no idea why. The media query looks fine.
Could you please have a quick look at my CSS file, right at bottom, to see what's wrong ?
Cheers !
@IlesanmieaPosted about 2 years agoHello Bryan, I am glad you are proud of yourself in this project. I have previewed your website and see that you are doing well because responsive on my mobile Nokia Smartphone.
I went further to check your Codes on Github which looked nice and professional. About the Media Queries, I am suggesting you use
@media (max-width: 600px)
instead of@media (min-width: 600px)
for mobile screens.-
This shows that the particular units or pexels as used in your codes will work for screens from 600px downwards.
-
But
min-width
would only work for screens from600px
upwards.
If at all you want to use the
min-width
try to state for others smaller screens like500px
below.The reason is because the
1 -
- @olumideeSubmitted about 2 years ago@IlesanmieaPosted about 2 years ago
Hello Olumide, CONGRATULATIONS on your completion of this particular challenge. You have done very well. I previewed your website and also your codes on Github, you did justice to the challenge. I rate you 4.5 out of 5. You wrote a clean code, made use of the CSS GRID to justify the containers.
However, just a suggestion on your domain or site name you used during the hosting on the GitHub Pages which is this. Instead of using your name, Olumidee as the subdomain name. It is always better to use a name closely related to the project you are handling for example, name suggestions for a product like this could be as follows fourcards.github.io, cardscontainer.github.io e.t.c. though the names could be taken already but keep names related to make your work more beautiful.
The benefits could be as follows;
-
When sharing your projects with your team, your friends, family or others, it makes it easier for them to relate what they are about to open rather than your name as a domain name because it could sound like a porfolio website using your name as the domain name.
-
don't think you can always use your name as the site name for every project you submit so for the compilations of your projects. Using a name related to the project for hosting will make you attract or sounds a pro to your recruiter.
Above all, your personal preferences matter. Just go for what you think is right. These are my proven suggestions I believe could raise your career. God bless you and keep working till you get better remembering that the sky is not your limit, Heaven is.
Let me know if this comment is helpful by marking as helpful or replying this. We shall meet at greater heights.
0 -
- @hectorjbdSubmitted over 2 years ago
Hi .. I need you feedback's please!
@IlesanmieaPosted over 2 years agoHello Hector, you have done well having attempting this challenge. Cheers!
But there are few things I'd like to say to help you get better with time. I opened your site to review it for our betterment.
-
Try to use fancy name when hosting your challenge on any hosting platforms like Netlify,Vercel or GitHub Pages. Instead of using https://bespoke-ganache-fd66fc.netlify.app/ you could rename the site under site settings into something suitable in Netlify Dashboard to related name to your proposed site that's available. For Instance, for this particular project you could use a related name to the projects like https://ordercard.netlify.app, https://orderbox.netlify.app, https://ordersum.netlify.app etc which makes your custom domain name more meaningful when sharing with friends and also makes you sound professional when a recruiter is trying to go through your portfolio. I believe you may love it too.
-
For screen readers i.e accessibility purpose and Search Engine Optimization try to stick using HTML5 Semantics like you made use of
<p class="change">Change</p>
instead use<a class="change">Change</a>
which will render it clickable as orginial designs implies.
Hector, you have tried your best but we can improve with time,consistency,hardwork and importantly God's help. Kindly, let me know if my feedbacks are helpful by your reply and also clicking the helpful button
0 -
- @wonuola-ySubmitted over 2 years ago@IlesanmieaPosted over 2 years ago
wonuola, you are doing well. Keep working till you become the most sought-after Frontend Enginner out there.
Marked as helpful1 - @HolatSubmitted over 2 years ago
I'll love feedback. Thanks, I appreciate
@IlesanmieaPosted over 2 years agoTomi, welldone for taking up this and succeeding at it. Cheers!
0 - @DanielatongeSubmitted over 2 years ago@IlesanmieaPosted over 2 years ago
Congratulations Daniel for your hardwork in completing this project. Cheers!
0 - @eneyedevSubmitted over 2 years ago
Comment's and Correction are encouraged
@IlesanmieaPosted over 2 years agoEmmanuel Abraham, you really are doing great and the syntax are good. Keep Improving with time.
1 - @BabyDeeeSubmitted over 2 years ago@IlesanmieaPosted over 2 years ago
- The image is an SVG file
- View the source code of the file in the browser
- Copy and paste on your editor then edit the file at the
fill:#fff
then make use of it by parting it on the editor again
Marked as helpful0