Skip to content

Latest commit

 

History

History
109 lines (83 loc) · 4.14 KB

part3.md

File metadata and controls

109 lines (83 loc) · 4.14 KB

A little bit of CSS

Coding with just HTML can get boring. That's why we'll need to know a thing or two about CSS. CSS makes everything shiny and pretty!

Out tutorial will continue with the following points:

  • How do you transfer design ideas to CSS?
  • Nice and clear navigation between pages
  • sticky elements which don't scroll with the page
  • Different style ideas for websites, e.g.
    • Classic blog
    • "tumblr" style blog
    • individual articles
  • other applications:
    • Grids
    • gallerys with lightbox

And of course, as always, we are open for specific requests from you!

CSS Basics

  • Website elements are arranged in rectangles, so called boxes
  • important attributes:
  • position
  • margin, padding
  • width, max-width
  • border

How do you transfer your design ideas to CSS?

  • Elements can be
    • fixed, e.g. at the top of the page as a navigation menu
    • adjusted to a grid
    • neither scroll upwards or downwards, i.e. stay
  • Pick one example, either one we suggested or choose your own and start experimenting!
  • Tips
    • Working with sample or inspirational websites makes the process much easier. Rememeber: Nobody likes copycats, so always refer to the original author
    • It's not a shame to look at cool tricks other people did on their websites
    • Sketching your draft really helps
    • Experiment live with size, color, font-size etc

Navigation between pages

  • fixed bar on the top of your page
  • As an alternative you can fix your navigation bar a bit more downwards for a more "tumblry" style, e.g. after an image.

Ready-made Styles

Grids

  • Placing elements next to each other is a little complicated.

  • That is why use use so called grids.

  • You can download a CSS grid here

    <div class="grid">
    <div class="unit whole red"><pre>groß</pre></div>
</div>

<div class="grid">
    <div class="unit half green"><pre>halb</pre></div>
    <div class="unit half orange"><pre>und halb</pre></div>
</div>

This will look like this

Links that might interest you

German:

English:

Tools

  • Gridism, simple grid Framework
  • Bootstrap, popular and very extensive CSS framework
  • Can I Use, compatibility tables for support of newer HTML and CSS
  • Font Awesome, many icons for website design
  • available for charge:
    • Webflow, online editor for websites
    • Macaw, also an online design programm for websites. You can find a free version here

Style Inspiration