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”

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.

Getting an account

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

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!

Found a great presentation on some basics!

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

Making a button

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

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.

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.

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.

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

Shorthand CSS and Backgrounds

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

Hero Image Background Properties

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

Centering the Main Column of your Website

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

Bullets as a Background Image

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

There are many important ways CSS can be used to make your website look beautiful. We’ll start with some special background properties and go all the way to advanced website layouts. Let’s get started.

Background magic

There are many different things you can do with backgrounds, set a color, set an image, make it repeat, change its size, change the position, and much more. So let’s look at the different examples.

Background Color

background-color is the simplest one, allowing you to change the background of an element like this

See the Pen simple-background by Angel Grablev (@agrublev) on CodePen.

Background Image

background-image allows us to add an image to the background like this

See the Pen background-image by Angel Grablev (@agrublev) on CodePen.

Okay let’s pause here as a lot of interesting things just happened we need to pay attention to.

1. If you have an empty element like in the example above you will not see the background image unless you set a width and height, simply because an element with no content is invisible (0 height means you can’t see it). You can alternatively add padding as well, but height/width is preferred as you should know the dimensions of the image
2. The background logo image we set seems to appear twice! What happened here? Well there is a background property called background-repeat which is enabled by default, so our background image will repeat down and right to fill the size of the element like this

   

3. We’ll tackle the repeat issue below

Background Repeat

background-repeat is enabled by default, to disable it we must set no-repeat as the value like this:

.background {
    background-image: url(https://ucsbwebdev.fzilla.com/first/logo.png);
    background-repeat: no-repeat;
}

Great, so we’ve applied two background declarations and now we have an image that does not repeat. But what if we also want to have a background color behind the logo in case the element has a bigger width/height than the image itself? Simply apply the background-color as well like this:

See the Pen background-repeat-color by Angel Grablev (@agrublev) on CodePen.

Background Size

background-size is used to specify an alternative set of dimensions to the image. Let’s consider the following three examples:

See the Pen background-size-examples by Angel Grablev (@agrublev) on CodePen.

In example1 we force the width and height of the image to be width = 200px and height = 20px and the image becomes a bit stretched as we’re not keeping the original image’s proportions

In example2 we’re stating that we want the width = 30% which is not based on the width of the image but instead uses the width of the element (which in our case is set to 300px, so 30% is rougly 100px). Because we only define the width the height is actually automatically adjusted to keep the proportion of the image and does not stretch it.

In example 3 we set the width = 100% and the height = 100% meaning it will fit the container (element which has the background image) both horizontally and vertically stretching it to fit.

Now let’s get more advanced with some special background-size properties, consider the following examples:

See the Pen background-fit by Angel Grablev (@agrublev) on CodePen.

In example1 we use a property value called cover which will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off on direction. In our case, it cuts off a lot from the right side to fit it vertically. If the image was higher than wider it would cut off from the bottom instead.

In example2 we use the contain property value which resizes the background image to make sure the image is fully visible while filling the container as much as possible.

In example 3 we specify a width of 10px and a height of inherit, as soon as we set the width or height to be inherit the image will display in its original sizing.

Shorthand Properties

In many situations, we can use the shorthand properties to define a list of declarations in one line. For example, the background properties background-color, background-image, and background-repeat can easily be declared under a single background declaration like this:

.background {
    background: black url('https://ucsbwebdev.fzilla.com/first/logo.png') no-repeat;
}

Also quite commonly we would not specify a margin or padding for each direction, instead would use a single declaration. To specify each direction we follow the following pattern top right bottom left or the way I remember it is using Never Eat Sour Wheat which stands for North East South West. Here are some examples:

.shorthand {
    margin: 100px 0 0 50px;
    padding: 50px 20px 30px 40px;
}

The result is equivalent to:

.shorthand {
    margin-top: 100px;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 50px;
    
    padding-top: 50px;
    padding-right: 20px;
    padding-bottom: 30px;
    padding-left: 40px;
}

Important Trick to Center an Element

Very often we want to have a large panel that contains all our website content, typically around 960px wide (fits in all desktop computer resolutions) which is centered. To do this we use a hack with the margin shorthand which looks like this:

See the Pen padding-margin-shorthand by Angel Grablev (@agrublev) on CodePen.

Or in a browser like this:

Common 3 Column Layout with Flex

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

I’ve added a number of styling just to see it visually, but the important elements of this layout are as follows:

1. .main-wrap has a width of 960px which is a standard and a margin: 0 auto; which keeps it centered on the page
2. .columns is flex with a justify-content: space-between to keep the space between our columns even
3. .left-col has a specific width, this is because very often we want a specific type of content which requires some minimal width
4. .center-col has a % width which is easier to set than doing a calculation ourselves (subtracting from 960 yada yada) and we also add a shorthand margin which adds a left and right margins of 15px. This adds a nice visual spacing between the columns
5. .right-col uses a special feature of flex, when you set a column to be flex: 1; it simply takes up as much space as there is left available to grow. If we did not set this it would look like this

   
   We don’t really want to have that much space between columns do we? With flex 1 it respects the margin from .center-col and takes up the remainder nicely.

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.

If you want to learn Flex inside and out while playing a game these are amazing!

https://flexboxfroggy.com/

http://www.flexboxdefense.com/