Let's learn Web Development [#1]

Jan. 5, 2021. Project 1 mid-review : chaneeMinbak

I. Status quo : learned HTML, CSS, JS

Dec. 8 2020 - Jan. 5 2021
I had made chanee Minbak site for learning frontend languages : HTML, CSS, and Javascript.

challenge #1 : top nav bar

It was really hard to recognize how to develop dropdown top navigation bar. It was outstandingly difficult to detach sub ul from its parent. The problem was that sub ul was at the same level of parent's li s.
following : wrong one. sub ul not nested in li .

<ul>
	<li class='where'><a href='#where?'>where?</a></li>
		<ul id='ul1'>
			<li><a href='#intro'>intro</a></li>
			<li><a href='#service'>services</a></li>
			<li><a href='#announce'>announce</a></li> 
		</ul>
<ul>

following : right one.

<ul>
	<li class='where'><a href='#where?'>where?</a>
		<ul id='ul1'>
			<li><a href='#intro'>intro</a></li>
			<li><a href='#service'>services</a></li>
			<li><a href='#announce'>announce</a></li> 
		</ul>
	</li>
<ul>

challenge #2 : background-image sliding

I had thought of changing background images as the user clicks right/left arrow ( >,< ) at the end of the image. It was very difficult to implement it with css's background-image attribute. It was so hard to manage it with Javascript.
I was surfing websites in my duty work, and found the alternatives; using image layers that are hidden ( display:none ). All I needed to do is make a loop to choose which layer of image should be display:inline . I am not satisfied of the loop function, but I reckon it will be all right to just leave it this way. non-value-added.

challenge #3 : ratio

I frequently used images or iframes for Youtube, Maps, and etc. I wanted it to be seen as a fixed width-height ratio. I decided to use wrapper that has responsive width and height according to its view port dimension.

challenge #4 : fetch content html

I first thought it is inefficient to make each html file for each page, because the top nav bar and welcome-box was always at the top of every page. I thought the only thing that is needed to be changed is the content itself.
I used fetch().then() function that I once saw at the opentutorials . Later, I found out it was one of the Javascript libraries : fetchAPI .

challenge #5 : z-index

when I was making the change-prev button used as a button for sliding pics, I found <div> s that are either display:absolute or display:relative has a z-index for placing layouts. Still not sure I know well..

challenge #6 : responsive web implementation

This website was designed for the source web of a web app. Therefore, I was initially thinking that this site is 'mobile-oriented'. However, I wasn't even able to make a desktop one. So, as soon as I made my desktop prototype, I implemented @media query. I made stylesheet separated by the single viewport threshold; dividing mobile and desktop. I shortened the top nav bar into hamburger image and made it show as I click the image.

II. What is in need?

need #1. boards.

I want to make FAQ & QnA boards. It is difficult to write and edit when each content of the board are stored locally at the server as files - especially when it comes to Github Page because the user needs to 'commit' a content when appending or editing files.
I don't like dirty adjustements. I shall just host a free server and a MySQL database domain.

need #2. reservation calendar.

I want to make a reservation page where the user can see the booked schedule and choose the left dates at a same page. in order to implement this, the calendar (implemented by JS) should be able to get reservation records, which should also be editable.
both needs require a database work. I need to learn backend now.

III. plans for next week.

1) backend : PHP

php tutorials
Now, that was why I decided to learn PHP for backend. I don't know how a 'backend' is coded - at all. I don't know how I should link it to frontend. I should get a grasp of 'backend' before I learn just the right language for myself.

2) frontend : javascript, jQuery

need to be familiarized with Javascript.