DEV Community

Yuri Filatov
Yuri Filatov

Posted on • Originally published at andersenlab.com

Website lesson 4: HTML + CSS

Welcome back!

Hopefully you tried everything what 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

Conitnue on CSS working

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

  • Evry 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 background 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 problems 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 home page.

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

Check my website for more information
Good luck in your job!

Top comments (0)