Author: agrublev

Homework #2

Written by agrublev on . Posted in Uncategorized. Leave a Comment

Go to repl.it and start on the Project Homework #2 here are some helpful steps:

1. It will initially load index.js file, you need to select the index.html file instead!

2. You can now start adding code inside the <body> tag! But make sure you click the Start Server button first!

It’s very important if you want to see your changes!


3. The image of the final result is found at http://x.co/hw2result
4. The list of elements is at http://x.co/hw2list

MAKE SURE TO ADD THE wrap DIV AFTER THE HEADER AND IT SHOULD WRAP EVERYTHING ELSE INCLUDING THE FOOTER!!

If you are having issues with other-stories consider that other-story is almost identical to main-story 😉

Also if icons are not working, or you prefer codepen you can paste your divs in here https://codepen.io/agrublev/pen/rqdMpZ to see the working version with livereload and no server start needed!

Class Recordings from Classes 1, 2, 3, and 5

Written by agrublev on . Posted in Uncategorized. Leave a Comment

Class 4 was mainly recap so it was not recorded. If you 

Class 1: https://angelprivate.s3.amazonaws.com/teaching/RECORDINGS/Class1.mp4

Class 2: https://angelprivate.s3.amazonaws.com/teaching/RECORDINGS/Class2.mp4

Class 3: https://angelprivate.s3.amazonaws.com/teaching/RECORDINGS/Class3.mp4

Class 5: https://angelprivate.s3.amazonaws.com/teaching/RECORDINGS/Class5.mp4

Introduction to HTML – Class 3

Written by agrublev on . Posted in Class Reference, Exercises. Leave a Comment

(please wait until class to go through this page!)

In today’s lesson, we will begin to cover the basics of building websites. The first most important building block of a website is the HTML language, which allows us to give the browser instructions to render our website.

Exercise 1: Add some boxes (div tags)

In the below code editor add some div tags, and see your resulting boxes!

See the Pen MakeSomeBoxes by Angel Grablev (@agrublev) on CodePen.

Exercise 2: Add an image

Now let’s utilize the self closing tag for adding an image.

Add the img tag and then add the src attribute with the value “http://x.co/myimg”

See the Pen MakeSomeBoxes by Angel Grablev (@agrublev) on CodePen.

Exercise 3: My webpage

Let’s build a simple website by simply adding a number of div tags with the appropriate class names.

See the Pen MyWebpage by Angel Grablev (@agrublev) on CodePen.

The final result should look like this:

See the Pen MyWebpageFinished by Angel Grablev (@agrublev) on CodePen.

Please sign up for repl by going to this link http://x.co/joinrepl 

There should be one assignment named “Simple Page for yourself” which is due next Tuesday!

Useful Chrome Extensions (with video overview)

Written by agrublev on . Posted in Uncategorized. Leave a Comment

CSSViewer

With this extension you’ll be able to hover over any element and immediately see the applied styling nicely organized like this:

Webappalyzer

Sometimes it can help you to find out what your favorite (or inspirational) websites are using! With this extension you get a nice glimpse into the types of libraries/frameworks the website is using:

Web Developer Toolbar

One of the oldest, but still helpful, extensions around. It does a huge variety of different things like:

  • Outlining different types of elements
  • Managing CSS (like changing the CSS on the page)
  • Resizing the page
  • Validating your HTML/CSS
  • and a lot more!

Web Developer Checklist

A great list of items you should make sure your website does or has. And if you missed something it has a link that explains how to add it.

Grammarly

Not necessarily web development focused, but a good extension to ensure your personal and work life have a higher level of language comprehension (or at least to make it appear so!). This extension will automatically make some quite advanced suggestions how to improve the text (emails, comments, etc) you write!

Even more!