Fabio Ibarra-Fab Academy 2016

The first assignment is to design and make a personal web page, to manage the projects that I will develop during the course, and plan a possible final project.

I had never before experience in web design and programming, but a few weeks before starting the Fab Academy, I took me a while to research about it and I found a few websites that allowed me to introduce myself to web development. I also consulted with a friend who is a web developer and advise me some websites and tools on HTML and CSS.

CODECADEMY

To introduce and understand HTML and CSS code, I used this tool and allowed me to learn the basics of web programming. It has a very clear and friendly interface, allowed me to go step by step learning everything I needed to make a website.

THE BEST...THIS WEB PAGE IS FREE!

SUBLIME TEXT

When I understood the basics of web programming in HTML and CSS through "Codecademy" I tried two very interesting tools for developing web pages. First i use a text editor "SUBLIME TEXT" to write de code and organize better the elements of my webpage.

MATERIALIZE

The first tool I used to make my website was "Materialize". Created and designed by Google, Material Design is a design language that combines the classic principles of successful design with innovation and technology. Google's goal is to develop a design system that allows unified user experience across all its products on any platform.

Materialize turned out to be a very intuitive tool for beginners like me in web programming. I recommend it one hundred percent.

BOOTSTRAP

At one point, seeking to explore another option, I used "Bootstrap", similar to "Materialize" but I discarded it because due to need for certain elements code became very long, in short words, "Bootstrap" needs more time and more code, with "Materialize" i wrote the codes in less time and steps.

SKETCHING

Personally, when I plan new projects I usually draw several ideas, this allows me to explore various options and get the most valid and discard those that do not consider feasible option. I sketch a few options for my web site, below you can see some sketches:

ABOUT GIT HUB

In the first lesson, Neil mention about the importance of using GIT HUB, as repository system for our projects, this tool was totally unknown to me and I had to investigate fairly and observe several tutorials on youtube.

Basically, the steps to start using GitHub are:

1) Create an account in GIT HUB.

2) In my case, i download and install GitHub for windows.

3) Create a folder in your local computer, that you gonna use for your project.

4) Open "Git Bash" in Windows and start to tell GITHUB, who are you and your email.

In the Git Bash window, to start the connection with Git Hub you need to put:

- $ Git config -- "Username"

- $ Git config -- "email"

- $ ls "and press enter"

- $ cd "location of your proyect folder"

- $ cd "select your proyect folder"

- $ git clone "link of your repository created in GITHUB"

- $ cd "select your folder proyect"

- $ git-status "to view the status of your archives in the folder project."

- $ git add "to add a a new file in the repository."

- $ git commit -m "To commit the new file with a comment about your new file."

5)Check in your GitHub account if the new file was added.

6)If your file is in the repository, to finish use the command to push your file in the repository:

- $ git push.

For more details, you can view the video tutorial.

After much searching finally I found a very interactive video about using GIT HUB for beginners.

CONCLUSION

Finally I discarted "Bootstrap", and I decide to continued and finish my website with "Materialize", because the interface was quite friendly and understandable. I am satisfied with the result I tried to make it more intuitive, readable and organized website possible.

Next assignment >>

SELF EVALUATION

WHAT WORKED:

- Legible and attractive grid for my website.

- Functional buttons that allow me to link my site to other external websites.

- Transitions from one page to another.

- Good Organization of the information.

WHAT DID NOT WORK:

- With "Bootstrap" I had not a good experience, coding became tedious and long.

- I had difficulties to center a few images on the grids.

- I had difficulties to attach images to my website and link to external websites.

- I had difficulty changing typography of my website.

THINGS TO IMPROVE:

- Explore more options of shortcuts for web programming.