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.
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.
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.
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.
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.
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.
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
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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”.
(EXiMiUS)-6.jpg)
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.
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.
No Comments on "AcadeCoders Blog 2016: HTML/CSS (July 18th-22nd, 2016)"