@neekaisweirdSubmitted over 4 years ago
Mobile-first was fun! Haven't done CSS Grid in a while, but I think this turned out well. (also noticed that the font color that FMC had us use didn't meet contrast standards)
InterplanetaryDragon
@InterplanetaryDragonAll comments
- @InterplanetaryDragonPosted over 4 years ago
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.
1 - @anthonyPasslerSubmitted over 4 years ago
Any feedback or tips to make my HTML and CSS better would be appreciated very much :)
@InterplanetaryDragonPosted over 4 years agoAlso just noticed, your buttons don't seem to be buttons. Are they a tags with a background and border? Cool little solutions really. No difference visually speaking.
0 - @anthonyPasslerSubmitted over 4 years ago
Any feedback or tips to make my HTML and CSS better would be appreciated very much :)
@InterplanetaryDragonPosted over 4 years agoPage 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 <section> 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!
2 - @MeFredjSubmitted over 4 years ago
What's most important to me is to know if the way I implemented the mobile responsiveness is the right way to do so? As I needed to 'reconfigure' the grid I am wondering if I'm mistaken and the grid should be responsive by itself as that is one of the functionalities of the grid.
@InterplanetaryDragonPosted over 4 years agoHi 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!
1 - @xavirepiSubmitted over 4 years ago@InterplanetaryDragonPosted over 4 years ago
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.
0 - @kkmitraSubmitted over 4 years ago@InterplanetaryDragonPosted over 4 years ago
Great job! The boxes are slightly different heights on mobile. You could add a fixed height to them. Or use the minimum height feature. Or a fixed height for different media.
1 - @oyin-kSubmitted over 4 years ago
-
When I want to design for the mobile screens, how best do I handle text sizes and fluid layouts without having to manually go through overwriting them in the media queries?
-
What is the best practice for SASS project architecture?
@InterplanetaryDragonPosted over 4 years agoUpdate: 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); }
0 -
- @oyin-kSubmitted over 4 years ago
-
When I want to design for the mobile screens, how best do I handle text sizes and fluid layouts without having to manually go through overwriting them in the media queries?
-
What is the best practice for SASS project architecture?
@InterplanetaryDragonPosted over 4 years agoCan'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.
1 -
- @rosajen27Submitted over 4 years ago@InterplanetaryDragonPosted over 4 years ago
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.
1 - @rosajen27Submitted over 4 years ago@InterplanetaryDragonPosted over 4 years ago
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. <input type="checkbox" id="tequila"> <label for="tequila">Chamukos tequila</label>
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
1 - @janez33Submitted over 4 years ago
Hello, I would kindly ask you if you could give me feedback, I think I wasted to much with changing paddings and margins in media queries using em units, how should I avoid it or what is the proper way to position elements? I think my way is wrong :/
@InterplanetaryDragonPosted over 4 years agoHi 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%}.
0 - @InterplanetaryDragonSubmitted over 4 years ago@InterplanetaryDragonPosted over 4 years ago
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.
0
