Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Skilled elearning landing page

#accessibility
P
Jeanco Volfe• 460

@engsofjvolfe

Desktop design screenshot for the Skilled e-learning landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison

SolutionDesign

Jeanco Volfe’s questions for the community

Struggling a lot with positioning, i don't know how to make a consistent container that puts all my elements together without "distorting" them and keeping the space they have while using responsiveness behavior. I need any information to help me with that .

For example, how should i put the padding? For body or for the container-body? ?r i should put on each individual element (look to my footer and header on this project)? If i define my padding on body, sometimes my elements with defined margins or widths or paddings, like the .cards, overflow the body or it's container...

I wished i could have a standard way to write my initial setup on css, and guarantee that all the elements will fit inside it or it's containers and that the container will grow with my elements all together.(BTW i learn this languages by myself so its hard to find consistent content that teach systematically to achieve autonomy).

Even if you guys could teach me just a way, an approach, i will be tremendously thankfull

About those images "floating", how can i put them (any kind of image that overflows the body" on screen without the odd behavior while responsiveness is used. Please, anyone help me.

Well, i will keep trying. See you around.. Thx so much

Community feedback

P
ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted

Greetings, Jeanco Volfe! 👋

Well done on this challenge! 👍

Building responsive layouts with clean code can be tricky to figure out when you are first starting. 😅 You will learn most by building lots of components/sites and trying out different approaches, but one or two helpful things for you to keep in mind are,

  • If you want to add space between an element and its children, use padding on the parent element. This is better than adding margin to each child because you only have to specify the padding in one place and won't have to worry about margin collapsing (which can be confusing).
  • If you want to add space between items in a row or column, use gap. Once again, you'll only have to specify this in one place and the browser will take care of adding space between items if/when they wrap.
  • If you can use flexbox to center things/add space between items, I would do so instead of using margin (once again, mostly because of margin collapsing). And also because I find flexbox much easier to understand and work with.
  • Margin may be helpful when you need to add different amounts of space between items in a column/row (since using gap would set the same amount of space between everything). I would choose a direction to apply margin in and stick to that for all of the elements in that column/row (e.g., use margin-bottom on each element that needs space between itself and the next item, not use margin-top on some elements, margin-bottom on others, and both on some, etc.).

I would advise going to several well-built sites (or even high-quality solutions that you find on the platform) and inspecting their layout and structure with the dev tools. You will be able to see where their developers have decided to use containers for things, apply margin or padding, lay out elements in a certain way, etc.

Ahmad Shaheed also has several great articles on creating layouts with CSS that you may find worthwhile reading. Pay attention to the examples and how a pro web developer thinks when approaching a layout.

The Art of Building Real-life Components

Inside the mind of a frontend developer: Article layout

The Guide To Responsive Design In 2023 and Beyond

Hope you find this helpful. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

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

Join our Discord