Starting the Responsive Web projects

Anything I should know before I start? Tips, etc.

Hey there,

Congratulations on making it to the projects. These are meant to be a cumulative review of everything you have learned in that certification section, and they will prove to be a good challenge of your learning.

You will likely find that you have to reference previous lessons to remind yourself of sepcific concepts or syntax - and that is perfectly fine. Even experienced developers need to Google things.

Remember that these projects are yours. You need to ensure the test suite is present in your project, and that all user stories are passing. But aside from that, you are free to make it your own - add your own content, your own personal flair.

And remember to have fun, and happy coding. :sunglasses:

1 Like
  1. Use a narrow-first approach. Narrow your browser as far in as it will go and style the page so it looks good at that narrow width. This will be your base CSS. Then gradually widen your browser until you feel you have enough horizontal room to rearrange things on your page and set your break point there (using min-width and em units). Add styling under the break point. Repeat as needed. You may find that you also need to change the HTML to give yourself more hooks and such for styling the wider versions. That’s great, just make sure you always check that your changes don’t mess up your narrower views.

  2. Prefer em over px. As much as possible use em for font sizes, widths/heights on elements (especially if they contain text), CSS break points, and anything else you might think you need px for. There are of course legitimate uses for px, this is not written in stone. But using em respects the user’s choice for the font size they need to view your page width. It allows the elements on your page to resize appropriately as the font size is increased. If you don’t know how to manually change the font size, the best way is to use Firefox. Go to the Edit -> Preferences menu, scroll down to Zoom and activate ‘Zoom text only.’ Then while holding down the Ctrl button scroll your middle mouse button to increase the font size. Your page should be able to gracefully handle an increase of at least 200%.

  3. Make sure all functionality on your page can be accessed with the keyboard only. And make sure that the keyboard focus indicator is prominent enough to be easily seen and is used on every element that can receive keyboard focus. Personally, I never rely on the browser’s default focus indicator because it is usually a 1px dotted line with a color that can be hard to see.

1 Like
  1. Nice tip.

  2. Why not rem instead of em? Isn’t easier to change all the measurements of the page with rem? I like to set the default font-size to 10px and BOOM is easy. With em is hard to calculate because takes the font-size of the parent. Image the parent’s parent with em and so on…

  3. How can I make that? Is the section with the screen reader?

Ya, go ahead and use rem if you want. I just used em because it is one less char to type :slight_smile: But for CSS break points em and rem are exactly the same thing so it won’t matter there.

Setting the default font-size to 10px is a convenience for you, but what about the user? What if I have the default font size set in my browser to 24px because I have a hard time seeing the screen? You are now overriding my usability preferences. I’ve done a ton of projects over the years with complicated layouts and I can honestly say that I’ve never needed to do that. Yes, the user can manually increase the font size as needed so this isn’t a showstopper. I just don’t like doing things like that if they don’t absolutely need to be done and especially if they will affect usability.

As for the keyboard focus, it is generally associate with the CSS outline property. It’s the little dotted border that displays when the element has focus. Just use your Tab key to start tabbing through your page and you should see it (that is, if you have any focusable elements on the page). You can customize the outline property or you can remove it and use the border property instead, or maybe something else? Just as long as it is very clear to the user where the focus is.

To be honest. I don’t put 10px but 62.5% so that the user won’t have problem. The percentage is relative and is the equivelent of 10px.

Perfect! Now assuming that most people have their default browser font size set to 16px (that’s what almost all browsers come with out of the factory) then you are using 1.6rem as your base font size?

Yes, and it won’t look bad because the percentage is relative and will adjust the font-size according to the monitor —because 16px of a small screen pc looks different from a 16px of a pc with a bigger monitor—. That’s the trick. And I can develop the website without worrying about em’s calculations.

I set it to “10px” default, use rems and BAM —dab emoji—.