@sgonzalez55Submitted about 1 month ago
Latest solutions
Responsive recipe page with media queries and many colours
Submitted 8 days agoOne of the main issues I struggled with was identifying the colours as the changes between these were to subtle. Any pointers on this for consistency moving forward, or anything else you notice I am happy to receive feedback on. :)
Social links profile card with hyperlinks and flexbox
Submitted 10 days agoI'm not sure that the card is aligned correctly in the desktop view as the jpeg seems to have more space at the top and bottom of the card.
Blog preview card with flexbox and media queries
Submitted 10 days agoIf someone can explain ways to use the fonts in the design files without searching for these on Google Fonts please?
Is there another way you would have achieved this design without using media query for smaller screens?
QR code component using flexbox
Submitted 12 days agoSomething from this project was the paragraph text, it's like there's an indent before the word 'scan' in the example but not in mine. I wondered what I should have done differently here?
Latest comments
- @Joan-Bell-FayePosted 8 days ago
Good job, you've made a great job of the layout! Consider using a % or viewport width (vw) for responsive width. The table should be semantically declared in html e.g.
<table> <tr> (table row) <th> (table heading) <td> (table data) etc.Keep up the good work :)
Marked as helpful0 - @alleny-01Submitted 9 days agoWhat are you most proud of, and what would you do differently next time?
Proud of completing the Challenge
What challenges did you encounter, and how did you overcome them?Flexing the Image icon and name
What specific areas of your project would you like help with?The box shadow
@Joan-Bell-FayePosted 9 days agoHi there, to help you with your box shadow it should look like this (based on your original), I have tried to explain what these values mean below so that you can use the principle going forward. Hope this helps :)
box-shadow: 15px 15px 0px 0px rgba(0, 0, 0, 1);
1st value for box-shadow: 15px; this is the horizontal shadow, so 15px to the right, or to the left of your box. E.g 15px will give a thick shadow on the right of your box and -15px will give a thick shadow on the left.
2nd value for box-shadow: 15px; this is the vertical shadow, so above or below your box. E.g. 15px will give the shadow below the box and -15px will place it above the box.
3rd value is the blur radius which is how crisp or blurred the shadow outline will be. E.g. box-shadow: 15px (horizontal) 15px (vertical) 0px (blur);
- This will give you a very crisp edge with no blur. In contrast if you changed this value to 20px you would have very blurry edges as if you smudged it.
4th value is the spread, how far does the box-shadow you've defined in the previous 3 values spread - you can probably ignore this one to be honest but just mentioned it so you know it exists. E.g. box-shadow: 15px (horizontal) 15px (vertical) 0px (blur) 0px (spread);
Lastly you choose the colour of the shadow and the opacity. So let's say you're using the rgba colour scheme and you want solid black you would write rgba(0, 0, 0, 1) - the '1' is the opacity on the alpha channel, for a lighter shadow you might have chosen rgba(0, 0, 0, 0.4) or no opacity would be '0'.
The shadow border-radius will be defined by what you have set for the element.
0 - @TangoCode99Submitted 10 days ago@Joan-Bell-FayePosted 10 days ago
Great job! Really close to the original design, well done! Something for thought moving forward. If the social-links were to be clickable by users and lead to Jessica's social profiles you could use e.g. <a href="https://www.linkedin.com/in/JessicaRandall/">LinkedIn</a> Then you don't have to put these in separate divs, you can just reference them in css and style using e.g. .card a { ..... }
It also means that they remain flex items when using flexbox so that when you use something like the gap property to space the items in the column you will need to think less about margins and paddings for each item. Hope this makes sense and is helpful. Keep up the great work :)
0 - @ashrafitachiSubmitted 10 days agoWhat challenges did you encounter, and how did you overcome them?
I have suffered a lot in connecting local img and font files into GitHub deployment pages. But at the end, with the help of ChatGPT , I have managed to solve the problem.
What specific areas of your project would you like help with?Any feedback is appreciated.
@Joan-Bell-FayePosted 10 days agoYour solution looks great and very close to the original design. Looking at your html I noticed your class names which work well for this small project although might become confusing later for you as you enter more headings and paragraph text on a large webpage or several pages. Typically I will use classes like 'card_text' or 'hero_subheader'. Sorry I hope this is making sense! Keep up the great work :)
0 - @Artix9Submitted 12 days ago@Joan-Bell-FayePosted 12 days ago
Good job :)
The only thing I would suggest is using gap in css to space flex items, saves on some margins and padding.
Marked as helpful0
