Just finished website for a friend, please send your feedback

Hey MarekMac,

The page looks good! One thing you may want to consider is to use a contrast checker (e.g. WebAIM’s contrast checker) to ensure your text is readable, as some of them are relatively difficult for me to read.

For example, the “Get free estimate” and “Send A Message” text has low contrast to the background, and the “Residential” and “Multi-family” text also has low contrast.

Good job!
~Bryan

2 Likes

Have checked it out, it looks great! Keep it up

1 Like

Thank you @bryan123bg I noticed that too, probably need to make these buttons darker to increase contrast :slight_smile:

1 Like

Looks good to me for a prototype! Keep it up!

1 Like

Hello there @MarekMac

This link will help you to do the phone link right.

The Current State of Telephone Links | CSS-Tricks

You also can compress the images to have better performance and for this, you can use the service below. And will be even better if you use a specific image for each device you want to do support.

TinyPNG – Compress PNG images while preserving transparency

Check the HTML code on W3C validator.

Showing results for https://mt-quality.com/ - Nu Html Checker (w3.org)

Take a look in the Lighthouse, if you are using Chrome or Edge the tool is in the developer tools, or you can use it as an extension in the browser. Your site has some issues. In the report, you will find links to articles that will teach you how to fix them.

Lighthouse - Chrome Web Store (google.com)

As a page for business, you may want to share this page and for this, you need to implement open graph meta tags use this tool for testing.

<!-- This is the base configuration  -->
	<meta property="og:title" content="freeCodeCamp Build a Technical Documentation Page" />
	<meta property="og:description"
		content="This is a project exercise from freeCodeCamp to get the certification to Responsive Web Design, Build a Technical Documentation Page." />
	<meta property="og:type" content="blog" />
	<meta property="og:locale" content="en" />
	<meta property="og:url" content="https://adrianoenache.dev.br/" />
<!-- This is required by Pinterest  -->
	<meta property="og:site_name" content="adrianoenache.dev.br" />
	<meta property="article:published_time" content="2021-04-19T00:00:00+00:00" />
	<meta property="article:author" content="Adriano Enache" />
<!-- This will be used by Facebook, Linkedin and Pinterest -->
	<meta property="og:image"
		content="https://adrianoenache.dev.br/fcc-projects/fcc-assets/images/og-images/og-image-fb-1200x630-fcc-build-a-technical-documentation-page.jpg" />
	<meta property="og:image:width" content="1200" />
	<meta property="og:image:height" content="630" />
<!-- This will be used by Twitter -->
	<meta name="twitter:card" content="summary" />
	<meta name="twitter:site" content="@AdrianoEnache" />
	<meta name="twitter:creator" content="@AdrianoEnache" />
	<meta name="twitter:title" content="freeCodeCamp Build a Technical Documentation Page" />
	<meta name="twitter:description"
		content="This is a project exercise from freeCodeCamp to get the certification to Responsive Web Design, Build a Technical Documentation Page." />
	<meta name="twitter:image"
		content="https://adrianoenache.dev.br/fcc-projects/fcc-assets/images/og-images/og-image-twitter-300x150-fcc-build-a-technical-documentation-page.jpg" />
	<meta name="twitter:url" content="https://adrianoenache.dev.br/" />

An important thing to you note is the URL of images needs to have an absolute path.

Font Awesome … I really don´t like this, but is because of the performance issue, you are loading a huge resource and using a few icons. In my opinion, the benefits of using this aren’t good enough by the price your user will pay by access your site.

Instead, you can create your own icon font by using the service below.

IcoMoon App - Icon Font, SVG, PDF & PNG Generator

With this, you will have access to some free icons and you can create your font of icons or you can download the SVG separately. You also can add your own SVG to the set.

More resources are below.

5,775,000+ free and premium vector icons - Iconfinder

HTML Symbols, Entities, Characters and Codes — HTML Arrows (toptal.com)

Free Stock Photos · Pexels

Beautiful Free Images & Pictures | Unsplash

There are more things we can talk about to improve but for now, I think you have a lot to think about this.

@BurningQuestion We always can find something to improve :stuck_out_tongue:

1 Like

I liked the website very much but I would suggest you to minimise the size of the picture a bit.

1 Like

Wow @adianoenache so much good advises, thank you very much.
I am gathering everything into one big file and will start implementing all of them tonight!

1 Like

Hi.
wow! as beginner web developer after finishing my r.w.d. course this definitely hit me as an inspiration.
thank you very much!
i would add some hover effects for the form. it will look much more alive.

1 Like

Yeah looks professional,
Nice work

1 Like

Thank you @seekinfox and @userNameOnline,

I was trying to do my best. I am a beginner as well and am struggling with JavaScript pretty bad. Hopefully will get better someday :slight_smile:

Your website looks amazing. It’s really eye-catching. Everything was great, the layout is perfect. I would say you did a really great job. But, I think you need some improvements.
First, the “the team you could trust”. In my opinion, the height it’s too long which mean not all of its parts will be fit in the screen when you enter the page. This can makes some viewers feel annoying.

Second if you should put more hover effects since that will make your page looks better. In my opinion, you should put the effects in any where that needs it.

Third, for me the professional service part is a part you can show a lot of ỉmpessions to the watchers. In that part you can put many animations, good decorations or stuff. I know its may sound kinda hard but if you can, Im sure you can get a lot of good reviews.

Anyway, I really like your page, you did amazingly great. If I can rate your page, I would rate your page 9.5/10. Also remember to use certificates because the “This page unsafe” alert is kinda annoying.

Ps: your mobile version is great. Everything is perfect. Your page makes me smile :smiley:

1 Like

Well done , looks Proffessinal

1 Like

Thank you @phamminhphu161009,

more people are telling me about hoover effect, will probably add them here and there. regarding services parts, I guess it will be completely re-done, because my friend wants now have only painting service. I’ll let him think about it and give me final decision.
Thank you as well for letting me know about this unsafe notification, I was under impression that additional protection was included in my domain, will look it up once I get back home after work :slight_smile:

Thank you @nyasham and welcome to our community!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.