sergey

Сборщики вы правильно указали gulp/grunt/webpack -кому что больше нравится, без них нынче проекты не проекты:), bower - это кладезь фронтенда, также нужно уметь пользоваться и использовать препроцессоры sass/less/stylus также кому что, ну если уже в самое начало так еще фотошоп или ему подобное. Ну и базис без которого никуда: HTML/CSS/JS, а вотвсе остальное вас облепит когда погрузитесь во фронтенд:)

А в чем собственно затруднение: ставите картинку города, а поверх ее или opacity или gradient или фон полу-прозрачный

На будущее рекомендую писать через media queries для разных устройств и обязательно!!! в head указывать viewport

media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { ...}
и т.д.

учить как минимум js/jquery

Без кода конечно трудно что-то подсказать, но есть вот такое решение:

$(document).ready(function () {

	$('.........').click(function () {
		$('.........').slideUp('slow');

		if ($(this).next().is(':hidden') == true) {
			$(this).next().slideDown('slow');
		}
	});
	$('.........').hide(); // Hide Content
	$('.........').show(); // Show the "Home" content by Default

});
вместо точек свои классы

на Ubuntu уже давно, в работе использую встроенный gimp и вот это, этого для разработчика более чем достаточно, ну можно конечно еще photoshop через виртуалку, но это дело вкуса.

Вы где-то не закрыли .div, кавычки, одним словом ошибка орфографии. Посмотрите весь код или покажите.
PS:
40 строку смотрите, там ошибка

Если Вы не понимаете что такое система контроля версий, то вам это уже и не надо:)

Как для начинающего - неплохо. В глаза бросается: пустота вокруг заглавия и button. Насчет li уже написали.

Для того к примеру, что можно писать вот такой таск в gulp, и это круто

gulp.task('postcss', function () {
  var processors = [
    colorShort,
    focus,
    precss,
    short,
    size,
    responsiveImages,
    clearFix,
    px2Rem,
    cssNext,
    cssMqpacker,
    byeBye,
    discardComments,
    cssNano
  ];
  return gulp.src('src/css/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('dist/css/'))
    .pipe(browserSync.stream());
});

Кастомизировать

Что собственно мешает Вам это сделать на Bootstrap

Вот тебе пример

@font-face {
    font-family: "Alexander";
    src: url("../fonts/Alexander/Alexander.eot");
    src: url("../fonts/Alexander/Alexander.eot?#iefix")format("embedded-opentype"),
    url("../fonts/Alexander/Alexander.woff") format("woff"),
    url("../fonts/Alexander/Alexander.ttf") format("truetype");
    font-style: normal;
    font-weight: normal;
}

phpstorm и только phpstorm и не заморачивайтесь

PhpStorm (WebStorm) достаточно с головой, и для создания и для редакции... ну а dreamweawer это не "камильфо" имхо.