My first actual website, HELP

Hey everyone,

Glad to see the forum section back up and running. I have been working on a website for my mother-in-law for the past few weeks. I would love to hear feedback on it. I also have a few issues with the site ( I have included notes in the html). I’m not sure if some of them are caused by Codepen like a display error on their end or if I’m missing something. Any and all help/feedback is greatly appreciated.

Link to the Codepen: https://codepen.io/JBuddie/live/PoPvVLz

Thanks all!

Edit: Before someone points it out, yes the third review is a Marc Anthony song lol, just needed to fill it for now.

The website could be improved to make it responsive for devices with smaller screen such as a mobile phones.

This is what I am currently trying to tackle. As well as figuring out PHP enough to make the form send an email without having to open another application.

You can use the PHP’s mail() function to send an email.

Don’t use view port units (vw/vh) for font size. The user should be in control of the text size on the page (i.e. should be able to manually increase the text size). Using view port units takes away this ability and thus is an accessibility issue). Use em for all font sizes.

For responsiveness, start with your browser as narrow as it will go and style for that narrow with. This will be your base CSS. Then gradually widen your browser until you feel you have enough horizontal space to rearrange elements for a wider view port. Set your first CSS break point there using min-width and em units and add additional CSS under the break point. Repeat this widening process as needed. In other words, use a narrow-first approach to styling and all your responsiveness issues will melt away.

1 Like

It is great that you set up your own website :star_struck:

Look like you didn’t use flexbox or some kind of adjusted layout, so when resizing the browser, text-size becomes very small. The font and color need to be more consistent.

Here is the website you can search for anything, they even have templates for you :https://www.w3schools.com/css/css_templates.asp
Goodluck :grin:

Hi there! Sorry to get in the middle of this conversation but I wanna learn that too :grin:

by “set the breakpoint in em” you mean like this? :point_down:

*@media (min-width: 800px) {*
*}*

and I should use em instead of px??

Thanks!

Yes, instead of 800px use 50em (800/16). Using em units automatically makes your break points responsive to both changes in view port width and changes in text size.

1 Like

Good job on the site! All I would reccomend would be making it a little bit more mobile friendly. Good work overall though!