Looking to hire developers?
@SinisaVukmirovic
@AdrianoEscarabote
Submitted
👨💻 Hello everyone.
My first project with Typescript, I really liked it and found it very different. I decided to make a slightly simpler project, so as not to get too stuck in the development, but I will definitely make some more elaborate ones, but this one was definitely a lot of fun to do!
Thanks! 😊
@SinisaVukmirovic
Posted
Amazing!
Where do you learn all this stuff?
@EdoPito
Submitted
Hi!! I have added some basic JS to get some exercise in, if you have any comment on the JS part of it please do comment.
I did not want to force the user to get a name,age, location otherwise we would never see the default. However I have tried that and did not succeed, so question is:
How do I get a loop of prompts that keep asking to enter something until you do? Example: let's say you press ok without entering a name the prompt would not go away and say : "You must enter a name to access the page"
@SinisaVukmirovic
Posted
Hello!
Basic JS is not that basic. Very nice functionality!
Wish I thought of that...
Great job! Keep it up.
@ayush-sri16
Submitted
How can a non technical person can become a webdeveloper.
@SinisaVukmirovic
Posted
Hello!
To answer your question "How can a non technical person can become a webdeveloper."
With hard work and dedication!
And I am talking about seriously hard work! And to learn in the proper way, no taking shortcuts and truly learning from what you do, not just to do for the sake of doing...
Learning! Keeping track of learned things, creating your own documentation in README.md of every project...
And a little luck! Good luck!
@ayo-adeboyejo
Submitted
What is the best way to define height and width CSS properties for the HTML and body tags, in a responsive webpage?
@SinisaVukmirovic
Posted
Hello!
You don't define width for the HTML and body elements.
For the height, most common way to do define it is
body {
min-height: 100vh;
}
Most of the time, that is enough. Some browser, thought, also require
html {
height: 100%:
}
Marked as helpful
@Keerthivardhan1
Submitted
unable to implement toggle or hamburger menu for mobile
@SinisaVukmirovic
Posted
Hello!
Watch this Slide in menu
Maybe that helps you with implementing menu for mobile view.
Good luck!
@AndreeaKiara
Submitted
Please tell me how I can improve :)
@SinisaVukmirovic
Posted
Hello!
To improve, start with fixing errors from your report.
This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.
This "All page content should be contained by landmarks" means all non-semantic elements should be inside of semantic elements, and not directly inside of <body> element.
More about semantic elements
Hope this helps! Good luck!
Marked as helpful
@VarunRele
Submitted
Sometimes same advice gets send to us.
@SinisaVukmirovic
Posted
Hello!
Yes, looks like same advice is sent in a row, or we are clicking button a little too fast in a row. Whatever the case might be, its on the API, not the developer.
What is on the developer is not fix errors in the report.
This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.
This "All page content should be contained by landmarks" means all non-semantic elements should be inside of semantic elements, and not directly inside of <body> element.
More about semantic elements
Hope this helps! Good luck!
@Val1on
Submitted
This is the first project that I created so, feel free to say anything about my mistakes and it will help me to improve more. <3
@SinisaVukmirovic
Posted
Hello!
Start by improving your CODE to fix the errors in your report.
This "Images must have alternate text" means <img> elements must have an "alt=" attribute in them with text describing them for the people that can't see the image.
This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.
This "All page content should be contained by landmarks" means all non-semantic elements should be inside of semantic elements, and not directly inside of <body> element.
More about semantic elements
Hope this helps! Good luck!
Marked as helpful
@Notoriousgg
Submitted
Everything is perfect
@SinisaVukmirovic
Posted
Hello!
No, everything is not perfect! It might be "perfect looking" but the code is not perfect.
You didn't use semantic elements in HTML. Error in your report are about that.
This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.
This "All page content should be contained by landmarks" means all non-semantic elements should be inside of semantic elements, and not directly inside of <body> element.
More about semantic elements
Fix those errors to make it perfect. Good luck!
@R-Lemos-prog
Submitted
How to be even more accurate in measuring the dimensions of the boxes when you have a model to follow?
I also noticed a difference in the font of the design and my solution, I don't know the origin... maybe the browser (Brave)?
@SinisaVukmirovic
Posted
Hello!
As JJ said, don't hunt for "pixel perfect" copy. No need to stress over that.
As for font-family, looks correct on my browser (Edge).
@gzandiemer
Submitted
I would like to know better ways to make this design with pure css.
@SinisaVukmirovic
Posted
Hello!
That's an... interesting way to make it responsive... Sadly, that's not the right way.
Its a lot of work, plus, it doesn't look that good. And this is a simple, tiny project, single card, what when you do a bigger, full page/screen project?
Check out others code solution to get the idea how its done.
Good luck!
Marked as helpful
@hesam-fattahi
Submitted
Hey everyone! 👋
For the circles on the background, I've used ::before and ::after. The same thing for the pattern on the component. Is there a better way to implement that or this is fine?
Should the profile name be a heading or p is okay?
Thank you
@SinisaVukmirovic
Posted
Hello!
Before and after pseudo elements for background images are OK, but maybe it would be easier with CSS multiple backgrounds
Did you know you can have multiple image for background-image? Multiple positions and sizes, too.
Check it out, hope it helps!
Marked as helpful
@finkenmann
Submitted
Not so easy to get all the correct colors, font sizes and spacing out of the design jpg. That's why I only approach these values as good as possible ;-) A pro-account only for the figma files is not worthwhile for me at the moment.
@SinisaVukmirovic
Posted
Hello!
I did not do this challenge, but I am pretty sure all color values needed for the challenge are provided in "style-guide.md" file, like for other challenges that I did. You don't have to guess it.
Check out style guide, color values should be in there like all other style things.
Hope this helps!
@gomes-leonardo
Submitted
Guys, I hope you're doing well! In this challenge I couldn't fulfill the background image, someone to help me? Other than that, I completed the challenge
@SinisaVukmirovic
Posted
Hello!
About the background circles... Check out CSS multiple backgrounds
You can set multiple images for background image. Multiple positions for each image.
Check it out, try it, hope this helps you with you issue. Good luck!
@JeremyPaymal
Submitted
Please tell me how can I improve this code and if I used the good way to do it.
Thks.
JJ
@SinisaVukmirovic
Posted
Hello!
Looks good. Your code is fine. Improve it by using <section> instead some of those <div>s. For further improvement check out mobile first approach for future projects.
Good luck!
Marked as helpful
@Mbonnema2022
Submitted
As a new jr developer ,This took me way longer then i expected .Initially i had the project quickly done but my css wasn't displaying correctly.I finally scrapped all my code and restarted from the beginning .My first submission took 3 mos to complete . I am still unsure if there is an easier way but so glad that what i did looks correct ,I did learn that if one thing is not exactly right it can mess up the whole code.I am understanding this code well because it is just html/css but i still a little unsure of grid and flexbox and when to use one over the other.
What is the best practice for flexbox vs grid?
@SinisaVukmirovic
Posted
Hello!
Looks good for a newbie!
It's OK to start over when you get stuck. Practice and experience will make it better. When stuck, get up, step away from the code, clear your head, and when you get back with a fresh "eyes", you will see the problem in your code in no time.
Why did you duplicate your images? And took them out of their folders? Remove duplicate and unused images.
About the "flexbox vs grid" dilemma... There is no best practice for flex vs grid. That is no either-or dilemma. You can use both in the same project. Whatever works better for specific situation.
Marked as helpful
@Ibanezense
Submitted
any feedback is welcome
@SinisaVukmirovic
Posted
Hello!
Looks good. Mobile first approach, too. Nice!
Just substitute that wrapper <div class="card"> with a <main> tag. That semantically correct and would fix error in your report.
Marked as helpful
@Lizz3108
Submitted
What did you find difficult while building the project? The biggest challenge for me was to make it responsive, using media query. I didn't use them before and this was the first time approached the concept.
Which areas of your code are you unsure of? Personally, my media query, since it was the first time there's room to grow.
@SinisaVukmirovic
Posted
Hello!
Please, have your styles in a separate CSS file.
Also, that ".attribution" element should be outside of "main_square" element.
To improve at media queries watch this: media query
Good luck in improving!
Marked as helpful
@harshi10
Submitted
all comments are welcome
@SinisaVukmirovic
Posted
Hello!
You forgot to publish CSS file :)
@Noppanutt
Submitted
@SinisaVukmirovic
Posted
Hello!
Use semantic elements in your html. Errors in your report are mostly about that.
This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.
This "All page content should be contained by landmarks" means all non-semantic elements should be inside of semantic elements, and not directly inside of <body> element.
More about semantic elements
Marked as helpful
@dimalindermans
Submitted
Hi! This is my first challenge on Frontend Mentor. I would be glad to recieve a feedback. Thanks!
@SinisaVukmirovic
Posted
Hello!
Looks nice! Interesting CSS resets.
The use of semantic elements needs improvement. That <article> tag should really be a <main> tag, and the <div> tag should be a <section> element.
This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.
This "All page content should be contained by landmarks" means all non-semantic elements should be inside of semantic elements, and not directly inside of <body> element.
Take a look into semantic html to fix these. Good luck in the future projects!
Marked as helpful
@UdohLawrence
Submitted
It wasn't easy, picking the background color of the page - I succeeded finally, though. Now, I am not sure the page is truly responsive. On the whole, this was a nice challenge for someone just starting out in web development. Looking forward to more opportunities to take my skills to greater heights.
@SinisaVukmirovic
Posted
Hello!
What do you mean - picking background color? Why would you pick it? The challenge provides you with all colors used in the project, just read the "style-guide.md" file. Everything is in there...
Page is responsive.
To improve yourself, start with using semantic elements in your html. Errors in your report are because of that.
This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.
This "All page content should be contained by landmarks" means all non-semantic elements should be inside of semantic elements, and not directly inside of <body> element.
More about semantic elements
Good luck!
Marked as helpful
@guiodrumond
Submitted
My alternative was to use document.querySelector. Was that the best alternative?
@SinisaVukmirovic
Posted
Hello!
What do you mean "alternative"? Alternative to what?
You JS code looks fine.
@Asfer-dev
Submitted
In what ways this could be better? What practices would be recommended to take to write better css?
@SinisaVukmirovic
Posted
Hello!
Definitely start with using semantic element in your html structure. Errors in your report are mostly about that.
This "Document should have one main landmark" means you are missing <main> semantic element in your html. Landmark just means element.
This "All page content should be contained by landmarks" means all non-semantic elements should be inside of semantic elements, and not directly inside of <body> element.
More about semantic elements
Hope this helps in your improvement!
