What to Learn First

Conner Luzier — Wed, 13 Nov 2019 20:36:05 +0000

Getting Started

So you want to learn how to code websites but are unsure where to start? Well, CodePen is a fantastic site/tool to use to help you learn your way around the basic site scripting languages.

HTML

Essentially HTML (Hypertext Markup Language) is the bare bones of a website. This is as basic as it gets.
If you are just starting to code I suggest learning HTML first before any other scripting language as this will assist you in understanding how websites are formatted.

<!DOCTYPE html>
<html>
<head></head>
<body>
<title></title>
<header></header>
<p></p>
</body>
</html>

Above is a simple html page, of course if you were to open a page with that exact code, the page would be blank. To briefly explain how html works, there are tags for all that is html. Even an html tag to tell the site that you are using the language html. The next is the head tag which is where you can link other scripts to other documents that you want to integrate into your html code. This will come later on so no need to worry about that. The title tag is simply the words on the tab at the top of the page. header is a bootstrap container. A prime example of this is on News websites, they use a header to introduce the name of the article. p is simply a paragraph section. Lastly, body is essentially the parent of p. Remember that all of these tags need to be closed using the same tag but with a / before the word or letter. Example: </html>

CSS

Cascading Style Sheets other known as CSS is what makes a website visually appealing. Usually this involved shapes, fonts and animations (keyframes). Below is a prime example of what can be done with just CSS.

See the Pen Profile Layout on load by Conner (@cluzier) on CodePen.

If you look at the example above, CSS is basically the meat of a webpage. A simple way to start out is by understand how to implement it in your html. This can be done by going to your <head> and inserting where the .css document is.

link rel="stylesheet" href="style.css">

Once your style sheet or whatever you choose to call your .css file is linked to your html page you can start adding code to your .css file. Make sure that you have elements in your .html file that you want to edit such as a paragraph <p> or a <div>. Here is a simple portion of code that will show what a div's css code would look like.

.div {
  margin: 0 auto;
  position: relative;
  background: #202B33;
  height: 200px;
  width: 200px;
}

This would link to this portion of your html code

<div class="div">
</div>

Conclusion

Whilst this information may be a lot at once, if you grab anything from this it would be to start with learning HTML. Once you're comfortable with that move onto CSS. There are endless tutorials on https://stackoverflow.com if you're confused or stuck. Just stick to it!

The Art of CSS Illustrations

Conner Luzier — Sat, 08 Jun 2019 15:43:04 +0000

Why Use CSS?

If you follow me or have seen my work, you’ll notice that CSS is a language I love to use in almost every project/pen I do. This being because it is easily customizable and can easily be read by other developers to change to their liking. Yes there are Javascript libraries for making shapes and animations but why make it harder on yourself? You can check out my Intro to CSS if you’re interested in learning the basics before reading the rest of this article.

It’s Easier then it looks

Using CSS to make illustrations is easy if you think of it like this. Almost all images, designs, drawings are made up of simple shapes, lines and mixtures of colors, depending on the subject. CSS allows the developer to place different divs/elements on top of each other. You can do this using z-index . By using z-index you can move divs/elements to different layers of your page. You can read more about div position here. A quick exercise you can try to see how easily you can make a image/object out of shapes is to think of something and draw it out on a piece of paper using simple shapes. You’ll be surprised how much easier this makes the process and it shows you how many divs you will eventually need. Here is an example:

.div {
position: relative;
z-index: 1;
height: 10px;
width: 10px;
background: red;
}

Using it to your advantage

Not many people know the power that CSS has to offer, and by learning how to style a website or create a illustration using Pure CSS it can set you ahead of the game when coding a website or showing off what you can do to a page to grab a viewer’s attention.

DEV Community: Conner Luzier