Let’s create a simple HTML + CSS only website. There are a lot of simple website we can create with just HTML and CSS. For this project,  let’s create a restaurant website. It can be your imaginary restaurant or a real one. The project should have at least 4 pages: home, menu, location, and about.

Think about branding (logo), the pages that you’ll be included in the project, and the layout, where the logo, navigation, and content will be laid out on each page. Sketch out your website first so that you get an idea of how it will look before you start implementing it. You can use any drawing tool that is available in Myanmar or download the free GUI tool Pencil from https://pencil.evolus.vn/. You can find tutorial for Pencil at https://pencil.evolus.vn/WikiIndex.html.

Include background color/texture, text color, typography,  and images. Make sure every thing — color, typography, images, and design — works together to create a yummy website (after all this is a restaurant website and you should make every one who look at the website to want to come and eat at the restaurant)

Here are a few examples:

Silk Thai Cuisine http://www.silkthaicuisine.com/index.html

Exotic Thai Restaurant https://exoticthairestaurant.com/index.html

Tusk Thai Cusine http://www.tuskthaicuisine.com/

Esan Thai http://esanthai.com/menu/

Also take a look at https://www.awwwards.com/tasty-design-restaurant-and-catering-websites.html for design inspiration.

Once you have create the restaurant website and uploaded it to the server, sent me the link to it.

 

Here are a few things you might want to include in your site:

Parallax https://www.w3schools.com/howto/howto_css_parallax.asp

Fixed Footer/Header https://www.w3schools.com/howto/howto_css_fixed_footer.asp

Card design https://www.w3schools.com/howto/howto_css_cards.asp

Centering website https://www.w3schools.com/howto/howto_css_center_website.asp

Overlay Effect https://www.w3schools.com/howto/howto_css_overlay.asp

Image Effect https://www.w3schools.com/howto/howto_css_image_effects.asp

Image Text https://www.w3schools.com/howto/howto_css_image_text.asp

Full/Half Page Background Image https://www.w3schools.com/howto/howto_css_full_page.asp

Image Tutorial https://www.w3schools.com/css/css3_images.asp

For typography, you can find free fonts @ google font (https://fonts.google.com/), font squirrel web fonts (https://www.fontsquirrel.com/fonts/list/hot_web) or generate your own web fonts @ font squirrel (https://www.fontsquirrel.com/tools/webfont-generator). Read the https://www.w3schools.com/css/css3_fonts.asp for embedding custom fonts in your website.

Background texture @ Pexels (https://www.pexels.com/search/texture/) and Toptal (https://www.toptal.com/designers/subtlepatterns/).

Color Palette https://coolors.co/browser/latest/1 and Adobe Kuler (https://color.adobe.com/explore/?filter=newest) (Recommendation is not to use more than 5 colors — background color, font color, link color, button color, accent color (typically use for line) — in your website)