Web Courses Academy Blog

Web Design Bootcamp – Week 5 – Simon’s Diary

Author: Simon
Hi! I am a complete beginner in webpage designing. I didn’t know anything about HTML and WordPress before I joined WCB Bootcamp. Half way through the course and I am amazed how much I have learned and progressed. Looking forward to what comes next.
IMG_1372
Quick jump to topics
Sharing is caring

Day 16 – Structural HTML – Learning Portfolio

I got to the school nice and early again set up my computer, water and a cup of tea and continued trying to finish my Happy Café mobile version. Then everyone arrived and we got started Cylis was asking us about some of the stuff that we did on Thursday and how to do it.

So, we started by having a quick review session to remember the things we did on Monday and what these things were and what they did. Then we went into the Web Courses Bangkok Directory then into project sites and in to the Carl Heaton Learning Portfolio.

From here we opened up the programme Sublime and had to try and remember how to start it up and to get the text in to HTML. Then we discussed the difference between Head and Header and the different parts of the page. Such as Head, Navigation, Main and Footer. Then we were walked through the stages of how to write the code for the head which included how to export the Logo picture and what to use for the writing.

OOOHHH! I forgot we also have to always start with a Meta which is a universal font reader then we also have to label the top tab so we know what we are looking for. Again, there were lots of mistakes along the way but it started to look good.

 

sublime

 

It was around this time we went for lunch. We went to the usual food court and had a great Pork and noodle soup tasted great and we got a seat early this time so we didn’t have to walk around looking for ages. (this is an important tip esp. for the Monday as it gets so busy!)

 

thai noodle soup

 

Back after lunch we continued with the Learning Portfolio and did the main part and found out how to create a CTA and were to send it and finally the footer. We were checked at every stage by Cylis and he helped if we did anything wrong. So, next job was to replicate the About page the same way.

This should be easy I thought! To start off I got it into HTML and labeled the tab and started putting the hero image in. Then I went back and checked the Home page and found out I had missed out the > This symbol is so important as it is the start and finish of everything!! I found out that ANY spelling mistakes or anything such as missing a full stop will completely mess up what you are trying to do. So you need to be very precise.

Cylis had to keep telling me “What is missing here? Where is this going? How do you spell…?”. I hope I will start to remember it a bit better tomorrow.

Day 17 – CSS Exercises

Got in and wrote some of this WCB diary till everyone else was in. We chatted about the homework and Cylis came around and checked everyone’s individually. It wasn’t till this point I got to see the actual work I had done not the HTML written page. I had forgotten how to see the actual page on the internet.

 

sublime

 

Cylis pointed lots of things out that was wrong and during the lesson I slowly was able to correct most of the mistakes. Such as pictures missing, no numbers on the ordered articles no bullet points on the bullet points.

So, we talked about HTML for a little while then Cylis showed us how to extract a real map that is able to zoom in and out and open in a different tab. This is much more useful than a copied map picture. This was great it made it look so much better.
Then we had to change how the address looked as it was all grouped together in one line. So, we learned how to use breaks to separate the lines. And It started looking great!

 

sublime

 

The final part was to add a contact form into the page there is a way to do it easily. We went through a couple of the forms then it was lunch time. Yes, we went to the food court again and had some great food.

Then back to the class and we finished off the other forms it was made more difficult due to the fact that there were different types of forms. This is designed to make sure you get to know the different types of forms.

Once this was completed Cylis introduced us to the letters CSS. Which stands for Cascading Style Sheet. Which looks very difficult. Cylis took us through the basics and showed us a PowerPoint which helps to explain some stuff. But the best way of learning is when we actually do it for ourselves.

 

teacher cylis

 

So, we learned how to use Sublime for CSS then we started by typing things to see what they did. Then we went through the beginning part of the sheet we started by changing the colour of the header of the page. Then we learned how to make the same rules apply to all pages not just one.

This is very important otherwise you could be making one change multiple times on the other pages. From here we learned how to change the font’s colour and size. Once this was done, we had to position it in the centre. We finished this and it was time to go home. Cylis explained the homework and we all went home.

Day 18 – Getting Style Info from a XD – Learning Portfolio

Came in and finished off some of this diary got me tea and got started at 10am waiting to talk about the homework but we went straight into what we were doing yesterday we continued with the Learning profile Home page.

 

sublime

 

We had another PowerPoint about CSS and it was very complicated as there are so many things to learn. Today the owner of Web Courses Bangkok came in. He came in to the class and introduced himself to us all and he seemed like a real nice guy which is lucky as he will be teaching us further into the course.

He was very kind and bought lunch for us all. So, we decided to have the sandwiches again and yes I had my Philly Steak sandwich again and it didn’t let me down. The owner’s name is Carl he was very interested in how everyone was doing and about our projects. After lunch we continued to work on the home page until the end of the class.

Day 19 – Inspect Element – Learning Portfolio

Our homework was to finish the header on the Home page of the Learning Profile page and for extra points we could try the footer on the home page.

Cylis wanted us all to move closer together in the classroom so it was easier to teach and learn together.

I had been able to move the Twitter and Facebook links over to the right but it completely changed the size of the footer.
Once we had finished the footer and the Home page was finished. We moved on to the about page. Here a lot of it was the same as the Home page because we had already done it in CSS there are so many different things that you can change and so many different labels you have to write in CSS that it was impossible for me to remember and 100%.

sublime

We decided to have the sandwiches again for lunch and I had a chicken curry for a change which was nice but not as good as the Philly Steak. After lunch we worked on the profile and contact pages. This lesson for me was so confusing and I tried to do stuff for myself but every time I tried something it was wrong and I ended up waiting for Cylis to do it correctly on the board.

At the end of the class everyone went home and Cylis asked to have a word with me. I knew he was going to tell me not to give up and to persevere with it. But it was more a case of encouraging me and letting me know that not being able to do CSS is not the end of the world and I we will move on to the next topic soon. I was very encouraged by Cylis as he could see I was struggling and he wanted me to know there was light at the end of the tunnel. He also said that I should keep practicing with the CSS as it was like speaking a new language you would never learn it in a couple of days. So, with this I felt much better and felt that I could continue and go home and do the homework.

Well I tried to finish off the pages I was able to get all the pictures opening up in different windows which I couldn’t do before. I also got most of the boxes in on the form on the Contact page.

I wasn’t able to make the “Your Message” box to get bigger and I couldn’t space them correctly. Also doing this I messed up the footer. So, looking forward to Monday’s class to see what I did wrong and how to fix it.

 

[text-blocks id=”59324″]

More great articles
There is more where this came from
Join our monthly newsletter packed with course dates, latest articles, free resources and job opportunities

Sorry. You must be logged in to view this form.

Promise to only send you useful interesting newsletters once a month.