Avatar for InterplanetaryDragon

InterplanetaryDragon

@InterplanetaryDragon

Mentor Score

320

I'm a mysterious individual who has yet to fill out my bio. One thing's for certain: I love writing front-end code!

  • RE: Neeka Poklitar's "Mobile-first with CSS Grid" solution

    1

    It was good reading your CSS code. When I did this challenge (first one I've done) I used CSS grid too, but for desktop, tablet and mobile. In hindsight, I think I'd have used Flexbox (which I've use on the last two sites) for mobile and tablet then the grid for desktop. It was my first time doing a site and using CSS grid so I wanted to practice. Your code was interesting to read as it was different to mine. I used grid-template-areas instead of selecting column and rows lines. It's nice to see other ways to implementing it. Thanks for sharing.

  • RE: Anthony Passler's "clipboard-landing-page-master" solution

    2

    Page looks great! That very minor HTML issue that has popped up is because you have a section without a heading. I checked the code and you used several times. In most cases you'd be better off with a div, especially if there isn't a heading as it'll flag up.

    It's just one of those things... you'd think it shouldn't really matter, which it shouldn't. I'd argue that logo area is a section, but a HTML checker will want it as a div. Semantics!

  • RE: Frederik Kempe's "Grid" solution

    1

    Hi Frederick, site looks good. I tried to check the code to see what the errors are (2 accessibility and 4 HTML) but the code seems to be for a different design.

    It looks like the errors are saying you have used the same ID more than once. You cannot use the same ID more than once. IDs are individual, therefore if you are going to use it more than once you should create a class. Here is a good link: https://css-tricks.com/the-difference-between-id-and-class/

    Only thing U can see visually which you could improve is using font weight 200 for the heading 'Reliable, efficient delivery', as the current font-weight is too heavy.

    If you want to learn more about CSS Grid I recommend this video and code to go with it:

    https://www.youtube.com/watch?v=7kVeCqQCxlk https://codepen.io/mor10/pen/NjeqyX/

    Also, check out this short and free course. It has some useful tips: https://scrimba.com/playlist/pWqLHa

    Good job!

  • RE: Javier's "Four card feature section" solution

    0

    Hi Javier, looks good on desktop. The site doesn't appear properly on mobile or tablet. I'd recommend reading up on CSS Grid and Flexbox for laying out your design. If you Google Scrimba and then search their site for both CSS Grid and Flexbox, they have free short courses for each. Less than an hour each and are very useful. There is also lots of material on W3 schools, Mozilla MDN and CSS tricks. Hope this helps.

  • RE: Oyinkan Oyetunmibi's "Four card feature section using Sass" solution

    0

    Update: I have had some success with responsive headers. I set my :root font size to 10px so that the math for rem is easy. :root { font-size: 10px }

    then I set my body text to 1.8rem (18 pixels).

    For my headers I've used the following: h1 { font-size:calc(1.8rem + 1.3vw); }

    h2 { font-size:calc(1.8rem + 0.7vw); }

    h3 { font-size:calc(1.8rem + 0.4vw); }

  • RE: Oyinkan Oyetunmibi's "Four card feature section using Sass" solution

    1

    Can't help with SASS as I'm a newbie but I believe the only way to have responsive text is to use the viewport, so set it to, for example, 4vw. However, it can be difficult to get right and isn't always a good solution.

    Depending on the size and layout of elements, flexbox is great for responsive layouts as it will move your divs as the screen shrinks or gets larger. Though you do still sometimes need media queries for sizing, even if you don't for position. Though using percentages for your sizes can help with responsiveness. For example, having a div always take up 75% of the width.

    This site has some neat videos on flexbox. Skip though you know, but I found some useful tips in the later videos.

    https://scrimba.com/g/gflexbox

    CSS Grid also makes it really easy to move and rezize content (assuming your content doesn't have fixed sizes). You still need a media query to create a new grid and reposition elements, which takes a minute. Your content should then fill the grid area.

  • RE: Jennifer's "Base Apparel by Jennifer" solution

    1

    Quick update. That 'id' 'label' fix worked for me.

    Another tip, if you get a HTML error related to Google fonts, which just happened to me, replace the pipe | in the code with %7C. I think it happens if you have more than one font family.

  • RE: Jennifer's "Base Apparel by Jennifer" solution

    1

    May be able to help with your first question. I uploaded a solution and have two accessibility issues which are worded very similar. For me they concern a hidden checkbox. I believe I need to add an 'id' to the checkbox, then use the 'id' as a label for a screen reader.

    This is the example they give for my issue. Chamukos tequila

    This page may help you to: https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/

    I image you also need to given an 'id' and 'label' or something very similar.

    I haven't started to learn JS yet so can't help you there. Refactoring wise, I wouldn't get too hung up early on. I spent quite a bit of time looking at how I could minimise the code, often for tiny gains and it wasn't worth it, as you learn better ways of implementing things. I find that I pick something up each time and adjust how I layout the CSS and comment it. I think readability is the most important thing-=knowing you could go back to it in 6/12 months and know what is what straight away. I really liked this layout when I came across it: https://codepen.io/mor10/pen/NjeqyX/ it's also a great example of CSS grid. This is the video that goes with it, if you haven't already seen it: https://www.youtube.com/watch?v=7kVeCqQCxlk

  • RE: Janez Kolar's "Mobile first site, bootstrap media queries, no mid section, old design" solution

    0

    Hi Janez, I'm going to attempt this solution tomorrow. I've been practising with CSS grid and Flexbox. Regarding setting margins and padding for different scree, you could instead try setting a % as this scales automatically. I've found it useful. For example body {margin: auto; padding: 5%;} the margin centres the body which helps on my screen (most of these challenges use a max body of 1440px and my screen is around 2200px). The padding creates a nice buffer around the entire screen which is very useful on some designs. You can also use the % for divs. For example, div-name {margin: 5%; padding: 2.5%}.

  • RE: InterplanetaryDragon's "CSS HTML only. First time with flexbox. Added tablet breakpoint." solution

    0

    Thanks Hannah. I noticed several minor issues on mobile. I didn't notice the image issue, so thank you. I was excited to try something else new, but will go back and make the changes. I'm trying to do a navmenu in CSS only (project-tracking-intro-component-master). Solve the desktop and I've got the mobile looking okay. I have the nav in a box which I need to hide... then figure out how to use the hamburger and 'X' image to display and hide it.