Andersen

Website lesson 4: HTML + CSS

Yuri Filatov's photo
Yuri Filatov
·

2 min read

cat&mouse_1200x630_Монтажная область 1.png Welcome back!

Hopefully you tried everything that was mentioned in the previous lesson, checked CSS libraries and it is easy for you to find any tag and use it.

Sum up

  • Before moving to CSS, fill your website with the content (HTML)
  • The hardest thing and the first thing - structure. Assign the right position to every object.

Lifehacks:

  • The order of objects goes from left to right, from top to bottom. Follow the order.
  • If margin doesn't work, try padding. Usually the problem is: you write top, but you need bottom
  • Float to choose the orientation.
  • Check the position (x;y) with your template

Continue on CSS working

No need to mention how the tags work. Otherwise what for do I write? Remember, everything is free available on the Internet. You don't need me or anybody else to learn all the tags and where to write them. I would like to mention things needed in your website:

  • Every text should have color (use colorpicker ), align and font. Try to avoid bright colors that are not comfortable for eyes. Avoid usual colors, like for example, a lot of websites have black backgrounds nowadays. Be creative. Avoid simple fonts (friendly fonts), google for something creative.
  • Images. Good optimized images are usually the same size. Or choose two sizes (example: 300x300 and 600x400). Better not to make every image different size.

Hover

Do you like your text or images to be bare?

The answer to this problem is hover.

Initialization

Hover effects

If we have a. <text> and b.<h1 class="text">, then we initialize:

a. text:hover { ... }

b. .text:hover { ... }

Learn more about hover opportunities

Result

Now you add all needed tags for style and add animation to make your website more attractive. If you use images, make a slideshow. To make the links more visible add some text effect. To catch someone's eye on some phrase, add some color change to the text. Make your website look like you are a full-fledged designer.

Btw, here is my CSS code for the home page.

The next lesson will be dedicated to some base of communication. See you in 4 days.

Good luck in your job!

Written by Yuri Filatov, IT Expert at Andersen

HTMLCSSTutorialProgramming Blogs