AcadeCoders Blog 2016: HTML/CSS (July 18th-22nd, 2016)

2851 0

HTML/CSS

Welcome to the fourth week of the AcadeCoders session: HTML/CSS. This blog post will cover each daily activity of each camp day with various pictures and descriptions. HTML/CSS are markup languages used to code and design responsive and beautiful websites.


Day 1: Monday, July 18th, 2016

We began the day with morning ice-breakers for the campers and instructors to get to know each other better. After these various ice-breakers, the AcadeCoders transitioned to their jiu-jitsu session K2 Martial Arts.

IMG_2735

IMG_2738

IMG_2738

IMG_2704

IMG_2731

 

 

 

 

 

 

 

 

 

 

 

 

Following jiu-jitsu, the AcadeCoders were ready to start coding HTML/CSS! The AcadeCoders were first taught the basics of HTML terminology, body elements, and adding images.

IMG_2742

intro1

IMG_2744

intro2

IMG_2741

intro3

 

 

 

 

 

 

 

 

 

 

 

 

 

Following their morning snack, the AcadeCoders were ready to start their morning challenge! The AcadeCoders did the “Build Your Own Webpage!” challenge where they took what they have learned in the intro and built a mini website.

web1

web2

web3

After lunch, the AcadeCoders took to Morrison park for outside activities and outdoor play! The AcadeCoders played soccer, basketball, and spent time on the play structure.

IMG_2748

IMG_2752

IMG_2753

IMG_2754

IMG_2767

IMG_2771

Following outdoor activities, the AcadeCoders were ready for their afternoon lesson and challenge. The AcadeCoders had a lesson on HTML structures and lists where they learn the structure of how the code is to be outlined with certain tags and attributes.

IMG_2772

aft1

IMG_2773

aft2

IMG_2774

aft3

 

 

 

 

 

 

 

 

 

 

 

 

For the afternoon challenge, the AcadeCoders had to create fake social profiles for characters they like in cartoons or movies with the HTML skills and knowledge they have obtained thus far.

aft4

aft5

aft6


Day 2: Tuesday, July 19th, 2016

Second day of HTML/CSS for the AcadeCoders! The AcadeCoders started off strong this morning with a lesson on HTML structures; learning how to place and use
div tags, span tags, and creating tables

IMG_2778

morn1

IMG_2776

morn2

IMG_2777

morn3

 

 

 

 

 

 

 

 

 

 

 

 

 

Following snack, the AcadeCoders were ready to tackle their morning challenge! They were given the challenge to build a grid of photos that are clickable with link. The theme of these photos was the student’s choice, but clearly Pokemon has been a predominate theme this week.

morn4

morn5

morn6

Following lunch, the AcadeCoders took to Morrison Park for outdoor activities and free-play! The AcadeCoders decided on playing basketball and spent their free-play time on the play structure playing their own games.

IMG_2815

IMG_2818

IMG_2819

IMG_2832

IMG_2839

IMG_2840

Following outdoor activities and free-play, the AcadeCoders started their afternoon strong with an introduction to CSS. The AcadeCoders were taught the basic CSS syntax, selecting HTML elements, links / text decoration, and size and borders

IMG_2781

aft1

IMG_2782

aft2

IMG_2779

aft3

 

 

 

 

 

 

 

 

 

 

 

 

 

After their afternoon lesson, the AcadeCoders were ready for their afternoon challenge! They had to design a button with the HTML/CSS they have learned thus far.

aft4

aft5

aft6

 


Day 3: Wednesday, July 20th, 2016

Third day of HTML/CSS for the AcadeCoders! The AcadeCoders started off the morning with a lesson on CSS selectors. The AcadeCoders were taught how to implement multiple selectors, branching, parent & children classes, and utilizing & cascading.

IMG_2845

css1

IMG_2850

css2

IMG_2858

css3

 

 

 

 

 

 

 

 

 

 

 

 

 

Following morning snack, the AcadeCoders were ready to continue learning CSS selectors. They were taught to implement class selectors, ID selectors, links, and first & nth child.

css4

css5

css6

Following lunch, the AcadeCoders were ready for some fun in the sun! The AcadeCoders took to Morrison Park for activities such as soccer and basketball. In addition to this, they played their own games on the play structure in the surrounding park.

 

IMG_2860

IMG_2899

IMG_2861

IMG_2869

IMG_2866

IMG_2854

 

After outdoor activities and free-play, the AcadeCoders were ready for their afternoon challenge with CSS! They have to use their CSS knowledge for the challenge “Sorting Your Friends”, where the will use CSS’s powerful class and ID selectors to visually separate different classes of HTML elements, which in this case, our friends and family.

IMG_2854

css7

IMG_2858

css8

IMG_2846

css9

 

 

 

 

 

 

 

 

 

 

 

 


 

Day 4: Thursday, July 21st, 2016

Fourth day of HTML/CSS for the AcadeCoders! The AcadeCoders started off their morning strong with a lesson on CSS element positioning. The AcadeCoders got ton enhance their CSS skills with learning how to us the Box Model, incline-block, margins, borders, padding, and negative values.

IMG_2972

pos1

IMG_2974

pos2

IMG_2976

pos3

Following snack, the AcadeCoders continued their lesson and practice questions on CSS selectors. They were taught floating, clearing elements, absolute positioning, relative positioning, and fixed positioning.

pos4

pos5

pos6

Following lunch, the AcadeCoders took to Morrison Park for outdoor activities and free-play! Due to the hot weather, we tried to keep activities in the shade such as twitch and squirt.

IMG_3034

IMG_3063

IMG_3085

IMG_3241

IMG_3245

IMG_3251

After outdoor activities and free-play, the AcadeCoders were ready for their afternoon challenge! They had to build a mini resume that they would send to Google as a junior developer. The resume would summarize all of their skills and knowledge on HTML/CSS

IMG_2977 - Copy

resume1

IMG_2978 - Copy

resume2

IMG_2979 - Copy

resume3

 


 

Day 5: Friday, July 22nd, 2016

Last day of HTML/CSS for the AcadeCoders! The AcadeCoders will be spending the day completing projects with the HTML/CSS skills they have been taught. The first project is “Broadway”, where they design a website that has a navigation menu, a background image, and a button.

IMG_3258

braod1

IMG_3260

broad2

IMG_3257

broad3

 

 

 

 

 

 

 

 

 

 

 

 

Follwing lunch and due to the severe heart warning, we decided to spend time inside and watch a movie with the campers from AcadeCamp! The AcadeCoders and AcadeCamp enjoyed watching “Wreck it Ralph”.

IMG_3266

IMG_3267

After “Wreck it Ralph”, the AcadeCoders were ready for their last afternoon of HTML/CSS! The first part of the afternoon was spent on the project “Move”, where they designed a website with a splash display, a button, and navigation bar.

IMG_3262

move1

IMG_3263

move2

IMG_3261

move3

 

 

 

 

 

 

 

 

 

 

 

 

The second part of the afternoon was spent on a lesson on Atom: the hackable code editor. The AcadeCoders were exposed to one of the most popular code editors used in web development and were taught how to create their own .html and .css files while learning to develop the front-end of a web site.

atom1

atom2

atom3

About The Author

No Comments on "AcadeCoders Blog 2016: HTML/CSS (July 18th-22nd, 2016)"

Leave a Comment

Your email address will not be published. Required fields are marked *