@MehdiSelmi20Submitted 6 days ago
Learning HTML, CSS, and Javascript to get my foot in the door into the web development industry. I'm really enjoying what I'm learning and I'm looking forward to being able to build some full scape web apps.
I’m currently learning...HTML, CSS and JavaScript. Also getting better with the grid system and using pseudo selectors more instead of giving everything a class or ID.
Latest solutions
CSS Responsive Layout
Submitted 10 days agoI found that the designs that were given weren't set up as they usally are. There was a lot I had to guess on and went with what I felt looked nice.
Latest comments
- @FlamickPosted 6 days ago
The mobile version needs reworked. It seems like you left your flex container as
flex-direction: row;and not column.0 - @Joe-Wa1kerSubmitted 7 days agoWhat are you most proud of, and what would you do differently next time?
Nothing I am particularly proud of, but this was my first time using grid so I'm pleased I was able to make it work.
What challenges did you encounter, and how did you overcome them?I couldn't figure out how to get the horizontal diamond layout on the desktop view, so I searched the solution on discord and took a peak at how someone else had done it, their solution worked but I am not sure how/why it works, so I have some learning to do there.
What specific areas of your project would you like help with?-
Box-shadow and coloring: Because the design doesn't have much contrast, I couldn't tell how close I was with the coloring and box-shadow. In particular, it looked like there was a slight blurred shadow on the sides of the cards but I wasn't able to replicate it.
-
My ' Team builder' and 'calculator' containers are slightly taller than the other two, I think this is due to the <p> length within them, but I don't know how to control this without impacting the flexibility of the elements.
-
I used code that someone else had written for this solution to be able to get the horizontal diamond layout that is required for desktop, it worked but I am not sure how/why, if anyone could explain that would be helpful, see below:
.grid-container { grid-template-columns: repeat(2, 1fr); align-items: centre;}
.top-color-darkblue { grid-column: 3/4; grid-row: 1/3;}
What I don't understand is what the '3/4' and the '1/3' are referencing, as there is no 4th column in the grid and there is no 3rd row either. I suppose they could be fractions of something, but they are not positioned 3/4 across or 1/3 down...
Other than those points, any critique is welcome and appreciated :)
@FlamickPosted 7 days agoOne thing that I can tell you right now that will help you when dealing with grids is to use the F11 dev tools. You can click on the section that has the grid (in the elements section) and if you click the little grid icon, it shows you the grid and the numbers associated with it. That is what the
grid-column: 3/4;andgrid-row: 1/3;are referencing. the first number of each is the starting position and the 2nd is where it ends. I set mine togrid-template-columns: repeat(4,1fr);andgrid-template-rows: repeat(4,1fr);What that did was make 4 evenly spaced rows and columns (that's what the 1fr makes is an even fraction). Feel free to look at my code for any challenges you have that are cause troubles. I hope this helps.0 -
- @Jay-RiveraSubmitted 8 days agoWhat are you most proud of, and what would you do differently next time?
I am most proud of being able to make the table work. I haven't really worked with tables after learning it so I did research when attempting to implement it here.
What challenges did you encounter, and how did you overcome them?I had issues adding a spacing for the li elements after the bullets and numbers , depending if it was a order or unordered list.
I was able to do some research and found out how to target the child elements of them and added some padding:
ul>li, ol>li { padding-left: 10px; }
What specific areas of your project would you like help with?I wasn't able to match the number font on the li element of the order list. I tried both fonts, Outfit and Young Serif , and used the Outfit one for it.
@FlamickPosted 7 days agoTo get the bullets of the LI elements in your UL centered when you have more than 1 line of text, I found a solution online. If you wrap the li that needs to be centered in a span, you then target that span and do the following:
display: inline-block; vertical-align: middle;}That part gave me trouble too. If you ever want to reference any challenges I've done feel free to check out my code. Hope this helps.
0 - @code269Submitted 7 days agoWhat are you most proud of, and what would you do differently next time?
My solution appears very similar to both mobile and desktop design.
What challenges did you encounter, and how did you overcome them?I was unfamiliar with box shadow and this challenge was able to push me towards learning the basics.
What specific areas of your project would you like help with?Specifically would like any suggestions if needed in regards to how I wrote out the svgs in my HTML. I'm aware there is an svg element but was unsure if it was necessary for this project. Would like more clarity on that. Would also like any suggestions to make my box-shadow a little closer to design.
Any refactoring or structuring suggestions to both my HTML and my CSS is gladly welcomed!
@FlamickPosted 7 days agoTo my knowledge, the SVG element is for creating your own SVG. If the SVG is already made and you are just pulling it in, you can use img tag. As for the box shadow, I don't try and mess with the numbers as much. There are plenty of box-shadow tools you can use and then copy/paste into your own CSS. It's good to have an understanding of them, but tools are meant to help us get things done easier and quicker. If you ever want to look at any challenges I've done, feel free to check out my profile. Hope this helps.
Marked as helpful1 - @wawawohSubmitted 7 days agoWhat are you most proud of, and what would you do differently next time?
i managed to create an accurate card for mobile and desktop
What challenges did you encounter, and how did you overcome them?media queries were a bit confusing i started mobile
What specific areas of your project would you like help with?i dont know how to allign the buttons with certain screen width, i suppose i could create a seperate button container and put all buttons there but is there not another way?
@FlamickPosted 7 days agoI also start with mobile. The two most common values I use for media queries are around 600px and 1000px. Sometimes I need both. As for aligning the buttons, you add padding to the button istelf to increase its size and give each box more padding. Also I always have my container div to wrap everything and then another div that is a child of the container that I use for flex/grid. I dont set a width value to containers, only a max-width. This helps with the responsiveness. I let the flex-container/grid-container handle the padding. I also set
margin: "insert value", auto;to the container and that helps center everything. My max-width on containers is typically about 1100px-1200px. Hope this helped and feel free to look at my code if you'd like.Marked as helpful0 - @synnestormSubmitted 8 days agoWhat specific areas of your project would you like help with?
Any feedback appreciated! Didn't really figure out the background images, any advice?
@FlamickPosted 8 days agoThis is the solution I found. I struggled with this one myself until I dug into a lot of the background image properties. Basically, you're setting the size to auto, so it is the original size. I'm sure you know no-repeat. Background attachement fixed so it stays where you put it. Finally, the background-position. For that, the calc function is nice. The 50% sets it in the middle, then you can offset it with the 2nd value. This is what it looks like for my solution. Hope it helps!
background-image: url(./images/bg-pattern-top.svg), url(./images/bg-pattern-bottom.svg); background-size: auto, auto; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; background-position: calc(50% + -27rem) calc(50% + -27rem), calc(50% - -28rem) calc(50% - -32.6rem);```Marked as helpful0
