Subscribe to my mailing list!

wiks.wiki

The public, practical, personal, and political journal of your favorite high IQ bitty.

© 2024. All rights reserved. rss feed

Don't know much about coding ii

25 Mar 2020

Now that we’ve created a website for you to play around with in terms of coding, the world is your oyster! Well, it always was from the start, but now you have the opportunity to learn so much! I’ve always though a website is like a home… you step inside, and immediately you make judgements, whether conscious or subconscious. All the pretty stuff you see on a website, from the setup to the colors to the sizes of text, is all done in CSS, or Cascading Style Sheets. All the text and formatting (bold, italics, underline, etc.) is done in HTML. HTML also provides additional information for the website, specifically in the <head> tag, which gives a site its title, icon, and additional metadata. Now, let’s get messy, baby…

Alright, so if you edit the text in the <p> or <h1>, you can by just replacing the “Hello World” or “I’m hosted with Github Pages.” because who would want to read that, right? Once you’re ready, let’s spruce it up a lil bit.

  1. Make a CSS sheet to hold all of the decor for your site by making a new file using your text error in your given repository. Save it as name.css in your repository folder.
  2. Let's link your CSS sheet with your HTML file. Go back to your index.html sheet, and add in what you see in italics below. Replace "mystyle.css" with whatever you named your CSS sheet. Be sure to save the file after you add it. This piece of code will link the two files together, so that what you do in name.css will be reflected when index.html is generated. 
    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>Hello World</h1>
<p>I'm hosted with GitHub Pages.</p>
</body>
</html>
  3. Consider that <p> or <h1> are both pieces of texts, <p> being a paragraph and <h1> being a header. Click the associated links to find out more. To make them less bland than the pre-set black Arial or Times New Roman font, you can attribute specific characteristics to each type using your Cascading Style Sheet! Go back into name.css and try this, saving it after you've added it: 
    p {
padding: 10px;
border-style: solid;
border-color: blue;
border-width: 2px;
background-color: #9EC7EB;
color: white;
font-family: arial,helvetica;
font-size: 11px;
font-weight: bold;
	}
  4. Commit and push this code in your Github repository, and within a few minutes, see the changes on your page when you hit refresh on your browser!

So, the basis to CSS and HTML web design is that every piece of content or “thing” (including words and pictures) you place on a page is an element. <p> and <h1> in the code of your index.html are both elements. Each element can be broken down as a piece of content, surrounded by padding, enclosed by a border, and then surrounded by a margin– specifically those terms. You can find more information on it here. I highly suggest clicking into every link I attach to these tutorials because it’ll give you a much clearer and more thorough rundown. It’s essentially the basis to all front-end (meaning everything the user sees on the screen) web design.

In the CSS sheet we just made, because we started the line with p (referencing the element <p>), every occurance of <p> in the HTML file linked to the CSS file will reflect the traits listed in it. Every characteristic we change is called a style attribute, and must end with a semi-colon. You can find every potential style attribute here. There’s a ton that you can use, so I suggest using Ctrl + F and then using keywords to find what you want.

If you want to create a specific variation of the specific element type, you can use classes by formatting it as elementName.className in the CSS file. When calling it in the HTML file, you’d call it by referring to it as <elementName class=”className“>. A more specific, unique version of a class is an ID, but I personally don’t use it that often. It comes more in handy when working with scripts, which we aren’t really doing yet.

From here, I suggest you play around text and different style attributes! Create new blocks of texts by introducting new <p> and </p> tags, with your desired text between them, editing your index.html file. Next, we’re going to figure out how to structure your website by using CSS properties associated with box generation, whatever that means. It’s late and I’ve got Tinder for Desktop open just for entertainment, with Sex & The City playing softly in the background… Please get in contact with me if you need any help with the website via Instagram @radiantlimerence. Stay tuned for part iii of Don’t know much about coding, where we begin to give your site some body and structure! Consider looking around the web for design inspiration! xxx

divider

Further reading