Author: agrublev

Creating a real website tutorial

Now that we’re going to start work on our final projects building a real website (meaning not using Codepen or the exercise tool) we need to learn the basics of how we create websites within our computer.

We have two options.

  1. A basic website without any fancy reloading or LESS (CSS) language
  2. AAn advanced website that we can quickly preview without reloading the browser and using LESS for prettier CSS

Basic Website

First create a new folder on your computer, ideally inside a folder that will contain all your web projects. A good name can be “Development” or “Projects”

Creating folders on a Mac

On a Mac you can navigate to your user folder from the left sidebar like this:

Then up in the menu select File -> New Folder

Name it one of the two names Development/Projects. Open it, then create your new project folder. For example “First Sample Project”.

Creating folders on Windows

On Windows you can navigate to your Documents folder from the left sidebar like this:

Then right click and go to New -> Folder

Name it one of the two names Development/Projects. Open it, then create your new project folder. For example “First Sample Project”.

Initiating your basic website

You can download this basic Zip as a boilerplate to create your simple website or follow the steps. To create a basic website we’ll need just two files.

  1. An HTML file that holds our website named index.html (as this is the default file the browser looks for in a folder)
  2. A CSS file named style.css which will hold our styles

Now you can add your HTML inside the index.html file and your styles in the style.css. To preview your website you can either open it from WebStorm by hovering over the index.html window and clicking on the Chrome icon like this:

Or navigating to Chrome and going to File -> Open File

Then navigating to your folder and selecting index.html

Initiating your advanced website

If you want to use GitHub (recommended) please go to the next section for instructions. Otherwise, for a simpler initiation download the following boilerplate and extract it into your Development/Projects folder. Then rename the folder from advanced to the name of your project like “Test Project 1”.

Running advanced boilerplate

Now open your new project folder with WebStorm. Click on the terminal panel on the bottom of WebStorm. Inside it type the following:

npm install

After that’s complete type

gulp

Your browser should automatically open our website. Now you can make changes to your HTML inside index.html or your styles in css/style.less and it will automatically be refreshed in the browser.

Advanced initiation with GitHub

To start with our Advanced boilerplate using GitHub and creating your own new repository follow these steps:

  1. Go to https://github.com/agrublev/ucsb-web-boilerplate 
  2. Click the Fork button on the top right

  3. Then inside your own GitHub repository which should look like https://github.com/YOUR_USER_NAME/ucsb-web-boilerplate get the Clone url from the green button

  4. Now go to WebStorm and select the menu VCS -> Checkout from Version Control -> GitHub

  5. Enter the URL you copied with your username in it!
  6. Select a parent directory like Development/Projects and then change Directory Name to something like MyProject1

You should now have the advanced project ready. To initiate look for the section above named “Running advanced boilerplate”

Advanced CSS Exercises

Selecting all matching children

When creating a selector, if you add a space after the first selector it will then select all children that match the second selector you specify.

Select immediate children

Selecting only immediate children is done with the character between two selectors

Selecting multiple selectors

To select multiple selectors you use the character between each selector.

Selecting multiple elements with one class

Very often we want to apply the same styling to a number of elements, instead of selecting multiple selectors we just add a new class to each element we want to be selected.

Colors and Sizes

We’ll set a global font-size and then based on it we’ll adjust different font sizes and spacing. We’ll also apply some transparent colors and text colors.

Pseudo Elements

We’ll need to apply a hover effect by using the :hover pseudo element. We’ll also need to select the first, third, and last .child element of .parent by using the :first-of-type, :nth-of-type, and :last-of-type pseudo selectors.

Using LESS

We’ll use the main abilities of LESS by adding a selector inside an element that selects that element and adds a pseudo :hover selector. Then we’ll apply a style to a child of .parent by using the nesting properties of LESS and apply a variable form LESS.

Using GoMockingBird

Getting an account

If you do not have an account email me at angel@ucsbwebdev.college

Using MockingBird

