I began creating the html file of the project and added css to it. Using the mock up design as guidelines I was able to create the webpage. We then built the design around the php that was helped out by Verity and Kyle.
Below are screenshots on how I did it:
Adding it with the PHP
Outcome from converging the php, html and css
I then added media queries to the project in order to make it responsive to different screen size.
Overall I am very pleased with the outcome of the project as we were able to collaborate as a team together to create it. It was very important that we all shared the same goals and ideas and were up to the challenge. I was able to learn a lot about the fundamentals of php and how they are used to create databases for a website. Our knowledge and understanding about databases allowed us to create a recipe website that functions in the ways we planned out initially. The design as well is clean and bold and therefore easy to understand navigate with the users. Despite many trial and errors we were able to achieve our goals.
To begin the design of the webpage I had to wireframe the design using Photoshop. In order to understand how to do it I looked up video tutorials on Lynda that taught me it.
The video proved to be highly useful as it allowed me to understand the importance of wireframing and how it could be done.
From there I went on to designing my webpage using wireframes on Photoshop. Below are screenshots of how I did it:
The wireframe experience let met understand the importance of laying out the webpage so that they are positioned consistently. It would also be handy when measuring the pixels and scale of the later boxes in CSS.
I then went on to creating a mockup design by adding colours and drop shadows to let me get a better idea on how it would look when designing with CSS.
After debating a lot about the colour and theme of the design we decided to change it to a more blackboard design.
Overall this experiment has taught me a lot about the importance of preparation when looking design a webpage. The techniques were very useful to pickup and will prove to be handy in the future.
At today’s workshop we continued to create more features for our webpage. We were asked to design a navigation bar. We learnt how to make an unorder list. We would then create a link for the different tabs in order for it to become interactive. After that we were introduced to Filezilla which is a FTP software designed to export webpage designs on to the web.
Finally we turned our HTML files into PHP in order to make the webpage more versatile.
Below are screenshots of what I did.
The two screenshot above shows how I created the navigation bar from last weeks workshop using HTML and CSS. I started of unorder listing them on HTML before moving on to CSS to customise the text.
The screenshot above shows the outcome of my navigation bar. I was able to divide the “home” “about” and “contact” and use the hover tag to allow them to react when the mouse hovers over them. Making them a hyperlink.
The screenshot above shows what happens when I click on one of the hyperlinks. It shows that the link works however the navigation bar is no longer there and therefore I am unable to navigate myself back to the homepage. This leads on to the next task we then did in order to make the navigation bar accessible on different pages.
The two screenshot above shows how we changed the HTML file into a PHP file. We created an entirely new PHP file which would hold all the navigation tags. We then changed all of the HTML files into PHP files. This will allow the navigation bar to be visible in all tabs.
The screenshot above shows the outcome after changing the HTML file into a PHP. The URL also shows how we used Filezilla to export the webpage on the web.
I was pleased with my approach to the workshop as I was able to go through with it quite easily and achieve the learning objectives.
At today’s workshop we looked further into CSS using the software Brackets. We were assigned to a mini task. This task involved creating a homepage of a website using HTML and CSS.
Below are screenshots of how I created my homepage using different expressions:
The screenshot demonstrates how I was able to create my own, container, box, title and insert the sample images that were provided. All of which was done using HTML. From there I was able to add expressions to the generic block elements (div) on CSS. It allowed me to customise the style of my box, layout of the page, font colour, font size, background, background colour and image hover.
Below is the screenshot of the outcome of my homepage design.
Overall I was very satisfied with the outcome of my homepage. I was able to demonstrate my understanding of how CSS and HTML works. The task did take a bit of time to finish but that could be due to the lack of practise I have has with HTML and CSS. I feel that this workshop has been very helpful in further developing my knowledge on HTML and CSS. It has allowed me to get a better understanding and idea of how to create a webpage and will be very useful for future references.
Today we looked further into CSS with Brackets. We learnt about the different dictations that allowed us to create a box with writing inside it.
Below are screenshots of the different things we did with CSS:
This is a screenshot of how we created the boxes and added, background, padding, margins and borders. I also went on to change the font style of the text to Helvetics.
This is a screenshot of the outcome of the CSS script
We were then asked to make the scripts to react when the mouse is hovered using the “hover” command. The screenshot shows how I coded the boxes it to tilt when I hover the mouse of them.
This is a screenshot of the outcome from tilt code.
This is a screenshot of when I coded the boxes to morph when the mouse hovers over them.
This is a screenshot of the outcome of the morph code.
I then attempted to make the background colour of the boxes go dark blue when hovered on.
This is a screenshot of what it looks like when I now hover the mouse over the box.
Overall I found this workshop to be very interesting as it allowed me to understand how CSS works better. I also found it to be quite easy to do and was happy to know that there are plenty of resources on the web to help you with the codes if needed. This will allow me to be more confident when working on my own individual project that involves CSS in the future.