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.
Desejaria o texto mais alinhado a forma.
What challenges did you encounter, and how did you overcome them?O Grid ainda é um desafio para mim.
What specific areas of your project would you like help with?Grid.
Hi i checked your code.
In HTML you are using too many DIVs. Use HEADER, FOOTER,ARTICLE even if you are inside element. Card element has also header and its footer.
you set for every element on the page font-size 12px.
* {font-size:12px}
that will be problem with default font in the browser. Use REM or EM units instead. Not sizes in pixels. In responzive pages fixed sizes are bad strategy.
grid is good, but you have problem to keep mobile design.
see you
page icon karma, i noticed. Nice one.
Html - too many divs. Use other elements with purpose. Header,main,footer,aside,section,article and many others. It helps browser better understand what is he displaying, also good for readers and also it helps better evaluate your page with SEO. Then you have better score and your site will be displayed higher.
--root colors:
:root {
/* Primary */
--Red: hsl(0, 78%, 62%) ;
--Cyan: hsl(180, 62%, 55%) ;
}
What happened if your designer or contrator or you will decide that color hsl(0, 78%, 62%) have to change to green? so your variable --red: will be green. And that is a mess. use something neutral for that, for example
:root {
/* Primary */
--header: hsl(0, 78%, 62%) ;
--paragraph: hsl(180, 62%, 55%) ;
--border-calculator:blue;
--border-karma:yellow;
--border-superviser: darkgreen;
--border-teambuilder:red;
}
I like your flexbox styling.
see you
I am most proud of beginning to develop a sense of how to structure and manage my build process. The last several projects have really opened me up to accepting feedback from the community and learning where I may need improvement.
What challenges did you encounter, and how did you overcome them?In this project, I was learning Less, which was less intuitive as Sass while at the same time being more minimal and closer to vanilla CSS. I went back and forth through the docs while implementing what I'd learned and refactoring.
What specific areas of your project would you like help with?If anyone has any feedback on my Less implementation, I'd be appreciative!
can you put on the scale sass and less and tell what is better? Also another preprocesor is stylus. Will you gona try it?
Myaby in couple years, we dont need any preprocesors at all, all best funkctions are alredy in css: variables, nesting, and many more will come.
I'm proud that I manage to make it nearly like orginal.
What challenges did you encounter, and how did you overcome them?STYLING THESE LISTS!! I hate it so badly so I decided to set list style to none and style all by myself using ::before property.
What specific areas of your project would you like help with?I produced a lot of redundant code. I think it could have been done more simply
Hi,
You did it exactly as i did. I mean that pseudoelements. Only one thing is missing and that is color. That before elements font has different color then text inside.
For that repeating your code.
declare one li: before{ here insert everything what has all li:before common - size,color,etc.., without content""; then make your nth elements only with what has to be change.
.instructions-row:nth-child(1)::before { and here insert what is changing, and that is content"1.")
.instructions-row::before{
font-size: 1rem;
color:black;
line-height: 1em;
etc...
.instructions-row:nth-child(1)::before {content:"1."};
.instructions-row:nth-child(2)::before {content:"2."};
.instructions-row:nth-child(3)::before {content:"3."};
.instructions-row:nth-child(4)::before {content:"4."};
or if you use Sass preprocesor you can write this short code - it is cycle.
@for $i from 1 through 6 {
&:nth-child(#{$i}) {
&::before {
content:'#{$i}.'
}
}
};
rest is perfect. I am also strugelling with code repeating. I have to practice more, and even before i start code some design i have to project some points where i will use same code.
Good job. thank you.
I think responsive design is kind of annoying
Hi i checked your solution
on the first check i see that you did not use Young serif fonts for headings elements. Also your font sizes are different from the design. Maybe you think it is not so iportant, if contractor give you design to code by you, it needs to be pixel perfect. For example if you work for mcdonald, he gives you hex codes of their colors pallete, and if something is even little bit different, he will not pay you. It must be perfect at all circumstances.
also your last list item "nutrition -> fat" has bottom border. it is not in the design.
preparation list item list style type dots has wrong color.
And i see you made it by tailwind hosted form CDN. Good job. It is nice and looks easy. I tryed bootstrap, but i see tailwind is more precise. and what i see you solved that numbers from <ol> has different colors than text inside <li> element.
<li class="pl-3 font-bold text-[#94536f]"> and span child nas black text, nice one.good job. You already are master.
Alright, I think I did it just fine.
What challenges did you encounter, and how did you overcome them?color codes and font sizes, I figured it out on my own.
What specific areas of your project would you like help with?how to read font size, weight, family, color codes and all on the figma files that front-end mentor provides.
I am asking it generally, not for this specific challenge. I didn't get any figma file for this one, just an image of the design.
Figma reading - sometimes the designer will write all color pallete and sizes into specific side, and for there you can read it, or you need to go inside main parrent element , click by mouse and you see all colors and fonts on the right panel, and form there you can paste it in to zour project, or another way how to do it, is if you click on the figma element by right click into context menu you select copy code as css, and there are all information as well, sizes,family,colors,line-heights, etc ...
and back to your code, HTML structure is good, but you overuse DIV elements. We have HTML landmarks. Browser will better know what it is diplaying, and also it has some poitns to SEO evaluation. put main elements into <header> if is it header, <nav> if is it navigation, <main> if is it main content. <article>,<section>,<aside>, use them.
You made only mobile version. If you want to switch to desktop version you need to create break point by mediaquerie and reconfigure changes. theme - responsive design, dynamic content,mediaquries, flexbox,gridbox. you need to discover these.
I now feel familiar and confident in building blogs, but I aspire to enhance my CSS skills further.
What challenges did you encounter, and how did you overcome them?In this challenge, I encountered two main obstacles. The first was styling lists, and the second was styling tables. I tackled these challenges by reading the documentation on how to style them effectively.
What specific areas of your project would you like help with?styling list
Hi, checked yor solutions. some points what i saw.
Your width of container or wrapper is too wide. You set it in t0 1312px. and also if you set some width to the main element you need to centralize in to viewport. by margin 0 auto, or by flex or grid.
Dont use fixed values for font sizes. dot set font-size: 28px, use rem units or em units instead. if you hardcode it into 28px, people with default browser setting higher the 16px will have troubel to read your fonts.
You dont need to create table. yes it is good for practise, how to make tabel, but i thing tabels are obsolete now, if we have grid and flex. or you can do it even without flex or grid, just mage parent block, inside 2 another inline block width 50% width.
rest i see you understand lots of css and html. Maybe i did not like tree structure, article inside article inside article. It will work yes, but SEO will give you less evaluation.
see you.
