BeccaRankinDesign




.About.

About

"Every day has a lesson to learn for the next" Becca Rankin

I am currently completing my degree in Digital Media Design specifying in web design. This is developing my skills in coding. As an individual I am not only capable but also confident, and acquaintances have described me as both approachable and reliable. I particularly enjoy being part of a team whilst also welcoming individual challenges. Taking on responsibilities and adapting to tasks when required has always been one of my best attributes.


My technical skill set is as follows:
  • HTML
  • CSS
  • Bootstrap
  • Adobe Illustrator
  • Adobe Photoshop
  • Adobe InDesign
  • Flexbox
  • PHP
  • Magento

Email rebeccarankin002@gmail.com Behance behance.net/Rebecca_Rankin

.Coding.

Coding

Creating a HTML file

The way to set up a HTML document is by following this tutorial. When writitng your code do not include the spaces.

< ! DOCTYPE html >
< html >
< head >
< link rel="stylesheet" href="style.css" >
< title > First Website < /title >
< /head >

< body >

< div id="navbar">
< ul >
< li class="active" >< a href="#" >Home< /a >< /li >
< li >< a href=" ">About< /a >< /li >
< li >< a href=" ">News< /a >< /li >
< li >< a href=" ">Contact< /a >< /li >
< /ul >
< /div >

< h1 > My First Website < /h1 >

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

< /body >
< /html >

Explanation of the tags


head:
The document title and other information used by search engines.

title:
The title of the document.

body: This includes all of the text, content and instructions for the document.

h:
This stands for heading and putting 1, 2 or 3 etc. up to 7 governs the text size with 1 being the biggest and 7 being the smallest.

img src:
This tag is for including images, src is for source so the file can locate the image.

p:
This tag creates a new paragraph.

a:
This stands for anchor, and it indicates a link to either another part of the document or another document.

div:
This defines a division or a section in an HTML document. The tag is used to group block-elements to format them with CSS.

id:
Each element can have only one ID. Each page can have only one element with that ID.

class:
You can use the same class on multiple elements. You can use multiple classes on the same element.

ul:
This stands for unorderd list.

li:
This stands for list.

Creating the CSS

The way to set up a HTML document is by following this tutorial. When writitng your code do not include the spaces.
Name the document style.css and make sure the name of the document is written correctly in the html file.

body {
background-color: #DBDCDD;
}

#navbar {
float: right;
}

#navbar a {
color: white;
font-family: 'Lato', sans-serif;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: #111; }

.active {
   background-color: #4CAF50;
}

h1 {
text-align: center;
margin-top: 2%;
color: #2789BA;
font-size: 3.5em;
font-family: 'Lato', sans-serif;
font-style: italic;
font-weight:300;
padding-bottom: 3%;
}

Explanation of the CSS



CSS selectors are used to select HTML elements based on their element name, id, class, attribute, and more.

The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

The element selector selects elements based on the element name.


Selecting an ID

The ID selector uses the ID attribute of an HTML element to select a specific element. The ID of an element should be unique within a page, so the id selector is used to select one unique element! To select an element with a specific ID, write a #, followed by the ID of the element.

Selecting a class

The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.

TRY IT YOURSELF
Easiest ways to start writing code is by downloading either Subline Text or Atom. The platform that I use is Atom but that it due to personal preferece, there are not any huge differences between the two.
Sublime Text https://www.sublimetext.com/ Atom https://atom.io/
Here is a link to a website I have created:
WWF Jaguar Website: https://rebeccarankin.github.io/Jake-the-Jaguar/

.Graphics.

Graphics


This is a preview of the work I have completed. There are branding pieces, app design and advertisements.