..
What challenges did you encounter, and how did you overcome them?..
What specific areas of your project would you like help with?..
...
What challenges did you encounter, and how did you overcome them?...
What specific areas of your project would you like help with?Any comments to improve my work and skills are welcome. :)
Check the media at the values around 769px, for example, at 770px, The design is overflowing.
I would advice to experiment using max width and min-width values, Max-width sets the max-width of the container, this means that once it reaches this value, it won't stretch anymore, Min-width does the same but the container can't be smaller than that value. Use this to make the content stretch automatically, thus making it more responsive.
Hi folks, Thanks for reading this!
I managed to use the same element for the tooltip on mobile and desktop. I wasn't really sure at first that I could to that but it worked. Quitte happy with that :). It uses the same JavaScript and CSS code.
Next time, I want to be better with ARIA attributes. I know that my code is accessible but I want to do a better job with that.
What challenges did you encounter, and how did you overcome them?Not many challenges. The only one I have in mind is related to CSS readability. I wrote some nested CSS, which I do like, but some parts could have maybe been better. I am thinking about the tooltip element on desktop.
What specific areas of your project would you like help with?Mostly the HTML and CSS. I am okay with the JS part.
Have a nice day, Tom.
There are some improvments that you can do:
In your footer, I would recommend creating 2 divs, one div will contain the image of the author of the article, then you create another div that contains the author and the date of publish. In the second div, you would put the button of the article (you can create a button element, then you copy and paste the share svg that frontend mentor gives you and then you put some text in the button, then you style it to have 0 font-size so screen readers can undestand that the button is used to share content). Now, you style the div that contains the 2 divs, use display:flex, align-items:center and justify-content:space between. With this, your footer is perfectly aligned and your button is in the far left of the article.
When users display your article in an ipad, the layout goes far down, be careful with that. I would recommend you to investigate about how can you center content perfectly using grid or flexbox. In my body, I display:flex, justify-content:center (to put it in the center of the page in the X axis) and align-items:center(to align it to the center in the Y axis). This only works if you put a height of your body to 100vh and set a width to your wrapper.
*I would also sugest using max-width in order to avoid an excesive stretching of your article
I hope this comment helps you to make better and more responsive designs.
.
What challenges did you encounter, and how did you overcome them?.
What specific areas of your project would you like help with?.
Nothing differently.
What challenges did you encounter, and how did you overcome them?No challenges.
What specific areas of your project would you like help with?Nothing atm.
To avoid that line warp in the colored lines of your cards, set a top border with the same border width as the border radius.
I'm getting the hang of Media queries...
What challenges did you encounter, and how did you overcome them?That image wasn't playing nicely with what was needed... I ended up spending hours on it because it went everywhere and was either really large or really small...
Getting it done
What challenges did you encounter, and how did you overcome them?Position absolute
What specific areas of your project would you like help with?....
A few tips to help you out
1- You can use a div as a container to contain the image, then you set the image to use a width of 100%, nos style the container to have a padding and you have the image centered with white space.
2- yo can style the circles or the numbers of the lists, in your li elements of the list, you can use li::marker, the use the color property to give them any color
3- if you have a container that has all the elements of the recipe, put padding in that style so it looks better
I made some changes to the original prototype and made it an exclusive social links page for me.
What are you most proud of?
What would you do differently next time?
em or rem units.So em is a unit that is used to re-size text taking into account the font size of the parent element, so ,if you have a p element inside a div, if you set the div element to have a font size of 20px and the p element to have a font size of 1em, then in the browser, the p element will have a font size of 20px, if the p element has a font-size of 2 em, then the browser will put its font-size to 40px. It scales depending of the parent.
If you have lot of elements inside of a same div and they differ in font size, but you want to keep the same ratio of font-size. You can use em on the children, but if you have multiple parent divs with childs, it may not look consistent.
The better alternative is to use rem units, which calculates its font-size using the root element, which in almost all cases is the html element.
Remember, that the font size of the root element is 16px, unless you change it.
1- The colors of the text elements are not equal to the design 2- The text in both areas is a little bit bigger than the design 3- It need more padding in your container to make it look nicer 4- Add a little bit of border-radius to your container and your qr-image
You can use 2 <p> elements and add different classes to it so you can style them in css
