Hey there! It took 5 days for me to figure out this complete solution of code, and I know it's not exactly the same preview given in the challenge. But as a newbie, I tried my best. Any feed backs would be much appreciated. Thanks in advance :)
Hey Deva, Kudos on finishing this project. I know it took a lot of time but i'm very sure you learnt a lot from it and that is the major objective. I checked your code already and i figured you need to refactor a lot of things. Don't be discouraged, it is perfectly okay, i'm still learning myself.
I will be suggesting some changes in your code, both html and your css file. but i will start with the html file.
(1)You should remove all inline styles you have since you have your css file and you might get confused styling it, that is the height and width on the 'img' and color styling on the span.
(2) change the 'top-head' tag to h1 or h2.
(3) You can also change the div tag on your li to span.
NOW CSS (1) Always start your css with this code
*{ margin: 0; padding: 0; box-sizing: border-box;
}
It removes unneccessary margins and paddings that might stress you later.
(2) Don't put flex on your body, instead put it on your '.outline' container, your body can just contain background color and font family instead.
(3)On your .outline, chnage display to flex, change width to 80% and add a margin of 95px auto. You do not need to start your selectors with 'div.' by the way, just '.outline' will do the job.
please let me know if you are following so that i can type the rest of the changes, i still have have some things to explain and type here. you can just reply this and let me know.
Feedbacks will be appreciated!
Good Job Anjo. However, i was trying to check your code on github and i discovered the link is broken. Can you fix that so that i (or some other person)can point you to how to make the design better?
Overall, Job well done!
Good day guys! This is my first challenge here on frontendmentor.
I'd like to ask for your opinions on my solution, especially using media queries, I know I used more than expected which is bad practice, I also want to know if there's a better approach to the challenge without using media queries. Thank you all!
Also, the text sizing and spacing gave me issues, together with the individual boxes' height and width
Good Job John, Clean design and really awesome effort.
About your question about Media Queries, what i would do is to start by wrapping my boxes in a container div(you can also use your main too like you did ). My next step would be designing at about 315px (Mobile-first), then add breakpoints at about 481px for tablets and 769px for desktops(and display the container div as flex at this point). So, instead on using max-width with your media-query, you are going to use the min-width property.
Overall, it's a very awesome design.
Welcome to the frontend community bossman.
Hello FrontenedMentor Community,
This is my first landing major design and i would love an imput and suggestion. I'm a bit worried about the breaking points and the overall layout of the design.
Thanks dwhenson for taking your time to check and point out these errors. I really appreciate. I'll make amends and repost the solution. Thanks for the kind words too🙂
Hello THB-02,
Your design looks super good and clean. I just want to point you to the email section of the form. I think it'll be really cool if you can add another statement that decides if the mail is valid or not and a statement to check if it is empty just like the others. Your email section ticks okay even if i type 'ssQs@ddd' without the '.com' and i believe it should read 'Looks like this is not an email' instead.
you can add a statement to check if the mail section is empty, another one to check if it's invalid.
something like:
if(mailValue===''){
} else if (!isEmail(emailValue)){
} else{
}
I believe that's just the minor change, other than that, you're on point.
