Dangelo

Latest comments

• 

  OGHOSA AGBONTAEN•50

  @yeeezzzusSubmitted 11 days ago

  What are you most proud of, and what would you do differently next time?

  Learning how to approach each section and layout my webpage properly. Would definitely do the font better and spend less time on it and improve on my tables

  What challenges did you encounter, and how did you overcome them?

  I couldn't do the table width, can not overcome it(for now) I had issues with the font

  What specific areas of your project would you like help with?

  How to design tables better How to work with external fonts My hr tag din't work

  

  Information Recipe Webpage using HTML and CSS

  1

  30
  

  Dangelo•380

  @DangelobastPosted 10 days ago

  Pretty close to the original design, but there are things to improve and this is the best part to learn. I will point to what things are most relevant for me:

  1. Answering your question, your table doesn't fit your whole width because you are setting it to display: flex; and it will only take the necessary space, even if you set it to 100% afterwards. If you use your web developer tools and deactivate it then you will see it will occupy your whole width again, since is not behaving like a flex element, in other words taking only the necessary space.

  2. Didn't see any <hr> element in your code but sometimes when you don't set a width it doesn't work, so try setting a width to ensure it is occupying 100% of the space and see if that works for you.

  3. You probably want to add some more padding to your top image and to your preparation time, and some of your subheadings as well as line-height where is need it to basically give some space to your text so it doesn't look crowded, for example your ingredients.

  4. Your font-face looks fine, I would try to set the right colors and spacing and it will start to look similar, don't get too stressed about pixel perfect or making it look exactly the same just similar.

  Hope this helps !

  Marked as helpful

  0
• 

  ysagohh•60

  @ysagohhSubmitted 12 days ago

  What are you most proud of, and what would you do differently next time?

  It took me less time to make this (~3 hours) than my previous project (~5 hours). If I were to do this again, I would try using Grid.

  What challenges did you encounter, and how did you overcome them?

  I struggled with my previous project, so I knew I needed to study more. I took the "What the FlexBox?!" video course on flexbox.io, and I practiced alongside it. I learned to add temporary borders around the containers so I could understand what was happening. It made me more confident to try another challenge, so I did this using FlexBox. There was a lot less guessing while making it.

  What specific areas of your project would you like help with?

  Would this have been easier with Grid instead of FlexBox?

  

  Responsive page using FlexBox

  1

  10
  

  Dangelo•380

  @DangelobastPosted 12 days ago

  Greetings! You are making great progress.

  To answer your question, yes, it is easier with grid since it's a two-dimensional layout. The main concept is if it's a one-dimensional layout use flexbox, two-dimensional? Grid.

  Let's picture grid approach, it will probably be a 2 column (grid-template-columns:2) and 2 row (4x4) but you can just not specify rows so it adjusts automatically, so it will be a grid with 4 containers or squares then there is a property to extend a specific row or column, so logically your first "Join Community" content needs to be extended to the top two columns and to occupy the top space then you are left with the bottom two columns or squares so one for "monthly content" and "why us content"

  You will potentially avoid extra divs in your structure or flex declarations too.

  Then, to achieve your mobile design you will have to set your grid to only one column instead of 2 and pretty much be done

  If you still don't understand the grid, then using your own page imagine a horizontal and vertical line right on the middle of your, it will form 4 squares or spaces for your content, then you can tell grid to make your "join community" content to occupy those two top boxes and then you are left with 2 on the bottom.

  Hope this helps and I don't get you confused lol

  Marked as helpful

  0
• 

  P

  Angie P•120

  @angie-createSubmitted 12 days ago

  What are you most proud of, and what would you do differently next time?

  I’m really proud of how I structured my HTML and kept my CSS clean and organized. I focused on using semantic elements to improve accessibility and readability. Also, I feel good about how closely I matched the design to the original challenge.

  Next time, I’d like to focus more on making my code more reusable by using CSS variables or utility classes. I’d also spend more time on responsiveness to ensure a smoother experience on all screen sizes.

  What challenges did you encounter, and how did you overcome them?

  One challenge was getting the layout to match the design, especially with spacing and alignment. I overcame this by using Flexbox and experimenting with margin and padding until it looked right.

  Another challenge was making sure the typography looked consistent across different devices. I solved this by using relative units like em and rem instead of fixed px values.

  What specific areas of your project would you like help with?

  I’d love feedback on how I can improve responsiveness, especially with media queries. Also, any suggestions on how to make my CSS more efficient and scalable would be super helpful!

  

  Recipe page using CSS and HTML

  2

  10
  

  Dangelo•380

  @DangelobastPosted 12 days ago

  Hope you are doing great, found some mistakes and that's good because it's part of this journey, your page looks nice great work.

  Your problem starts when you set elements to fixed widths or heights using px, for example, your class= "card" is set to width 736px and it will maintain its size no matter what, that's why when your viewport becomes smaller your margin won't have any effect as well as card won't shrink.

  I will give you a very basic idea and solution so you have a better idea by using your developer tools in your browser:

  1. Click your div with your class= "card" and simply uncheck width=736px to deactivate it, this will stop your content from being strictly 736px, now if you try to shrink your page it will try to adapt but at some point stop and overflow again.

  2. Remember fixed heights? your hr element that you are using for your line is set to 656px so, when your line fills all the space it will no longer shrink and it won't let your content become smaller either, so if you go to your hr element and uncheck that width it will finally work as expected since there is no fixed heights.

  I would recommend you start using responsive units and search information about it and avoid setting fixed heights and if you do always keep in mind that if you find this problem again, it's because you have a fixed unit.

  Once you have this in mind you will start to avoid fixed heights unless necessary and your designs will start becoming more responsive avoiding a lot of media queries.

  You could technically set fixed heights and then change it with media queries, but it's not the best way and it will give you a lot of headaches and problems, like what you are having right now with your card margin, imagine having to readjust every time than just letting the content adapt.

  Hope this helps ! Keep going

  Marked as helpful

  0
