Session 1
Built a certification project 'Product Landing Page'
- This was one of the required projects to earn the certificate
- https://sanket084.github.io/responsive-web-design/css-projects/milestone4.html
Session 2
Built the last certification project 'Personal Portfolio Website'
- This was the last certification project, thus marking the end of this course.
- https://sanket084.github.io/responsive-web-design/css-projects/milestone5.html
- Next I will start with JavaScript.
Session 1
Today I started and completed exercise 'Learn CSS Grid by Building a Magazine'
- Created a magazine using CSS Grid Layout
- CSS Grid is a layout like flexbox
- Learned how to create a grid and assign elements their specific grid
- Using CSS Grid properties the page was separated in 3 columns, as we see in real newspapers/magazines
- Used @media queries to make to magazine responsive
- https://sanket084.github.io/responsive-web-design/css-projects/magazine.html
Session 2
In the second session, completed exercise 'Learn CSS Animation by Building a Ferris Wheel'
- Built a Ferris wheel using a solid border on a div.
- Used border-radius: 40% to convert the div into a circle
- Used animation properties of CSS:
- @keyframes used in percentage to set some properties at given keyframe
- animation-name
- animation-duration
- animation-iteration-count -animation-timing-function
- The 'animation' shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation-timeline
- https://sanket084.github.io/responsive-web-design/css-projects/ferris-wheel.html
Started and completed exercise 'Learn CSS Variables by Building a City Skyline
- Built a city skyline using CSS Variables
- Learnt how to declare and use variables in css
- Syntax: --variable-name: value
- New trick: use of border to determine positions of elements
- https://sanket084.github.io/responsive-web-design/css-projects/city-skyline.html
Was not able to complete exercises today because of college assignments
Session 1
Today started and completed exercise 'Learn Intermediate CSS by Building a Cat Painting'
- Built a cat painting using CSS
- Learnt about different types of positions
- Static
- Fixed
- Absolute
- Sticky
- Relative
- Using different types of CSS positioning parts of the cats were placed
- Use of border properties to create parts of cat.
- https://sanket084.github.io/responsive-web-design/css-projects/cat-painting.html
Session 2
Started and completed first responsive exercise 'Learn Responsive Web Design by Building a Piano
- Built a piano which is responsive in size, works for various types of screen sizes
- Learnt about media queries
- Learnt about ::before and ::after pseudo-elements
- https://sanket084.github.io/responsive-web-design/css-projects/piano.html
Session 1
Today learnt about Git , Github and basic terminal commands.
- Watched a crash course video on YouTube
- Connected with Saurabh Bhaiya
- Learned and used terminal commands:
- ls (list)
- mkdir (make directory)
- cd (change directory)
- pwd (print working directory)
- rm -rf (remove recursing forcefully)
- Installed HomeBrew
- Installed node and git on local environment
- Created Github account
- Use of commands:
- git clone
- git add
- git commit
- git push
- git pull
- git branch
- git checkout
Session 2
Started with lesson 'Learn more about CSS Pseudo Selectors by Building A Balance Sheet'
- Created a balance sheet using HTML and CSS
- Learned about a new pseudo selectors:- :not
- :nth-of-type
- :first-of-type
- Eg: span[class]
- Screen Reader Only (sr-only) class for being hidden to general users but can be read by the screen readers enabling enhanced accessibility
- https://sanket084.github.io/responsive-web-design/css-projects/balance-sheet.html
Session 1
Today completed the remaining steps of 'Learn Accessibility by Building a Quiz
- Completed steps 41 - 67
- Used 'aria-labelledby' attribute for screen readers
- https://sanket084.github.io/responsive-web-design/css-projects/accessibility-quiz.html
Session 2
Built a certification project 'Tribute Page'
- This was one of the required projects to earn the certificate
- Tribute page was made for a famous person
- It included a chronological order of major events in their life
- Liked the use of padding for
tag in
- https://sanket084.github.io/responsive-web-design/css-projects/milestone2.html
Today I started with the lesson: 'Learn Accessibility by Building a Quiz'
- Completed 1 - 40 exercises
- Use of ARIA attributes for accessibility
- Design practices to adapt site for screen readers and other accessibility accessories
Was not able to complete any exercises as I was not home
- Upcoming exercise is about implementation of accessibility elements to make webpage accessible to specially abled clients
Session 1
Today started with 'Learn CSS Flexbox by Building a Photo Gallery
- Completed 24 of 24 steps
- Built a cat photo gallery using Flexbox
- Learned about Flexbox
- 'justify-content' to align horizontally
- 'align-items' to align vertically
- Use of 'flex-direction' and 'gap' properties
- https://sanket084.github.io/responsive-web-design/css-projects/photo-gallery.html
Session 2
Second session completed: 'Learn Typography by Building a Nutrition Label'
- Completed all 67 steps
- Built a nutrition label to understand typography
- This was a interesting exercise
- In this exercise was introduced
- Learned how to use the rem unit
- https://sanket084.github.io/responsive-web-design/css-projects/nutrition-label.html
Session 1
Completed the remaining 20 steps of 'Learn HTML by Building a Registration Form'
- Completed steps 46 - 65
- Learned about min-width, max-width, em and rem (root em)
- Learned how to select a specific input type
- For example to select the submit type: input[type = "submit"]
- https://sanket084.github.io/responsive-web-design/css-projects/registration-form.html
Session 2
Built a certification project 'Survey Form'
- This was one of the required projects to earn the certificate
- A survey form was built from scratch
- Similar to the functionality of https://survey-form.freecodecamp.rocks
- https://sanket084.github.io/responsive-web-design/css-projects/milestone1.html
Session 3
Last session of the day, started and completed: Learn the CSS Box Model by Building a Rothko Painting
- Completed steps 1 to 45
- Learned about margin, border, padding
- Overlapping of margin and paddings
- Use of 'overflow' to resolve overlapping margin/padding conflicts
- https://sanket084.github.io/responsive-web-design/css-projects/rothko-painting.html
Session 1
Today I completed the remaining 15 steps of 'Learn CSS Colors by Building a Set of Colored Markers'.
- Completed steps 70 - 94
- Learned that all elements have a border, but border-style is set to 'none' by default
- Learned about the alpha property in colors
- Alpha can be said as the opacity of a color. It can be used with rgb, hsl or hex function by adding the alpha value(0 - 1) at the last: Eg: rgba(255, 255, 255, 0.5) hsla(242, 51%, 23%, 0.75) #3B7E20CC
- https://sanket084.github.io/responsive-web-design/css-projects/colored-markers.html
Session 2
In second session I started new exercise: Learn HTML by Building a Registration Form
- Completed steps 1 - 45
- This exercise is about creating a registration form•
- Learned about the elements used in form
- 'Fieldset' is used to group several controls as well as labels within a form.
- element can be used to give a title to a fieldset•
Was not able to complete any exercises as I was not home
Today I started with the exercise: Learn CSS Colors by Building a Set of Colored Markers.
- completed about 69 out of 94 steps
- Learned about color selection in CSS
- Colors can be defined by 3 ways
- Color names — example: red
- RGB function — example: rgb(255, 255, 255) 0 being darkest value, 255 being the brightest value
- HSL function — example: hsl(240, 56%, 42%) hue | saturation | lightness
- Hex function — example: #f7f7f7 denotes RGB values in hexadecimal