Check my conditions and give me advice how to do it better. thx
If you have some ideas, let me know. thank you
Making the positioning and sizing of the cards responsive was initially quite difficult, because the card was resizing but its text content was not scaling accordingly, since the only way I know how to do this in CSS is using viewport relative lengths, which does not work in the way I wanted. As a solution, I implemented the text using SVG.
Everything`s perfect. Except i have ultrawide monitor, and front and back card are positioned badly, you need to position them absolutly to the gradient side. It maybe look ok on your monitor probably 4:3, or 16:9, Or try this, hold ctrl and scroll down with mouse. you can increase or decrease zoom and you will see what problem is. Otherwise code is perfect. Validation detailed.
I tryed to think ahead, but still i have to rework some HTML structure when i build breaking points. I use resolution switching for pictures now.
What challenges did you encounter, and how did you overcome them?HTML planning, not too much elements as parents. Not to go too deep. Flex is magic.
What specific areas of your project would you like help with?Just everything i gues.
I tryed to think ahead, but still i have to rework some HTML structure when i build breaking points. I use resolution switching for pictures now.
What challenges did you encounter, and how did you overcome them?HTML planning, not too much elements as parents. Not to go too deep. Flex is magic.
What specific areas of your project would you like help with?Just everything i gues.
I checked your project as well.
Looks perfect to me.
But, nothing is perfect until its perfect right?
check this video https://www.youtube.com/watch?v=_-aDOAMmDHI&ab_channel=KevinPowell
sometimes you are using ems, sometimes rems.
what i understand is : use rem units only for fonts and em units for margins, paddings and other sizes. Of course you have to check what parrent is your font. I made function for it in sass. it counts for me. i call it em function. it is target pixels / content pixels = em value. In practise i want my font-size in H1 elemt for example size 32px, first i set it to rem 32 / 16 = 2 rem. And if H1 elemnt has some margin or padding i set it with em units. In my function i write it like this. padding: em(32, 16) and my function automagicly set it to 2 ems. But i cant explain it very well better check the video. and if you check my main.scss i always add commentary text what size i set for font size, to better calculate em units and of course lots of reading in developer console. or if you have different opinion you can share it with me. thx for your time
I tryed to think ahead, but still i have to rework some HTML structure when i build breaking points. I use resolution switching for pictures now.
What challenges did you encounter, and how did you overcome them?HTML planning, not too much elements as parents. Not to go too deep. Flex is magic.
What specific areas of your project would you like help with?Just everything i gues.
Excellent review, thx. I have to test it like you said. Yes i have mediaqueries in pixels, yes its better idea to use relative units. right. I never tested at 30px default font size.
i hide my package.json. but i can save it to the repo. Give me a sec.
there in scss folder is debug file -> scss/partials/_debug.scss and if you change in _general.scss $debug:false to true, it will show you all bad things. But you can check in the debug file how it works. I learned some thinks from kevin powel about sass.
You can show me some your project. Id like to share knowlegde with you.
Here is my last project what i did from frontend mentor.https://mirjax2000.github.io/password-generator/
My solution looks quite similar to designed one. I created simple button click effect using event delegation but its not perfect.
What challenges did you encounter, and how did you overcome them?The most demanding for me was image behavior. I'm still not sure about its position, size etc. in responsive way. I overcome it with some height changes in image wrapper combined with image properties.
What specific areas of your project would you like help with?Any opinions will be helpful 🫡
I think its perfect. Only one think is wrong. Your script link should by last thing to load in the page. Complex JS script will not work. Here check this out. Page is loading its content from the top. When it reaches js file, everything stops, coz js has top priority. Then continue. Its mean that it slow then process loading the page. Then If you dont envelope your js script into function ducument ready techniques, your js will not work if you make some DOM adressing. Simply js script will start even before the page is loaded. And DOM is not ready yet. If you simulate your code with slowing your bandwith to very slow, your code wil not work. So put your script.js abvo last element body, or envelope your script into document ready function as is decribed in the article
https://www.frontendmentor.io/learning-paths/javascript-fundamentals-oR7g6-mTZ-/steps/665596db9499fbaebe3dcbb0/article/read
The shifts from mobile to desktop and using different images per screen size was an interesting challenge since at the time, this was a new concept to me (I originally did this a good while back but had to go back and tweak parts of it more recently).
What challenges did you encounter, and how did you overcome them?The blueish color of the image was a little tricky and I couldn't figure out a way to do that directly with my image so resorted to changing the background color of the text element that went on top of it and adding some extra padding to give it that color.
What specific areas of your project would you like help with?Anything you like.
Hi i checked your code.
you need to make 1440 px container. Some peeple have very wide monitor my is 5140px long. so when i full screen this two photos are one meter on the sides form the center fo the screen.
max-width: 1440px;
dont use IDs, Save them for forms and javascript. There are other techniques how to target elements. Check another selectors, for example
nth(1)child:
last and first child
first of type
last of type
:not()
> *;
and many more.
too much DIVs, use MAIN, Section,article,aside, footer,nav.header etc... It will help you with SEO evaluation and also webbrowser will know beeter how to print the page on the screen, and also some readers for deaf peeple will better understand what section they are in.
try BEM method to better describe classes in HTML.
dont set font to fixed values in pixels use REM or EM units. Some user has different default font size in their browser, if you hradcode it it will displeay at 18px, even they sets to 24 for example.
that footer is mess. sorry for that.
<div class="bottom">
<img src="images/mobile/image-footer.jpg" alt="" class="footer-img-mobile">
<img src="images/tablet/image-footer.jpg" alt="" class="footer-img-tablet">
<img src="images/desktop/image-footer.jpg" alt="" class="footer-img">
</div>
this is bad aproach. First of all what borwser do is loading HTML structure. CSS and Javascript after all HTML. those images will load with HTML and they will be displayed antil browser load CSS codes. It will also take lot of bandwith, every picture has some size and it will slow downloading all site. Instead use picture elements and resolution switching technique. It is hard one, but as you see designer of that challenges do this whit pourpuse to use that.
Also work on Fonts, there is bad fonts. Try to host them from your side. @font-face is the way.
that thing with backround picture on footer is big one. You can use position that picture element to your parrent. or give footer element some width and hight and use background picture as filler.
i hope i help you a bit.