Go to https://gomockingbird.com/projects and select the Final Projects project. Inside it you will need to create a page with your name. All sub-pages need to be dragged into your main page. See video below for detailed instructions!

Looking for design inspiration for your Final Project

Here is a list of websites and quick tips to find a great design base for your final projects!

Theme Forest

Type the type of website you are looking for in the big search field, such as interior design

Then select from the dropdown “Best sellers” to narrow down to the better selection of themes. Click around until you find a few you like.

Template Monster

Find a category in the left column down below that closest fits your idea

For example in my case, I would try “Design & Photography” and “Real Estate Templates”. You could try the search on top of the website as well. Then look for the “Popularity” panel in the left column to narrow it down to either “Best Sellers” or “Top Rated”

Dribbble

If you’re confident in your skills you could just find inspiration in Dribbble. It showcases some gorgeous designs by top artists. Type a search term like “Interior Design website” and results such as:

These should definitely get your design juices flowing! Just ask me and I’ll help you figure out how to imitate the designs!

Good Designers Copy, Great Designers Steal.
– Pablo Picasso

Styling Exercises

Making a button

See the Pen ex-1-e by Angel Grablev (@agrublev) on CodePen.0

Here is what is required:

1. Change the type of element the anchor is. Currently it’s inline, we need it to be more!
2. Add the correct padding, ideally using shorthand
3. Change the color of the text from blue to black
4. Remove the underline decoration added by the browser
5. Add a black border

See working version

Dealing with background images and borders

See the Pen ex-2-s by Angel Grablev (@agrublev) on CodePen.0

Here is what is required:

1. Add the needed borders to each box to match the final result below
2. Adjust the background image of .three so it does not repeat and is positioned at the bottom of the element

See working version

Text manipulation

See the Pen ex-3-e by Angel Grablev (@agrublev) on CodePen.0

Here is what is required:

1. Make the font size of .title 30px
2. Adjust space between .title and .description to be 10px
3. Change the height of each line in .description to equal 1.6em

See working version

Advanced shorthand

See the Pen ex-4-e by Angel Grablev (@agrublev) on CodePen.0

Here is what is required:

1. Adjust the background to be black
2. Position the background image 30px from the left and centered vertically
3. Adjust the text inside to be 70px from the left, 20px from the top and bottom, and 50px from the right

See working version

CSS Code Snippets From Class

Shorthand CSS and Backgrounds

See the Pen CSS Class by Angel Grablev (@agrublev) on CodePen.0

Hero Image Background Properties

See the Pen CSS Class Backgrounds by Angel Grablev (@agrublev) on CodePen.0

Centering the Main Column of your Website

See the Pen Centered Column by Angel Grablev (@agrublev) on CodePen.0

Bullets as a Background Image

See the Pen CSS Class Backgrounds Bullets by Angel Grablev (@agrublev) on CodePen.0

Styling (CSS) Introduction

Adding styles to your page

To add CSS (Cascading Style Sheet) to your website you need to add a  <style> </style> tag which will hold the unique CSS markup.

In our exercise app there is a special panel to enter your styles which automatically adds the style tag for you.

CSS Syntax Intro

To add CSS properly you must follow this syntax

First, we have a selector, this tells the CSS which element we want to add the styling to. There are three ways to select an element:

  1. You can use its class with the selector So if you have an element like
    <div class="hello"> Hi </div>  you would use the following CSS code to make it have a black background  .hello { background: black; }
  2. By using the id with the selector
  3. By using the element’s name (ideally only used for anchor or img) where first we select the parent element then add a space and list the element, for example:
    <div class="button">
        <a href="#">Welcome</a>
    </div>

    We would use the following CSS to make the anchor have green text color

    .button a {
       color: green;
    }

    The space indicates an element inside the selected element.

    The proper syntax to specify each style declaration (each thing you’re changing) looks like this:

We enter the property like background then we enter a colon separator so we can define the value we want to set like red and we must end the declaration with a semi-colon ;

Here is sample code with two declarations:

.button a {
    color: green;
    background: black;
}

You can find a nice list of CSS properties you can use here.