Day 1: Frontend

Development Bootcamp – Day 1: Frontend

Beep.. Beep.. Beep..! Huh? What 7:30, why?

I can’t remember a Sunday morning I had to get up this early. But boy I got out of bed easily this morning, extremely excited for the first day of the Codaisseur Bootcamp.

After a nice and relaxing journey by Metro I arrived at WeWork Metropool in Amsterdam, my “home” for the next 8 weeks. Being a bit early gave me the opportunity to grab a cup of coffee and meetup with a fellow student. A few moments later the others arrived and after some short introductions we could start with the kick-off of the bootcamp.

“Prepare yourselves for 8-weeks of typing enormous amounts of code, solving problems and lots of coffee” – pretty much sums up the kick-off presentation.

After the kick-off Tjin Au Yeung, a web developer at Usabilla and former trainee of Codaisseur took over for the Introduction to HTML, CSS & Frameworks.

HTML – Stands for “Hypertext Markup Language.” HTML is the language used to create webpages. “Hypertext” refers to the hyperlinks that an HTML page may contain. “Markup language” refers to the way tags are used to define the page layout and elements within the page.

We started off with the basics of HTML and learned how to structure a page using different tags like headings, paragraphs; Giving attributes to the different tags and learned about nesting and the parent-child relationship of elements.

Some examples
<h1></h1> –> Is a heading tag
<p></h1> –> Is a paragraph tag
<ul> –> Parent of li
     <li></li> –> Child of ul
    <li></li>
</ul>

CSS – Stands for “Cascading Style Sheet.” Cascading style sheets are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page’s HTML.

After creating the structure of our first web page with HTML is was time to “beautify” our page. This is done by selecting html tags directly or selecting elements by giving them a class or ID.

For example if we want a paragraph of text to be red and centered we would write the following CSS.

p {
color:red;
text-align: center;
}

Framework – Bootstrap

Bootstrap is an open-source Javascript framework developed by the team at Twitter. It is a combination of HTML, CSS, and Javascript code designed to help build user interface components. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It is also called Front-end-framework.

I was already familiar with both HTML & CSS and had already used Bootstrap for several projects. So today was a great recap for me of the knowledge I already had.

I’m really looking forward to tomorrow as we will start learning to basics of “Ruby”.

See you tomorrow,

Julian

Want to see what I created today? Please visit http://first-website.webhippy.com/

Leave a reply:

Your email address will not be published.