Landing Page - WebCademy

Hi folks!!!, so i been re-styling some of my older html-css projects without bootstrap, and i would like to get some feedback about what would it take for it to be better.

Here’s the codePen: https://codepen.io/luisdbarboza/full/YzXoNyO

I would appreciate any sugestions.

2 Likes

Using Firefox, go to the View->Zoom menu and activate ‘Zoom Text Only’. This will allow you to manually increase the text size on the page (hold down the Ctrl key and scroll the middle mouse button).

Make sure your browser is wide enough so that the ‘Latest Courses’ feature is displayed as a column to the right of ‘The Best Way to learn About Web development’ header. Now go ahead and manually increase the text size. You’ll notice that at some point the ‘Latest Courses’ feature drifts off the right side of the page and there is a horizontal scroll bar. While your page is responsive to changes in the in the view port width it is not responsive to changes in text size.

The fix for this is rather easy. Change your CSS break points from px values to em values. Just divide the px value by 16 to get the em value.

1 Like

It looks pretty good, the code is pretty neat, you just have to fix the part indicated by the user above. If you have time look at my landing page and do a review.
Happy coding !!

1 Like

Thanks a lot guys. I’ll fix that soon. :smile: