[Coding] What I’ve learned 7

The things I’ve learn this week is a lot. I’ve watch tutorials on how to make a responsive website from scratch, but they’re not from Dreamweaver. There are few videos whereas Dreamweaver is the program they’re using but the rest is using a different program. I’ve also watch a tutorials about making a navigation only and some other stuff. There’s other things I’ve done too like researching and reading some codes.

The link where I search for codes is here


It really helps me that much and it has a lot of codes there whether it’s HTML, CSS, JavaScript or JQuery. Those things I’ve mention are the only thing I visited.

Here’s the link of the tutorials I’ve watched and the videos that helped me to make a website.


There’s actually a lot more than that. I will just give the ones that really helped me and the ones that I can actually find in my history. As you notice, the most videos I’ve watched is about navigation. It gives me really a trouble understanding the responsive navigation.

[AT02] Website Design

Designing and programming website is not easy for me. I have to read manuals and watch tutorials just to do it right. I know that I probably made some mistakes there and I won’t deny it. Some of my programmer friends gave me some tips and ideas about making a website and here, I made a simple one.

Firstly I look for design inspirations and here’s some of them:



After that, I make a mock-up design using balsamiq and arrange the possible things i want in my website. Doing this helps me to set up my website even if it’s just a simple one.


The final website design looks like this. I made 2 website design just to make sure which is better.

It’s a responsive website and here’s the screenshot of different browsers



[Coding] What I’ve learned 6

What I’ve learned this week is about CSS Selectors and researching more about codes.

I’ve learn that any HTML element can be a selector. You can modify <ul>s, <table>s, and even the entire <body> by selectingul, table, and body, respectively.

in CSS there’s a very special selector you can use to apply CSS styling to every element on the page: the  * selector. After learning this I straightly jump for making my own website and researching on how to make every bits of it.

In here I’m really having trouble making responsive website navigation.
I’ve search the possible codes for them and tried it in Dreamweaver. I even studied the codes but it’s hard to understand or I’m just confused. By studying what I’m doing is changing / removing the tags one by one to see what it is in the preview.

Here’s the link of the responsive navigation I use and trying to learn them:



Create an Absolute Basic Mobile CSS Responsive Navigation Menu



[Coding] What I’ve learned 5

What I’ve learn this past few days  is about CSS overview and design a button for your website.

I’ve already learn that the CSS stands for Cascading Style Sheets and its purpose is to design the appearance of the HTML. CSS can be created as a separate file or you can write the style directly in the html. The two things that you can do in HTML is write <style> </style> and the direct one <p style=”colour: red”; >.

To make sure the HTML can see the CSS file, you should write <link type=”text/css” rel=”stylesheet” href=”stylesheet.css”/> above <head> tag. The closing tag here is the same like the <img> tag.

CSS syntax is different from the HTML. The general format looks like this:

selector {
    property: value;

selector can be any HTML element, such as <p>, <img> or <h1>. just take off the <>s on them. For the properties, you can set many for one selector and they end in a semicolon. The importance of semicolons is it tells the CSS that one property-value pair is over and it’s time move to the next one. Without semicolons, it’ll become confused and your page won’t look right.

And the rest I’ve learned is just about styling the HTML by using the CSS.

The ‘design a button for your website’ lesson is a practice to make a button and then add style on it using the CSS. I’m using the <div> and <span> tag here.