Dangelo

Latest comments

• 

  Domagoj Babic•250

  @DomCroatia

  Submitted 3 months ago

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

  I'm happy at how close profile card is to the design, seeing that I've started with mobile-first in mind. I struggled with responsiveness a bit, and had to do some experimenting and brainstorming to get it all to work.

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

  Background-image was tricky to get to this stage (and it isn't same as on the design). I've had to do some digging around and MDN as always was very helpful and I had to experiment a bit to get it to final position.

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

  I'd like help or input regarding how I centered and aligned profile image; is my approach ok, are there any better ways and is there a way to make it more dynamic? Also I've struggled a bit with background-image setting and I'd like some help with it as it isn't same as design image we get for this project; is there a better way to go about moving background-image(s) around?

  

  Profile Card Component using HTML and SCSS

  #sass/scss

  1

  00
  

  Dangelo•440

  @Dangelobast

  Posted 3 months ago

  Greetings, hope you are doing all right. To answer your question about centering, there are more responsive ways to handle this situation since your margin-top is fixed in pixels. It can become a problem because it won't adapt in relation to a parent. I don't want to give you a specific way you should do it, but you should always be thinking about responsiveness and an efficient way to do it. For example, you can set your parent of the img to relative and your profile image to absolute so you can use top and left to position it to the center so top:50%, and left 50%; technically it will move it but still not be centered due to the way it works.

  In other terms, and to make it simple it will place your element or item starting at 50% vertically and 50% horizontally which is the center and keep going from there, after that you can use transform and translate it -50%, -50% what this will do is go back and up to make it look centered again, the reason this works is because is going -50% of its own size so if you shift the image -50% it will compensate.

  You can think of more ways to do it like a combination of flex and transform meaning centering easily with flex and then shifting it up or down as you need it, but is more common to use the first approach.

  Hope this helps!

  1

  Marked as helpful
• 

  Gabriel Hernandez•350

  @Gabin-Hernandez

  Submitted 4 months ago

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

  I am proud to did it in one day, I mean I did it in 3 hours with some distractions, it seems like I am getting better with each challenge.

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

  It is so difficult for me to center the image or divs, so maybe that is something i have to learn more.

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

  If could somebody help me with the image it could be great.

  

  Card Blog

  3

  20
  

  Dangelo•440

  @Dangelobast

  Posted 4 months ago

  Greetings, keep going, and don't stop. I took some time to review your page with my browser developer tools and for some reason, I feel like you are getting some concepts mixed so I will explain why your image is not behaving as expected and some things to keep in mind.

  To start simple if you want your image to occupy the full width of your container set your <img> element to 100% so it takes the full width of your parent container but as soon as you do it, it won't work as expected, why? Welcome to front end lol

  Basically, you are telling your img to occupy the full width of your parent and your parent is set to 500px, it will "ignore" your first parent because is also set to 100% width (class content), which is also getting it from your div with your class card. In other words, your class card is set to 500px and children to 100% so they both will be 500px. If you are curious and change your content class to 400px instead of 100% then your content will be now 400px because we just set the image to 100% and the first parent is your div with class content.

  To solve this issue in a quick way leave your img set to 100% and delete width: 100% from your content class so is not forced to be 500px making it overflow, now you just have to add a margin to the right since you already applied left and there you have it !

  Getting more technical, another reason you are getting issues when you add width 100% to img is due to how box-sizing:content-box works which is applied by default, to explain it just imagine a box element of 20px and then you apply some padding of 1px and add a nice border of 1px you may think it will the box will still be 20px but it's not which gets confusing, the real width of the box is 20px + 2 + 2 = 24px, where is the 2 + 2 coming from ?

  In a box width you have two sides left and right and have padding applied to the left and right as well as borders so 2px in borders and 2 in padding, it can be trickier when getting more fancy. Just keep this in mind.

  That's why you want to set box-sizing:border-box; globally because when you define your box to 20px it will still be 20 px and make space inside for your padding and border, in other terms no fancy calculations.

  Why do I take the time to explain this? That's what happening in your website in combination with other things I previously explained when you apply width 100% to your image your image will be forced to 500px and you have a margin-left of 12px.

  In other terms, your image is forced to be 100% (500px) and obviously, if you add a margin to the left it will overflow because it can't be lower than 500px that's why we take away that width: 100% in .content class so it is not forced if you check it again applying all fixed with your developer tools in your browser your image will be 476px right? + 12 + 12 margin that's 500px! Magic.

  I recommend you learn about box-sizing:border-box; it will help you a lot, if you still don't understand some things just let me know and I can dive more into it

  Hope this helps ! I know it's long but important to know lol

  0
• 

  Thomas Brito•260

  @Thomas-Brito

  Submitted 4 months ago

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

  I'd like some help to be more precise in setting the correct font sizes and dimensions when I don't have access to the Figma file.

  

  Social links profile

  2

  10
  

  Dangelo•440

  @Dangelobast

  Posted 4 months ago

  Nice job, it looks very similar. Regarding your question about how to make your design precise to the original, that's unnecessary since you don't have the exact padding, margins, image size, and a bunch of other elements, the short answer is you will have to be playing until you "guess" the right dimensions for everything by comparing original with yours since you don't have all dimensions and material needed.

  Luckily, there is a file included in these projects called style-guide.md which will give you the colors, typography, and some suggestions, but still not everything.

  Now that I made this clear, you can get fancy and explore with some tools to achieve what you want. If you are a Windows user there is a program called PowerToys and it includes a bunch of useful things but most of the time I use only two...

  A screen ruler will let you measure some distances from one point to another or a specific part that way you can know approximately how much space you have between images, elements, and even text but it gets tricky sometimes.

  A color picker, it's very helpful since it will let you click and find the right color for an element, image, or anything you want. Useful sometimes when they don't include some specific colors.

  An online font finder, this tool will let you take a screenshot and upload it to find the most similar fonts but is not 100% reliable, in fact most of what I have mentioned use it to aid you but don't it will be always perfect.

  If you are not a Windows user pretty sure you can find a Mac/ Linux equivalent

  Hope this helps!

  0

  Marked as helpful
• 

  P

  moe•220

  @jellmoo

  Submitted 4 months ago

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

  I'm proud of the overall structure of my code, and I feel my styling matches the solution recipe page closely. Also I feel I've mainted good accessibility and readability and looks good on devices of all sizes.

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

  Any feedback helps! Thanks

  

  Recipe Page using Flexbox

  1

  20
  

  Dangelo•440

  @Dangelobast

  Posted 4 months ago

  Nice job, I like your structure and the way you organized everything including using CSS variables, I wasn't familiar with ch property, so I will probably have to search it up.

  My feedback here is to avoid using px units, even when using them only for padding or minor layout changes it can potentially cause issues in more complex pages. The reason for this is due to accessibility when the user changes the base font size and let's say you have a padding set to px and text set to rem, your text will increase normally but padding won't since is a fixed unit. SO if for some reason your user needs a bigger base font size you text will grow and the padding will stay the same causing it to become cluttered or have some layout problems.

  Obviously, I don't think is that big of a deal for a simple page but definitely something to keep in mind!

  I did my best to explain it now I will attach the article if you would like to read it:

  https://dev.to/marcelluscaio/using-rem-doesnt-make-your-website-responsive-heres-why-4b0e

  Keep coding!

  0

  Marked as helpful
• 

  OGHOSA AGBONTAEN•60

  @OghosaAgbontaen

  Submitted 5 months 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•440

  @Dangelobast

  Posted 5 months 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 !

  0

  Marked as helpful
• 

  ysagohh•260

  @ysagohh

  Submitted 5 months 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•440

  @Dangelobast

  Posted 5 months 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

  0

  Marked as helpful