• 

  ash-kick•40

  @ash-kickSubmitted 15 days ago

  What specific areas of your project would you like help with?

  Having trouble with the box shadow color + sizing. I also made the main content background color white, but it was not in the style sheet. Not sure if this is correct?

  I think I may have too many classes for this solution as well. Wondering if there is a less wordy way to write this?

  

  Order Summary Component

  1

  10
  

  Dangelo•380

  @DangelobastPosted 14 days ago

  Nice to see you back and coding!

  It's hard to make it look exactly the same because you aren't given the specific units, however you can make it look similar the box-shadow property works like this, first value is h offset (horizontal) and second value V offset (vertical) if you set the first two numbers to anything it will only move where the shadow will start either horizontally or vertically.

  Third and Fourth values are blur and spread so if you set your third number higher your shadow will be more blurry and your fourth will spread your box shadow in this case just take more space and your last value is actually your color.

  Using your own property: 5px 10px 80px hsl(224, 23%, 55%)

  5px will shift it to the right 5px and then down 10px and your blur will be 80px and lastly your color, as you can see you didn't use spread. Another tip is to also play with your color transparency in your developer tools, set it to 42% and it will also make some difference.

  You can also use your developer tools and set your box shadow to 0 0 0 10px black to practice and then test your values that way you will know how it works in practice.

  Didn't actually take a lot of detail to your code but there is something called helper classes, which basically is like using your classes to apply some repetitive styling or set of properties, a really basic example is if you want to set right and left padding to some elements instead of writing every time padding, then a helper class could help you by setting the padding and then just applying that class where you need it, but be mindful and don't go crazy applying helper classes everywhere I recommend you look it up.

  Hope this helps ! Again

  0
• 

  AngieLi98•40

  @AngieLi98Submitted 14 days ago

  What are you most proud of, and what would you do differently next time?

  I am proud of the time that I have carried out the solution

  What challenges did you encounter, and how did you overcome them?

  The challenge was to program the table since I had not done it before but I looked for an html and css page to develop it.

  What specific areas of your project would you like help with?

  I would like to receive recommendations in the area of ​​lists to be able to apply the design in the CSS but also the correct way to use them, if you have other advice it is welcome

  

  Recipe page with flex and @media

  1

  20
  

  Dangelo•380

  @DangelobastPosted 14 days ago

  Good results! Keep going...

  Since you asked for some help with your table styling and your second column doesn't have bold text, I will give you two ways and some ideas to solve this:

  1. Using :last-child pseudo selector, you can look it up and it's easy to understand but to resume it, it will just select the last child of the element want, for example a CSS selector tbody td:last-child will select all the children that are a last-child for the td element, in this case your second column will always be the last child inside your tr element, can be confusing sometimes but just keep in mind it just selects the last child.

  2. Another way is using nth-of-child(2), which is kind of the same, but you have more possibilities since you can specify a number and can be helpful in more complex situations, so if you set tbody td:nth-of-child(2) it will select the second child which is again your second column if you set it to 1 it will select all Calories, Carbs, Protein and Fat because they are the first child (number 1).

  3. You can also wrap each 277kcal, 0g, 20g,22g in a strong element and it will automatically give it a bolder font weight because it is used to highlight important things in your webpage, the interesting part here is that you can forget about using pseudo classes or any of the stuff before and just select it with tbody strong

  4. You can technically add classes and apply styles.

  The right way to style it depends on what you need to do and the complexity of the table, for example if this table was triple the content and you choose to add strong element to the last child then it will be a lot more code and repeating the same thing, with nth-of-child is solved quickly by just setting a number a your are done no matter the size as long as your structure is the same it will always be the 2nd element, and it's a table so it shouln't have a structure problem unless you are doing fancy things, there are more options like selecting odd numbers or even and so.

  Hope this helps and gives you an idea on how to use them !

  0
• 

  Artemis•20

  @outerspaceartieSubmitted 15 days ago

  What are you most proud of, and what would you do differently next time?

  With this build, I feel like I did a lot better at following the design. While I wasn't perfect with the design, I feel like this is the closest I got with a project like this. Next time, I plan to take into account all of the pieces of a design and not just the main parts.

  What challenges did you encounter, and how did you overcome them?

  My main challenge was creating the repo for this project. I struggled a lot with keeping my files sorted. I went through the Git and Github documentation to solve this.

  What specific areas of your project would you like help with?

  I would like help in editing the author portion of the design, as this was my main struggle.

  

  Blog Preview Card using Flexbox

  1

  30
  

  Dangelo•380

  @DangelobastPosted 15 days ago

  Great job !

  Don't think your author container needs too much editing more than start using more responsive units and avoid using fixed units like px.

  Noticed the name of your author is not centered, when you need to center your items in a flexbox container vertically, you use align-items: center; and justify-content: center; to center it horizontally as long as your flex-direction isn't set to flex-direction: column if it is then they get inverted.

  To fix this issue apply justify-content:center; to your .author-container class

  Hope this helps!

  Marked as helpful

  1