Submitted over 1 year ago

Base Apparel CSS, HTML Responsive Design with a spot of JS

Jody Depp•30

@JoDepp

Preview site View code

This is a solution for...Base Apparel coming soon page

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

-I ended up removing the footer for the desktop version b/c I couldn't get it to the correct position... :/ -Many things I can improve I know, but I am taking a break from this project. -I'm confused about the difference between Grid and Flexbox, and when to use which. Can I use them both in the same website? I gravitate towards Flexbox because I know a little bit about it.

Community feedback

Abdul Khaliq 🚀•72,560
@0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉

I have other recommendations regarding your code that I believe will be of great interest to you.

JAVASCRIPT 🟡:

The way you declared variables are need to be well structured and organized

Take a look at the following example code which describes an efficient way of declaring variables

const firstName = "Your"; const lastName = "Name"; const emailAddress = "[email protected]"; const password = "supersecret";

instead try this,

const firstName = "Your", lastName = "Name", emailAddress = "[email protected]" ••• ••• // n number of declarations password = "supersecret"; // make sure to add a semicolon at end of last declaration

This single line declaration with separated commas will helps you to have a better structured code and improves readability though

.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!
Marked as helpful
0
Jody Depp•30
@JoDeppPosted over 1 year ago
@0xAbdulKhalid that's really cool, I didn't know that was possible! I will give it a try. Thank you!
0
visualdennis•8,375
@visualdennissPosted over 1 year ago
Hey there Jody,

you have already done a good job in this challenge!

To answer some of your questions aboux Flexbox and Grid. Yes you can use both of them in a website or for a section of a website, or even nested (e.g. parent container could be a grid and its individual items could be flexbox, meaning container of flex items). Both are just CSS Layout Methods.

Flexbox is a powerful Layout Method for a one-dimensional layout method. You lay out items either in a certain row direction or a column direction. Navbars are good typical examples of that, you have groups of links and a logo and a toggle menu, all layed out horiztonally across a row.

While Grid can also be used for one-dimensional layout, its bigger power lies in when it comes to multi-dimensional layouts, where you need a control over multiple rows and columns. Think of a section of a 2x3 Grid, (2 rows and 3 columns) and you want to control how big each grid cell should be or which grid cells it should be assigned to etc. You can do all of that with CSS Grid.

Hope this clearifies a bit about how to decide when to use which.

Hope you find this feedback helpful!
Marked as helpful
0
Jody Depp•30
@JoDeppPosted over 1 year ago
@visualdenniss that was very helpful. For a mulit-dimensional layout I should use Grid for the <body> and either flexbox and/or grid for other elements?
0
visualdennis•8,375
@visualdennissPosted over 1 year ago
@JoDepp No, not necessarily for the <body> itself, but whatever the container of that multi-dimensional layout is. It could be a <section>, <main> , <div class="wrapper"> etc. that requires a multi-dimensional layout to lay out its children elements. It just depends on the design. Most of the time, if you are building something like landing page, i don't think u'll need anything for the <body> itself.

Here is an example of choosing which one for which case: https://youtu.be/nG2IyH43xMU?t=86

And this goes nicely in depth of how to decide flexbox or grid: https://www.youtube.com/watch?v=3elGSZSWTbM&t=615s

If you have more questions, feel free to ask, happy to help :)
0
Daniel 👨‍💻•980
@Daniel-BilodidPosted over 1 year ago
Hi, my congratulations you did a great job 🎉

𝐒𝐨𝐦𝐞 𝐭𝐢𝐩𝐬 𝐟𝐨𝐫 𝐲𝐨𝐮𝐫 𝐜𝐨𝐝𝐞 🛠

🔹 About grid and flexbox

You can use them both in the project

And if we talking about grid its more convenient with making a list of smth or if u wanna create a tab list

checkout this article

I hope it was helpful, you are great, keep up the good work 👍
Marked as helpful
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord