Skip to content
OverviewSolutions
3
Comments
5
Eleana Tyradelli
@eTyradelli

All comments

  • Shaurya Gautam•100
    @SGautam1108Submitted almost 3 years ago

    Hey Everyone! I am truly delighted to present my first ever mini project (Apart from those I have done in online courses) after learning basic Frontend!!

    For the questions, here are a few which bugged me throughout the working session-

    1. Should I rely on bootstrap completely for basic styling like justify-content, padding etc. instead of doing it with css?? In my project though, I tried to use bootstrap just for it's structure rather than styling.

    2. Is there a way to have all hover elements (clubbing them) to have same properties as they were being repeated in my code a lot, like transitions, visibility, opacity etc.??

    3. And do advice me based on my current work that how should I further improve in this field if I would have worked in a workplace with teammates, be it naming conventions, or using divs around anchors or any other that comes to your mind.

    4. Also in general which units do you prefer when giving margins, padding when compared to fonts etc for better responsiveness.

    5. For the media query I have set up, as the screen get's smaller it was getting worse to display the card, could you suggest something for it like which properties should I be changing

    6. O ya, another one... (LAST I PROMISE) Can someone help me out with keyboard navigation. I have seen a lot of videos stating that website must be compatible with keyboard, but didn't find any one of great help

    Thanks again!!

    NFT preview card component challenge using Bootstrap

    3
    Eleana Tyradelli•180
    @eTyradelliPosted almost 3 years ago

    Hi Shaurya,

    I struggled with the same questions a while ago, and then I ran into this course: https://scrimba.com/learn/spacetravel

    It's a collaboration between Frontend Mentor, Scrimba and Kevin Powell, where Kevin builds a website based on a Frontend Mentor challenge. During the course you will find answers to most of the questions you are asking, as he explains the choices he makes. For example, how keyboard tabbing works and where to start with that, how and why to combine BEM with utility classes for a better structured CSS code, ideal measurement units for better responsiveness, CSS Grid and Flex box for responsive layouts and so on.

    Honestly, I was blown away by the amount of invaluable info I got from this course and I can't recommend it enough.

    Hope this helps you on your journey. Cheers!

    Marked as helpful
    2
  • Eleana Tyradelli•180
    @eTyradelliPosted almost 3 years ago

    Hi @nawfelsekrafi,

    Very well done! The cart functionality works as it should and the layout looks great on all screens.

    Now the neat-picking part. Here's a couple of things that I think can take it up a noch:

    1. On smaller screen-sizes where the mobile menu kicks-in, it seems like the default state of the menu is to be open. So when the page loads on small screens, or when I resize the screen, the menu is open and hides everything.

    2. While on the mobile menu subject, instead of display:none to hide it, try transform: translateX(-100%) or something like that. That way you can add a transition effect, plus it takes less power for the browser to load it, so the transition will be smoother. Here's an informative video on which properties to animate for better performance: https://www.youtube.com/watch?v=N5EW4HnF6FU

    3. Expanding on no2, a few CSS animations and/or transitions here and there would make the design really shine. For example, on the mobile menu as it opens and closes, on the cart modal as it opens and closes, on the img slider, or even on the hover state of the Add to cart button.

    Overall, great work!

    Cheers!

    Marked as helpful
    2
  • Fai•140
    @FsaneaSubmitted almost 3 years ago

    The challenge for me is with position attribute, if someone has a good reference for it please share.

    made with HTML&CSS

    2
    Eleana Tyradelli•180
    @eTyradelliPosted almost 3 years ago

    Hi @Fsanea,

    I'm not sure if I understand what you are trying to do, so feel free to correct me.

    It seems to me that you are trying to position the main elements of the page by using position: absolute / position:relative. While it works up to a point, this way is not ideal for responsive design. CSS grid is a more intuitive and easy technique to structure the page. Position: absolute has its uses of course, but they have limits.

    A couple of useful videos by Kevin Powell on position: absolute:

    https://www.youtube.com/watch?v=P6UgYq3J3Qs

    https://www.youtube.com/watch?v=lUaw-AA9HnA

    Read about HTML layout here: https://www.w3schools.com/html/html_layout.asp Read about CSS grid here: https://learncssgrid.com/

    Hope this helps! Cheers!

    Marked as helpful
    0
  • darryncodes•6,370
    @darryncodesSubmitted about 3 years ago

    Hi everyone 👋

    I'm not looking for feedback on this one as it was a follow along!

    However I would like to say thanks to Frontend Mentor providing this excellent learning opportunity alongside Scrimba and Kevin Powell - perfect timing in my development! Being able to cross over from theory/tutorials to see how development works in the real world is invaluable.

    My biggest takeaways are:

    • The design system and how Kevin builds out all the components in the design files before starting the site build
    • Using utility classes, css variables and the alternative approach to customisable inline styles
    • Accessibility - learning more about ARIA
    • The JS in general and hiding/showing content using html attributes
    • Having access to professional design files and getting closer to the real world development process

    Happy coding 🤙

    Space tourism multi-page website

    1
    Eleana Tyradelli•180
    @eTyradelliPosted almost 3 years ago

    Hi @darryncodes,

    I just wanted to say that I took the course too and found it invaluable!

    There was so much information put into practice in a clearly explained way. I second all the takeaways you mentioned, and add CSS grid and grid-template-areas for page layouts to the list of useful practices I learned from the course, as for me it was a game-changer.

    Anyway, I just wanted to share my enthusiasm :)

    Cheers!

    1
  • Michael Godfrey•340
    @michagodfreySubmitted almost 3 years ago

    This is my first Frontend Mentor challenge. I think the styles are close but I'm not sure about the positioning of elements and sizes etc. Also I only checked it on Chrome browser.

    I welcome feedback and constructive criticism, it was challenging to vertically center the card and position the background images and I just tried stuff until something worked.

    Social media card

    4
    Eleana Tyradelli•180
    @eTyradelliPosted almost 3 years ago

    Hi @michagodfrey,

    Job well done on this one!

    Looking at your code, here's a couple of things that may help you moving forward:

    1. CSS reset: This is are a very common way to start styling your project without having to deal with the HTML defaults, like the default margins of the <body> element. If you Google css reset, you'll see there are a few ways to go about it. Here's an example: https://piccalil.li/blog/a-modern-css-reset/

    2. CSS grid for layout: By setting display:grid on the <body> and working with grid-template-columns and grid-template-rows or with grid-template-areas for more complex layouts, it becomes very easy to center things horizontally and vertically. Grid-template-areas are especially helpful for responsive layouts, because they offer an easy way to move things around and change their order, depending on the size of the screen.

    3. As @tymren608 suggested, try to use ::after and ::before for the bg circles, and positioning them absolutely, so they won't interfere with the height of the <body> and consequently the page.

    Keep it up!

    Marked as helpful
    1