Challenge #2

Posted on January 12, 2022 by Ann

codepen.io is an online tool to quickly test out ideas. And if you set up a free account, you can save your work, save your https address, and then give that https address to someone else to look at your work.

Special Characters like the copywrite sign, trade mark sign, arrows, less-than or greater-than sign can be found: https://css-tricks.com/snippets/html/glyphs/#top-of-site

This will be a new project about a website that sells Chuck Taylor Converse Shoes.

  • Use the codepen.io or Visual Studio Code editor to write the code.
  • The challenge is to put everything into an <article> tag.
  • Style the image for a height and width of 250 pixels.
  • Use the &rarr; special character to show the rightwards arrow.
    • Below is how it is written as code AND what it looks like on the screen:
  • Use an unordered list.
  • Add a <button> button.

Posted in Web Developer Course | Tagged , , , | Leave a comment

Challenge #1

Posted on January 12, 2022 by Ann

How to put all images into a new folder:

  • Hover your mouse over your project’s name.
  • Click on the “new folder” icon.
  • It will open up a new box to write what you want to name your folder.
  • Name your folder something like: img
  • Then drag and drop all of your .jpg images into this new folder.
    • Make sure you direct your HTML adding the new folder’s name:
      • src=”headshot.jpg” (before change)
      • src=”img/headshot.jpg” (after change)

Challenge #1

Write everything in an <aside>.

  • Write a <h4> heading.
  • Write an <ul> unordered list for three things inside of one <li> list.
    • Write an image code:
      • <img src=”” alt=”” width=”75” height=”75”/>
    • Write an anchor code:
      • <a href=”#”>How to Learn</a>
    • Write a paragraph code:
      • <p>By Jonas</p>

Posted in Web Developer Course | Tagged , , , | Leave a comment

Installing Additional VS Code Extensions

Posted on January 12, 2022 by Ann
  • Image preview – shows small images on the left side of your HTML code in the gutter.
  • Color Highlight – it styles css/web colors found in your document.
  • Auto Rename Tag – it automatically renames paired HTML/XML tags
  • Live Server – it is able to launch a development local Server with live reload feature every time you save your project.

Posted in Web Developer Course | Tagged , , , | Leave a comment

Structuring our page

Posted on January 12, 2022 by Ann

HTML containers:Group content into logical parts.

<header>
<nav>
<div> - is a generic divider. Used before HTML 5 came out.
<article>
<footer>

“&copy” puts a Copyright C with a circle around it.

Semantic HTML

  • Use <strong> and <em>, <header>, <nav>, <article>, <footer> to give elements meaning.
  • Helpful in search engine optimization, so that search engines like Google will be able to understand the structure of your content.
  • Important for accessibility for people who rely on screen readers to consume your web pages.

Posted in Web Developer Course | Tagged , , , , , , | Leave a comment

Hyperlinks

Posted on January 11, 2022 by Ann

To create a hyperlink in HTML, you need an anchor tab followed by a href, like so:

<a href=”https://developer.mozilla.org/en-US/docs/Web/HTML”>MDN Web Docs</a>

That will look like MDN Web Docs (in blue or purple and underlined) on your website. When someone clicks on it, it will redirect your page to the linked website.

If you want to open a new tab to the new website you can add a target=”_blank” like so:

<a href=”https://developer.mozilla.org/en-US/docs/Web/HTML” target=”_blank”>MDN Web Docs</a>

To create a hyperlink in your own HTML file, in Visual Studio Code, click on New File

A empty block will pop up for you to name your new file. We will name it: blog.html.

It will open up a new page in VS Code to write your new code on.

If you don’t have a link yet, or you want your page to scroll back up to the top, just write a # symbol in it. Like so:

<a href=”#”>No link. Only a place holder.</a>

Posted in Web Developer Course | Tagged , , , , | Leave a comment

Images and Attributes

Posted on January 10, 2022 by Ann

Images

To show an image in HTML, you need to :

<img src=”title of picture.jpg” alt=”description of picture” height=”50” width=”50 />

In English, you need to type the image source; the alternative: so it is able to be read to blind people, or as a search function in Chrome or another browser; setting the height or width is optional.

Attributes

Following from: https://www.w3schools.com/html/html_attributes.asp
All HTML elements can have attributes
    • Attributes provide additional information about elements
    • Attributes are always specified in the start tag
    • Attributes usually come in name/value pairs like: name="value"

Attributes are things like <html lang=”en”>, and <meta charset=”UTF-8” >, and <img src” .jpg”>

Tag 			Attribute
<img>			src
<meta>, <script>	charset
<a>, <link>		href

Posted in Web Developer Course | Tagged , , , | Leave a comment

How to save word documents in GIT

Posted on January 7, 2022 by Ann

How to use git for version control of files.

  • Open terminal of the directory where the content exists.
  • Right click on the directory, and choose “open in terminal”. (blog)
  • Type “git status” then press enter. That tells you what you need to commit.
  • Open terminal of the directory where the content exists.
  • Right click on the directory, and choose “open in terminal”. (blog)
  • Type “git status” then press enter. That tells you what you need to commit.
    • New things are written in red.
  • Type “git add blog_notes.odt” to add blog_notes.odt to stage.
    • Staged new file or modified things are written in green.
  • Once you are staged, you know that you can commit.
  • Type ‘git commit -m “Elements – text and list” ‘
    • Type your message with specific information of what is the new saved change between quotes.

Useful commands:

  • git status
  • git log
  • git diff

Posted in Web Developer Course | Tagged | Leave a comment

Text Elements and Lists

Posted on January 7, 2022 by Ann

Text Elements – Section 2

We learned about <strong> instead of <b> to bold text. And <em> emphasize instead of <i> to italicize text. Also, about headers <h1> to <h6>

<! – – to commit out something – – >

List Elements

<ol> for ordered lists or numbered lists

<li>List Item</li>

</ol> to close ordered list

<ul> for unordered lists, or bullet points

<li>List Item</li>

</ul> to close unordered lists

Posted in Web Developer Course | Tagged , | Leave a comment

Basic HTML

Posted on January 7, 2022 by Ann

This is the basic HTML you need to show on a web browser.

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Fundamentals</title>
  </head>
  <body>
    <h1>HTML Fundamentals</h1>
  </body>
</html>

Posted in Web Developer Course | Tagged , | Leave a comment

Set up Visual Studio Code Editor

Posted on January 6, 2022 by Ann

Set up Visual Studio Code Editor

  • Installed Prettier.
  • Installed One Monokai Theme color editor.

Made and ran html in both Firefox and Brave browsers.

  • Go to Explorer, or to the double page icon on left side of Visual Studio Code.
  • Then click blue “Open Folder”, which opens up your computer’s file directory.
  • Click where you want to save your new html files, and open it up.
  • Click the file icon button with a “+” sign on the upper right side under the OK button.
  • Type your “Folder Name” in the space provided and click the “Create” button.
  • Press “Okay”.
  • Now in Visual Studio Code, hover over the newly created name and click on the “New File” or the paper looking icon.
  • Type “index.html” or whatever you need and press enter.
  • Start coding and saving!
  • To test your code, go to your index.html file in your computer and double click it to active or run it. In my case, Firefox browser pops up and shows how my code looks,
    • or you can install the “Live Server” add on in VS Code and click on “go live” or “port 5500” at the bottom of the code editor!

Posted in Web Developer Course | Tagged , , | Leave a comment